반응형
39. 마우스
1) 이벤트 타입
웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원한다.
- click
클릭했을 때 발생하는 이벤트. - dblclick
더블클릭을 했을 때 발생하는 이벤트 - mousedown
마우스를 누를 때 발생 - mouseup
마우스버튼을 땔 때 발생 - mousemove
마우스를 움직일 때 - mouseover
마우스가 엘리먼트에 진입할 때 발생 - mouseout
마우스가 엘리먼트에서 빠져나갈 때 발생 - contextmenu
컨텍스트 메뉴가 실행될 때 발생
2) 키보드 조합
마우스 이벤트가 호출될 때 특수키(alt, ctrl, shift)가 눌려진 상태를 감지해야 한다면 이벤트 객체의 프로퍼티를 사용한다. 이 때 사용하는 프로퍼티는 아래와 같다.
- event.shiftKey
- event.altKey
- event.ctrlKey
3) 마우스 포인터 위치
마우스 이벤트와 관련한 작업에서는 마우스 포인터의 위치를 알아내는 것이 중요할 때가 있는데 이런 경우 이벤트 객체의 clientX와 clientY를 사용한다.
<html>
<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>
<table>
<tr>
<th>key</th>
<th>info</th>
</tr>
<tr>
<td>event.altKey</td>
<td id="elmaltkey"></td>
</tr>
<tr>
<td>event.ctrlKey</td>
<td id="elmctrlkey"></td>
</tr>
<tr>
<td>event.shiftKey</td>
<td id="elmshiftKey"></td>
</tr>
</table>
<table>
<tr>
<th>position</th>
<th>info</th>
</tr>
<tr>
<td>event.clientX</td>
<td id="elemclientx"></td>
</tr>
<tr>
<td>event.clientY</td>
<td id="elemclienty"></td>
</tr>
</table>
<script>
var t = document.getElementById('target');
function handler(event){
var info = document.getElementById('elm'+event.type);
var time = new Date();
var timestr = time.getMilliseconds();
info.innerHTML = (timestr);
if(event.altKey){
document.getElementById('elmaltkey').innerHTML = timestr;
}
if(event.ctrlKey){
document.getElementById('elmctrlkey').innerHTML = timestr;
}
if(event.shiftKey){
document.getElementById('elmshiftKey').innerHTML = timestr;
}
document.getElementById('elemclientx').innerHTML = event.clientX;
document.getElementById('elemclienty').innerHTML = event.clientY;
}
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>
</html>
실행 화면
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 생활코딩 javascript 정리 - 네트워크 통신 - JSON (0) | 2017.09.11 |
|---|---|
| 생활코딩 javascript 정리 - 네트워크 통신 - Ajax (0) | 2017.09.10 |
| 생활코딩 javascript 정리 - jQuery on API 사용법 (0) | 2017.09.03 |
| 생활코딩 javascript 정리 - jQuery 이벤트 vs 자바스크립트 이벤트 (0) | 2017.09.02 |
| 생활코딩 javascript 정리 - 문서 로딩 (0) | 2017.08.27 |
| 생활코딩 javascript 정리 - 이벤트 타입 폼(form) (0) | 2017.08.20 |
| 생활코딩 javascript 정리 - 기본동작의 취소 (0) | 2017.08.15 |
| 생활코딩 javascript 정리 - 이벤트 등록방법(inline) (0) | 2017.08.13 |