Event Bubbling, Capture, Delegation 원리 이해와 응용 (작성중)

1. 이벤트란?

1-1. 이벤트는 객체다

• 종류에 따라서 event.type이 변한다.
  https://javascript.info/introduction-browser-events#event-object
• 핸들러에 의해 전달인자로 전달된다.

1-2. 이벤트 타입

1-2. 이벤트 핸들러란

1-3. 대상에 이벤트 핸들러 등록하기

HTML Attribute 방식

<tagName on{eventType}="callback()">...</tagName>

DOM Property 방식

target.on{eventType} = callback

addEventListener 방식

target.addEventListener({eventType}, callback[, options])

• 동일한 이벤트 핸들러를 여러개 등록 가능
• 이벤트 옵션 변경 가능

참고 : Introduction to brower events | javascript.info

2. 이벤트 버블링(Bubbling)과 캡쳐(Capture) 원리

이벤트를 어떤 방향으로 전파할지에 대한 방식에 대한 것
eventPhase로 디버깅 가능
버블링은 이벤트 발생 지점에서 최상위 노드(body)로 전파되며 해당 이벤트에 대한 모든 핸들러의 함수 실행. eventpPhase: 2(target phase) -> 3(bubbling phase)
캡쳐는 최상위 노드(body)에서 이벤트 발생 지점까지 전파되며 해당 이벤트에 대한 모든 핸들러의 함수 실행. eventPhase: 1(capturing phase) -> 2(target phase)

참고 : event.eventPhase | MDN

기본(default) 방식은 버블링.
만약 캡쳐링 방식을 사용하려면 addEventListener에 세번째 인자에 true 또는 {capture:true}
실제로는 캡쳐링 방식을 사용하는 경우는 극히 드물며, IE는 캡쳐링을 지원하지 않기 때문에 사용에 신중해야한다.

참고 : EventTarget.addEventListener | MDN

2-1. 버블링: 상위로 이벤트 전파하며 핸들러 호출

2-2. 캡쳐: 하위로 이벤트 전파하며 핸들러 호출

2-3. 이벤트 전파 방지하기

event.stopPropagation();

• 상위 엘리먼트의 동일한 이벤트가 호출되는 것을 막기 위해서
• 예를들어, 만약 <tr>에 onclick이벤트가 걸려 있고, <table>에도 걸려있을 경우, <tr>을 클릭하면 <tr>의 이벤트에서 <table>의 이벤트 순으로 이벤트 핸들러가 호출되는데, 이 경우 <table>의 onclick 이벤트가 trigger 되지 않도록 하는 것이 stopPropagation() 이다.

3. 이벤트 위임(Delegation)으로 응용하기

더 알아보기

• Introduction to Events | javascript.info
• 이벤트 객체 | Kendrick's Blog
• 이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지 | 캡틴판교 블로그
• 왜 이벤트 위임을 해야 하는가? | Toast UI