<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 - 마우스액션</title>
<style type="text/css">
div {
width: 50px;
height: 50px;
}
#d1 {
background-color: pink;
}
#d2 {
background-color: lightgreen;
}
#d3 {
background-color: lightblue;
}
#d4 {
background-color: coral;
}
</style>
</head>
<body>
<div id="d1" onmouseover="changeColor(this)">마우스오버</div>
<div id="d2" onmousedown="changeColor(this)">마우스다운</div>
<div id="d3" onmouseup="changeColor(this)">마우스업</div>
<div id="d4" onmouseout="changeColor(this)">마우스아웃</div>
<script type="text/javascript">
function changeColor(obj) {
obj.style.backgroundColor = "gray";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>키보드 이벤트</title>
</head>
<body>
<input type="text" onkeydown="show()">
<script type="text/javascript">
function show() {
console.log("키보드눌림 : "+event.keyCode);
}
</script>
</body>
</html>
