[JS] 버블링, 캡처링

속성	설명
버블링(bubbling)	- 기본값 - 이벤트가 발생하면, 가장 최상단의 조상 요소를 만날 때까지 요소 각각에 할당된 핸들러가 동작한다. (안쪽 => 바깥쪽)
캡처링(capturing)	- 버블링의 반대되는 개념 (바깥쪽 => 안쪽)

// 버블링
elem.addEventListener('이벤트타입', handler) //false가 기본값이다.

// 캡처링
elem.addEventListener('이벤트타입', handler, true)

---

캡처링

# 03:13 

이벤트 1개 호출

document.getElementById('target').addEventListener('click', handler, true);

 

# 03:42

이벤트 2개 호출

document.getElementById('target').addEventListener('click', handler, true);
document.querySelector('fieldset').addEventListener('click', handler, true);

 

# 04:29

아래와 같이 출력되는 이유 설명

# 05:16

this에 대한 설명

 

 

# 06:11

event.target에 대한 설명

 

 

# 07:38

이벤트 4개 호출

document.getElementById('target').addEventListener('click', handler, true);
document.querySelector('fieldset').addEventListener('click', handler, true);
document.querySelector('body').addEventListener('click', handler, true);
document.querySelector('html').addEventListener('click', handler, true);

---

버블링

document.getElementById('target').addEventListener('click', handler, false);
document.querySelector('fieldset').addEventListener('click', handler, false);
document.querySelector('body').addEventListener('click', handler, false);
document.querySelector('html').addEventListener('click', handler, false);

# 01:55

캡처링, 버블링 설정하는 방법

// 버블링
elem.addEventListener('이벤트타입', handler) //false가 기본값이다.

// 캡처링
elem.addEventListener('이벤트타입', handler, true)

 

# 07:07

이벤트 전파를 막는 방법

event.stopPropagation();

*Propagation: 전파

---

[공부 좌표]

이벤트 전파(버블링과 캡처링)

버블링과 캡처링

Event.eventPhase

 

[예제]

codepen.io/millfeel/pen/LYZNJPE

 

[기본 지식]

addEventListener