이벤트
자바스크립트에서 이벤트는 브라우저에서 발생하는 상호작용을 말합니다.
사용자가 마우스를 클릭 했을 때, 더블 클릭 했을 때, 키보드 버튼을 눌렀을 때 등 어떠한 상호작용을 하게 되면 이를 자바스크립트에서 이벤트가 발생했다고 표현합니다.
이벤트 타겟
이벤트가 일어날, 또는 일어난 문서 객체를 의미합니다.
즉, 모든 이벤트의 시작점입니다.
이벤트 타입
이벤트의 종류를 의미합니다.
마우스 이벤트 타입
| 이벤트 타입 | 이벤트 발생 시점 |
|---|---|
| click | 마우스 버튼을 클릭했을 때 |
| dbclick | 마우스 버튼을 더블 클릭했을 때 |
| mousedown | 마우스 버튼을 누르고 있을 때 |
| mouseup | 누르고 있던 마우스 버튼을 뗄 때 |
| mousemove | 마우스 커서를 움직일 때 |
| mouseenter | 마우스 커서를 HTML 요소 안으로 이동했을 때 (버블링 x) |
| mouseover | 마우스 커서를 HTML 요소 안으로 이동했을 때 (버블링 o) |
| mouseleave | 마우스 커서를 HTML 요소 밖으로 이동했을 때(버블링x) |
| mouseout | 마우스 커서를 HTML 요소 밖으로 이동했을 때(버블링o) |
키보드 이벤트 타입
| 이벤트 타입 | 이벤트 발생 시점 |
|---|---|
| keydown | 키를 누르고 있을 때 |
| keypress | 키를 누르고 뗏을 때 (폐지되었으므로 사용 x) |
| keyup | 누르고 있던 키를 뗄 때 |
포커스 이벤트 타입
| 이벤트 타입 | 이벤트 발생 시점 |
|---|---|
| focus | 요소가 포커스를 얻었을 때 (버블링 x) |
| blur | 요소가 포커스를 잃었을 때 (버블링 x) |
| focusin | 요소가 포커스를 얻었을 때 (버블링 o) |
| foucusout | 요소가 포커스를 잃었을 때 (버블링 o) |
폼 이벤트 타입
| 이벤트 타입 | 이벤트 발생 시점 |
|---|---|
| submit | form을 submit할 때 (버튼 또는 키) |
| reset | reset 버튼을 클릭할 때 (최근에는 사용 안함) |
값 변경 이벤트 타입
| 이벤트 타입 | 이벤트 발생 시점 |
|---|---|
| input | input 또는 textarea 요소의 값이 변경되었을 때 |
| change | select box, checkbox, radio button의 상태가 변경되었을 때 |
뷰 이벤트 타입
| 이벤트 타입 | 이벤트 발생 시점 |
|---|---|
| resize | 브라우저 윈도우의 크기를 리사이즈할 때 연속적으로 발생 |
| scroll | 웹페이지(document) 또는 HTML 요소를 스코롤할 때 연속적으로 발생 |
리소스 이벤트 타입
| 이벤트 타입 | 이벤트 발생 시점 |
|---|---|
| load | DOMContentLoaded 이후, 모든 리소스의 로딩이 완료되었을 때 |
| unload | 리소스가 언로드 될 때 (주로 새로운 웹페이지를 요청한 경우) |
| abort | 리소스 로딩이 중단되었을 때 |
| error | 리소스 로딩이 실패했을 때 |
이벤트 핸들러
이벤트가 발생 했을 때, 동작하는 코드를 의미합니다.
이벤트 등록
이벤트를 등록하는 방법은 3가지가 있습니다.
-
이벤트 핸들러 어트리뷰트 방식
<!DOCTYPE html> <html> <body> <button onclick="sayHi('Taemin')">Click me!</button> <script> function sayHi(name) { console.log(`Hi! ${name}.`); } </script> </body> </html> -
이벤트 핸들러 프로퍼티 방식
<!DOCTYPE html> <html> <body> <button>Click me!</button> <script> const $button = document.querySelector("button"); // 이벤트 핸들러 프로퍼티에 이벤트 핸들러를 바인딩 (익명 함수로 가능) $button.onclick = function () { console.log("button click"); }; </script> </body> </html> -
addEventListener 메서드 방식 (주로 사용하는 방식)
<html> <body> <button>Click me!</button> <em></em> <script> const $button = document.querySelector("button"); const $em = document.querySelector("em"); $button.addEventListener("click", function () { $em.innerHTML = "Button Cliked 1"; }); </script> </body> </html>
이벤트 위임
이벤트 위임에 대해 알기 위해서는 이벤트 버블링과 캡쳐링의 동작 방식을 알아야 합니다.
이벤트 버블링
하위 엘리머느에 이벤트가 발생했을 때 그 엘리먼트부터 시작해서 상위요소까지 이벤트가 전달되는 방식을 의미합니다. (이벤트 하위 요소 → 이벤트 상위 요소)
<div>
<ul>
<li>예시</li>
</ul>
</div>document.querySelector('li').addEventListener('click', () => console.log('li 클릭'));
document.querySelector('ul').addEventListener('click', () => console.log('ul 클릭'));
document.querySelector('div').addEventListener('click', () => console.log('div 클릭'));li 클릭
ul 클릭
div 클릭이렇게 각 엘리먼트들에 이벤트 핸들러를 달고 li 태그를 찍게되면 콘솔과 같이 출력하게 됩니다.
이벤트 캡쳐링
하위 엘리먼트에 이벤트 핸들러가 있을 때 상위 엘리먼트부터 이벤트가 발생하기 시작해서 하위 엘리먼트까지 이벤트가 전달되는 방식을 말합니다. (이벤트 상위 요소 → 이벤트 하위 요소)
document.querySelector('ul').addEventListener('click', () => console.log('ul 클릭'), { capture: true });아까 버블링에서 캡쳐링으로 바꾸기 위해서는 addEventListener()의 마지막 인자로 {capture : true}를 전달해주면 됩니다. (기본값은 false)
ul 클릭
li 클릭
div 클릭이렇게 클릭한 엘리먼트의 상위요소 중 이벤트 캡쳐링이 적용된 엘리먼트부터 시작하고 그 다음은 다시 이벤트 버블링 방식으로 동작합니다.
이벤트 위임
하위 엘리먼트들이 여러개 있으며 공통적으로 이벤트 핸들러를 등록해야할 때, 하위 엘리먼트들에 각각 이벤트 핸들러를 등록하지 않고 상위 엘리먼트에 이벤트 핸들러를 등록하여 하위 엘리먼트들을 제어하는 방식입니다.
<ul onclick="alert(event.type + '!')">
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ul>이렇게 li에 각각 이벤트 핸들러를 등록하지 않고 상위 엘리먼트인 ul에만 등록해도 동작하는 것을 알 수 있습니다.
이러한 이벤트 위임으로 얻는 이점은 다음과 같습니다.
- 동적으로 엘리먼트를 추가할 때마다 이벤트 핸들러를 고려할 필요가 없습니다.
- 상위 엘리먼트에 하나의 이벤트 핸들러만 등록하면 되므로 코드가 훨씬 깔끔해집니다.
- 메모리에 있는 이벤트 핸들러의 수가 줄어들기 때문에 퍼포먼스 측면에서도 이점이 있습니다.
