마우스 포커스 이벤트
<body>
<input id="target" type="text">
<script>
let t = document.getElementById("target");
// blur : 포커스가 사라졌을 때
// focus : 엘리먼트에 포커스가 생겼을 때
t.addEventListener('blur', function(){
console.log("1번 이벤트 발생!!");
});
t.addEventListener('focus', function(){
console.log("2번 이벤트 발생!!");
});
</script>
</body>마우스 포커스를 활용한 이벤트
<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>
<script>
let t = document.getElementById('target');
function handler(event){
console.log('--------------------');
console.log(event.type);
let time = new Date();
let timestr = time.getMilliseconds();
console.log(timestr);
let info = document.getElementById('elm' + event.type);
info.innerHTML = timestr;
}
t.addEventListener('click',handler);
t.addEventListener('dblclick',handler);
t.addEventListener('mousedown',handler);
t.addEventListener('mouseup',handler);
t.addEventListener('mousemove',handler);
t.addEventListener('mouseover',handler);
t.addEventListener('mouseout',handler);
t.addEventListener('contextmenu',handler);
</script>
</body>
-------------------------------------------------------------
<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></td>
</tr>
<tr>
<td>mousedown</td>
<td></td>
</tr>
<tr>
<td>mouseup</td>
<td></td>
</tr>
<tr>
<td>mousemove</td>
<td></td>
</tr>
<tr>
<td>mouseover</td>
<td></td>
</tr>
<tr>
<td>mouseout</td>
<td></td>
</tr>
<tr>
<td>contextmenu</td>
<td></td>
</tr>
</table>
<script>
let t = document.getElementById('target');
function handler(event){
console.log('--------------------');
let time = new Date();
let timestr = time.getMilliseconds();
console.log(timestr);
let info = document.getElementById('elmclick');
info.innerHTML = timestr;
}
t.addEventListener('click',handler);
</script>
</body>
-------------------------------------------------------------
<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="emlmousedown"></td>
</tr>
<tr>
<td>mouseup</td>
<td id="emlmouseup"></td>
</tr>
<tr>
<td>mousemove</td>
<td id="emlmousemove"></td>
</tr>
<tr>
<td>mouseover</td>
<td id="emlmouseover"></td>
</tr>
<tr>
<td>mouseout</td>
<td id="emlmouseout"></td>
</tr>
<tr>
<td id="emlcontextmenu">contextmenu</td>
<td></td>
</tr>
</table>
<script>
let t = document.getElementById('target');
function handler( event ){
let time = new Date();
let timestr = time.getMilliseconds();
console.log(event.type);
let info = document.getElementById('elm' + event.type );
info.innerHTML = timestr;
}
t.addEventListener('click', handler);
t.addEventListener('dblclick', handler);
t.addEventListener('mousedown', handler);
t.addEventListener('mouseup', handler);
t.addEventListener('mousemove', handler);
t.addEventListener('mouseover', handler);
t.addEventListener('mouseout', handler);
t.addEventListener('contextmenu', handler);
</script>
</body>
개발자로 진로 변경을 위해 준비하고 있습니다