이벤트
1. 마우스 이벤트 타입 종류
- click : 마우스 버튼을 클릭했을 때
- dbclick : 마우스 버튼을 더블 클릭했을 때
- mouseup : 누르고 있던 마우스 버튼을 뗄 때
- mousedown : 마우스 버튼을 누르고 있을 때
- mousemove : 마우스 커서를 움직일 때
- mouseenter : 마우스 커서를 HTML 요소 안으로 이동했을 때 (버블링 x)
- mouseover : 마우스 커서를 HTML 요소 안으로 이동했을 때 (버블링 o)
- mouseleave : 마우스 커서를 HTML 요소 밖으로 이동했을 때(버블링x)
- mouseout : 마우스 커서를 HTML 요소 밖으로 이동했을 때(버블링o)
2. 이벤트 핸들러 등록 방식
-
이벤트 핸들러 어트리뷰트 방식
<!DOCTYPE html> <html> <body> <button onclick="sayHi('Lee')">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 메서드 방식
<!DOCTYPE html> <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>
3. 이벤트 전파 방식(propagation)
-
DOM 트리상에 존재하는 모든 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 이를 이벤트 전파라고 한다.
사용자의 다양한 입력을 통해 동적으로 생성되는 이벤트 객체는 이벤트를 발생시킨 타깃(target)을 중심으로 DOM 트리를 통해 전파된다.
전파되는 방향에 따라 3단계로 구분할 수 있다.
-
브라우저는 기본적으로 이벤트 버블링 단계에서 이벤트를 캐치한다.
<html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <div>Click me</div> </body> <script> const html = document.querySelector("html"); const body = document.querySelector("body"); const div = document.querySelector("div"); html.addEventListener("click", () => console.log("HTML")); body.addEventListener("click", () => console.log("BODY")); div.addEventListener("click", () => console.log("DIV")); </script> </html> //DIV //BODY //HTML -
이벤트 캡처링 단계라면 HTML > BODY > DIV 순으로 ① 상위 노드에서 ② 하위 노드로 내려오며 이벤트를 캐치할 것이다.
하지만 브라우저는 기본적으로 이벤트 버블링 단계인 우리가 클릭하고자 한 이벤트 객체의 타깃인에 도달한 후 다시 해당 ② 하위 노드에서 ① 상위 노드로 돌아가는 과정 에서 이벤트를 캐치한다. -
on<event> 프로퍼티나 HTML 속성, addEventListener(event, handler)를 이용해 할당된 핸들러는 캡처링에 대해 전혀 알 수 없다. 이 핸들러들은 두 번째 혹은 세 번째 단계의 이벤트 흐름(타깃 단계와 버블링 단계)에서만 동작한다.
-
캡처링 단계에서 이벤트를 잡아내려면 addEventListener의 capture 옵션을 true로 설정해야 한다.(세번째인자)
- false이면(default 값) 핸들러는 버블링 단계에서 동작
- true이면 핸들러는 캡처링 단계에서 동작
-
공식적으론 총 3개의 이벤트 흐름이 있지만, 이벤트가 실제 타깃 요소에 전달되는 단계인 ‘타깃 단계’(두 번째 단계)는 별도로 처리되지 않는다. 캡처링과 버블링 단계의 핸들러는 타깃 단계에서 동작된다.
4. 이벤트 위임(delegation)이란?
-
이벤트 위임은 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용된다.
-
이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다.
<!DOCTYPE html> <html> <head> <title>eventDelegation</title> <meta charset="UTF-8" /> <style> body { font-family: sans-serif; } .btn-number { background-color: yellowgreen; } </style> </head> <body> <div class="container"> <button class="btn-number">1</button> <button class="btn-number">2</button> <button class="btn-number">3</button> <button class="btn-number">4</button> <button class="btn-number">5</button> </div> <script> const div = document.querySelector("div"); div.addEventListener("click", (e) => { console.log(e.target.innerHTML); }); </script> </body> </html>
