일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- 조건문
- htmlspecialchars
- Pwndbg
- 포인터
- 김성엽 대표님
- object
- 사칙연산
- xss game
- python
- sql injection
- blind sql injection
- burp suite
- 객체
- 자바스크립트
- 백준 알고리즘
- document
- element 조회
- window
- suninatas 풀이
- xss game 풀이
- property
- 함수
- github
- 백준 파이썬
- lord of sql injection
- 배열
- 파이썬
- IF문
- 메소드
- jQuery
Archives
- Today
- Total
power-girl0-0
[ 이벤트 타입 ] 마우스 본문
728x90
생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.
스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.
( 출처 : https://opentutorials.org/course/743inf.run/pBzy)
이벤트 타입
웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원한다.
|
키보드 조합
마우스 이벤트가 호출될 때 특수키(alt, ctrl, shift)가 눌려진 상태를 감지해야 한다면 이벤트 객체의 프로퍼티를 사용한다. 이 때 사용하는 프로퍼티는 아래와 같다.
|
마우스 포인터 위치
마우스 이벤트와 관련한 작업에서는 마우스 포인터의 위치를 알아내는 것이 중요할 때가 있는데 이런 경우 이벤트 객체의 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> //alt키를 누르고 있을 때
<td id="elmaltkey"></td>
</tr>
<tr>
<td>event.ctrlKey</td> //ctrl키를 누르고 있을 때
<td id="elmctrlkey"></td>
</tr>
<tr>
<td>event.shiftKey</td> //shift키를 누르고 있을 때
<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
'언어 > Javascript' 카테고리의 다른 글
on API 사용법 (0) | 2021.02.10 |
---|---|
jQuery 이벤트 (0) | 2021.02.10 |
[ 이벤트 타입 ] 문서 로딩 (0) | 2021.02.10 |
[ 이벤트 타입 ] 폼 (form) (0) | 2021.02.10 |
기본동작의 취소 (0) | 2021.02.10 |
Comments