728x90
반응형
해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
자바스크립트 기본 문법 :: 마우스 이벤트
웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원합니다.
- click
클릭했을 때 발생하는 이벤트.
- dblclick
더블클릭을 했을 때 발생하는 이벤트
- mousedown
마우스를 누를 때 발생
- mouseup
마우스버튼을 땔 때 발생
- mousemove
마우스를 움직일 때
- mouseover
마우스가 엘리먼트에 진입할 때 발생
- mouseout
마우스가 엘리먼트에서 빠져나갈 때 발생
- contextmenu
컨텍스트 메뉴가 실행될 때 발생
자바스크립트 기본 문법 :: 마우스 이벤트(키보드 조합)
마우스 이벤트가 호출될 때 특수키(alt, ctrl, shift)가 눌려진 상태를 감지해야 한다면
이벤트 객체의 프로퍼티를 사용하면 됩니다.
이 때 사용하는 프로퍼티는 아래와 같습니다.
- event.shiftKey
- event.altKey
- event.ctrlKey
프로퍼티 이름만 봐도 뭐가 뭔지 아시겠죠?
자바스크립트 기본 문법 :: 마우스 이벤트(포인터 위치)
마우스 이벤트와 관련한 작업에서는
마우스 포인터의 위치를 알아내는 것이 중요할 때가 있는데,
이런 경우 이벤트 객체의 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>
728x90
반응형
'Archive > Develop' 카테고리의 다른 글
| [ JavaScript ] 자바스크립트 기본 문법 | Ajax | XMLHttpRequest | GET & POST 방식 (0) | 2021.02.10 |
|---|---|
| [ JavaScript ] 자바스크립트 기본 문법 | jQuery 이벤트 (on API 사용법) (0) | 2021.02.10 |
| [ JavaScript ] 자바스크립트 기본 문법 | 문서로딩(load, DOMContentLoaded) | 스크립트 태그 위치 (0) | 2021.02.10 |
| [ JavaScript ] 자바스크립트 기본 문법 | 폼(form)태그 이벤트(submit, change, focus,blur) (0) | 2021.02.10 |
| [ JavaScript ] 자바스크립트 기본 동작 취소(preventDefault) (0) | 2021.02.10 |