Notice
Recent Posts
Recent Comments
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 자바스크립트 객체
- 자바스크립트 element api
- 자바스크립트 jQuery
- oracle
- 보안뉴스 한줄요약
- 카카오프로젝트 100
- GIT
- 보안뉴스한줄요약
- php
- oracle db
- 카카오프로젝트
- 자바스크립트 기본 문법
- javascript
- 자바스크립트 prototype
- 다크웹
- 카카오프로젝트100
- 랜섬웨어
- 자바스크립트
- 자바스크립트 API
- numpy
- Oracle SQL
- python
- ES6
- 보안뉴스 요약
- 자바스크립트 node
- 보안뉴스요약
- 깃허브
- 파이썬
- 보안뉴스
- 오라클
Archives
- Today
- Total
FU11M00N
[ JavaScript ] JS 마우스이벤트 본문
생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.
- 마우스 이벤트
웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원합니다.
- click
클릭했을 때 발생하는 이벤트. - dblclick
더블클릭을 했을 때 발생하는 이벤트 - mousedown
마우스를 누를 때 발생 - mouseup
마우스버튼을 땔 때 발생 - mousemove
마우스를 움직일 때 - mouseover
마우스가 엘리먼트에 진입할 때 발생 - mouseout
마우스가 엘리먼트에서 빠져나갈 때 발생 - contextmenu
컨텍스트 메뉴가 실행될 때 발생
- 키보드 조합 마우스 이벤트
마우스 이벤트가 호출될 때 특수키(alt, ctrl, shift)가 눌려진 상태를 감지해야 한다면
이벤트 객체의 프로퍼티를 사용하면 됩니다.
이 때 사용하는 프로퍼티는 아래와 같습니다.
- event.shiftKey
- event.altKey
- event.ctrlKey
- 마우스 이벤트(포인터 위치)
마우스 포인터의 위치가 필요할때 clinetX와 clinetY를 사용하여 알아낼수있습니다.
아래는 위에 소개한 이벤트와 관련된 기능을 종합적으로 보여주는 코드입니다.
- 전체적인 예제 코드
<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>
SUA 정보보안 멘토링에 참여하고 있습니다.
'SUA 정보보안 > JavaScript' 카테고리의 다른 글
[ JavaScript ] JS Ajax XMLHttpRequest 사용 (0) | 2021.02.10 |
---|---|
[ JavaScript ] JS jQuery 이벤트 (on API,이벤트 제거 , late binding selector, 다중 바인딩) (0) | 2021.02.10 |
[ JavaScript ] JS 문서로딩 (load, DOMContentLoaded) (0) | 2021.02.10 |
[ JavaScript ] JS from 태그 이벤트 (blur, focus,change) (0) | 2021.02.10 |
[ JavaScript ] JS 캡처링(Capturing), 버블링(Bubbling) (0) | 2021.02.10 |
Comments