자바스크립트 이벤트 캡처링, 버블링, 타겟

이벤트 전파는 이벤트가 발생했을 때 다른 영역에 전파하는것을 말한다.

이벤트 전파에는 캡처링과 버블링이 있다.

 

이벤트는 하위요소에서 상위요소로 탐색한다.

 

---

const capts = document.querySelectorAll("div");

capts.forEach(function(div){
	div.addEventListener("click", fnCapture, {
		capture: true
	});
});

이벤트 캡처링

- 이벤트 발생 시 가장 상위 영역에서부터 탐색이 된다.

 

- addEventListener에 capture를 true값을 주면 된다.

- default값은 false

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

위 코드를 실행하게 되면 console에 capture의 true, false 유무에 따라 순서가 바뀌는 걸 볼 수 있다.

 

기존에는 하위요소인 third부터 출력이 되었다면

capture: true를 통해서 first부터 출력이 되는걸 볼 수 있다.

---

이벤트 버블링

- 이벤트 발생 시 가장 아래 영역부터 탐색

 

기존 이벤트 요소인 default값이 버블링으로 보면된다.

capture속성에 false를 입력하거나 속성자체를 넣지 않으면 끝

---

이벤트 타겟

- 이벤트가 발생했을 때 시작된 곳

- event.target 을 이용하여 접근 가능

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.