📝 JavaScript
🖥️ 1. change 이벤트
change 이벤트는 요소 변경이 끝나면 발생한다.
- 텍스트 입력 요소인 경우, 요소 변경이 끝날 때가 아니라 포커스를 잃을 때 이벤트가 발생한다. (버튼을 클릭하는 등의 동작을 통해 포커스를 다른 곳으로 옮기는 순간 change 이벤트가 발생)
EX)
<body>
<p id="result"></p>
<input type="text" id="target" />
<script>
let t = document.getElementById('target');
t.addEventListener('change',function(event){
document.getElementById('result').innerHTML
= event.target.value;
});
</script>
</body>
🖥️ 2. focus, blur 이벤트
focus 이벤트는 요소가 포커스를 받을 때 발생하는 것을 의미한다.
blur 이벤트는 포커스를 잃을 때 발생하는 것을 의미한다.
EX)
<body>
<input id="target" type="text" />
<script>
let t = document.getElementById('target');
t.addEventListener('blur',function(){
console.log('blur');
});
t.addEventListener('focus',function(){
console.log('focus');
});
</script>
</body>
🖥️ 3. mouse 이벤트
EX)
<head>
...
<style>
body{
background-color: black;
color: white;
}
#target{
width: 200px;
height: 200px;
background-color: green;
margin: 10px;
}
table{
border-collapse: collapse;
margin: 10px;
float: left;
width: 200px;
}
td, th{
padding: 10px;
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="target"></div>
<table>
<tr>
<th>event type</th>
<th>info</th>
</tr>
<tr>
<td>click</td>
<td id="elmclick"></td>
</tr>
<tr>
<td>dblclick</td>
<td id="elmdblclick"></td>
</tr>
<tr>
<td>mousedown</td>
<td id="elmmousedown"></td>
</tr>
<tr>
<td>mouseup</td>
<td id="elmmouseup"></td>
</tr>
<tr>
<td>mousemove</td>
<td id="elmmousemove"></td>
</tr>
<tr>
<td>mouseover</td>
<td id="elmmouseover"></td>
</tr>
<tr>
<td>mouseout</td>
<td id="elmmouseout"></td>
</tr>
<tr>
<td>contextmenu</td>
<td id="elmcontextmenu"></td>
</tr>
</table>
