JavaScript - 이벤트 종류

1-1. 마우스 이벤트

이벤트 이름	설명
mouseenter	포인터가 이벤트 핸들러로 등록된 요소 위로 이동했을 때
mouseover	포인터가 이벤트 핸들러로 등록된 요소나 그 자식 요소 위로 이동했을 때
mousemove	포인터가 요소 위에서 이동했을 때(이동하는 동안 계속 실행)
mousedown	포인터를 요소 위에서 버튼을 누를 때
mouseup	포인터를 요소 위에서 버튼을 뗄 때
auxclick	포인터로 왼클릭(주 클릭)이 아닌 버튼으로 요소를 클릭할 때
click	포인터로 왼클릭(주 클릭)으로 요소를 클릭할 때
dbclick	포인터로 요소를 두번 클릭 할 때
contextmenu	포인터로 우클릭(보조 클릭)으로 요소를 클릭할 때(컨텍스트 메뉴 표기 전)
wheel	포인터에 휠 버튼을 어떤 방향이든 회전되었을 때
mouseleave	포인터가 이벤트 핸들러로 등록된 요소 밖으로 이동할 때
mouseout	포인터가 이벤트 핸들러로 등록된 요소나 그 자식 요소 밖으로 이동할 때
select	어떤 텍스트가 선택되고 있을 때
pointerlockchange	포인터가 잠겼거나 해제 되었을 때
pointerlockerror	기술적인 이유나 권한 거절을 이유로 포인트 잠금이 불가했을 때

1-2. 드래그 앤 드랍(Drag & Drop) 이벤트

이벤트 이름	설명
dragstart	사용자가 요소나 텍스트 선택을 드래그 하기 시작할 때
drag	요소나 텍스트 선택이 드래그 되고 있을 때(350ms 마다 실행)
dragend	드래그 작업이 끝났을 때(포인트 버튼인 esc 키를 누를때)
dragenter	드래그된 요소나 텍스트 선택이 유요한 드랍 대상에 들어왔을 때
dragover	요소나 텍스트 선택이 유효한 드랍 대상위로 드래그 되었을 때(350ms 마다 실행)
dragleave	드래그된 요소나 텍스트 선택이 유효한 드랍 대상에서 나갈 때
drop	요소가 유효한 드랍 대상에 드랍되었을 때

2. 키보드 이벤트

이벤트 이름	설명
keydown	키보드의 키가 눌렀을 때
keyup	키보드의 키가 누르고 뗄 때
keypress	쉬프트, Fn, CapsLock을 제외한 키보드의 키가 눌린 상태일 때(연속으로 실행)

3. 유저 인터페이스(UI) 이벤트

이벤트 이름	설명
load	웹 페이지의 리소스 로드가 완료되었을 때
unload	웹 페이지가 언로드 될 때(또는 새로운 페이지를 요청한 경우)
error	브라우저가 자바스크립트 에러가 발생했거나 요청한 자원이 없을 때
resize	브라우저의 윈도우 크기를 조정했을 때
scroll	스크롤을 조작하거나 키보드의 Home/End등의 키를 누를 때

4. 포커스(Focus) 이벤트

이벤트 이름	설명
focus	요소가 포커스를 얻었을 때
blur	요소가 포커스를 잃었을 때
focusin	요소가 포커스를 얻었을 때(버블링 Bubbling 발생)
focusout	요소가 포커스를 잃었을 때(버블링 Bubbling 발생)

* 버블링(Bubbling) : 이벤트가 발생한 요소부터 윈도우까지 이벤트를 전파한다.
* 캡처링(Capturing) : 윈도우로부터 이벤트가 발생한 요소까지 이벤트를 전파한다.

버블링(Bubbling) / 캡처링(Capturing)
↑ 버블링의 방향 ↑ 아래 → 위로 전파	윈도우(Window)				↓ 캡처링의 방향 ↓ 위 → 아래로 전파
	문서(Document)
	<html>
	<body>
	<table>
	<tbody>
	<tr>		<tr>
	<td>	<td>	<td>	<td>
	텍스트 노드 1	텍스트 노드 2	텍스트 노드 3	텍스트 노드 4

* 버블링과 캡처링을 제어하는 방법

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.root {
position: absolute;
width: 300px;
height: 300px;
background-color: red;
}
.parent {
position: absolute;
width: 200px;
height: 200px;
background-color: green;
}
.child {
position: absolute;
width: 100px;
height: 100px;
background-color: blue;
}
.target {
width: 50px;
height: 50px;
background-color: black;
color: white;
}
div:hover {
background-color: gray;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="root">
<div class="parent">
<div class="child">
<div class="target">Target</div>
</div>
</div>
</div>
<script>
function bubblingAndCapturing(useCapture, stop) {
document.querySelector('body').addEventListener('click', function() {
alert("body");
}, useCapture)
document.querySelector('.root').addEventListener('click', function() {
alert("root");
}, useCapture)
document.querySelector('.parent').addEventListener('click', function() {
alert("parent");
}, useCapture)
document.querySelector('.child').addEventListener('click', function() {
alert("child");
}, useCapture)
document.querySelector('.target').addEventListener('click', function(e) {
alert("target");
if (stop) {
e.stopPropagation();
}
}, useCapture)
}
bubblingAndCapturing();
// bubblingAndCapturing(true);
// bubblingAndCapturing(false, true);
</script>
</body>
</html>

버블링, 캡처링.html

0.00MB

위의 코드는 버블링이 적용이 된 상태로 Target이라고 적힌 div 태그(텍스트 노드)를 마우스 이벤트의 click을 이용해 사용자가 클릭을 하면 alert를 실행하게 만든 코드이다. 버블링이 적용되어 있기 때문에 Target이 적힌 텍스트 노드를 마우스로 클릭을 하면 그것을 감싸고 있는 4개의 div 태그(class로 안쪽부터 각각 .target(Target 텍스트 노드를 가진 div 태그) -> .child -> .parent -> .root 그리고 최종적으로 <body> 태그까지 alert가 차례대로 실행이 되는 것을 알 수 있다.

위의 코드에서 버블링을 캡처링으로 바꾸려면 useCapture의 매개변수를 바꿔주면 된다. 이름 그대로 캡처링을 사용하는지 않하는지의 여부를 true와 false(기본값) 뜻하는 것이다. 맨 아래에 bubblingAndCapturing(); 메서드의 값을 true로 바꿔주면 된다. 이벤트의 전파를 하고 싶지않다면 e.stopPropagation() 메서드를 사용하면 된다.

5. 폼(Form) 이벤트

이벤트 이름	설명
input	<input>, <textarea>의 요소 값이 변경되었을 때
change	checkbox, select 또는 radio의 버튼 상태가 변경되었을 때
submit	제출(submit)을 눌러 제출할 때
reset	초기화(reset)을 눌러 초기화 할 때
cut	폼(form) 안에 콘텐츠를 잘라내기를 했을 때
copy	폼(form) 안에 콘텐츠를 복사했을 때
paste	폼(form) 안에 콘텐츠를 붙여넣을 때
select	텍스트를 선택했을 때

'프로그래밍 공부 > JavaScript' 카테고리의 다른 글

JavaScript - 이벤트 발생 객체와 이벤트 객체 / 이벤트 강제 실행 (0)	2019.12.19
JavaScript - 고전 이벤트 모델(기본 이벤트 모델) (0)	2019.12.19
JavaScript - 이벤트 개요 (0)	2019.12.18
JavaScript - 문서 객체 스타일 조작 / 문서 객체 제거 (0)	2019.12.17
JavaScript - 문서 객체 선택 (0)	2019.12.17