🤔 이벤트 버블링..?
💡 이벤트 버블링이란?
-
이벤트의 타깃 요소부터 상위요소까지 차례로 핸들러가 동작하는 것을 말한다.
-
가장 최상단의 조상요소(document객체)를 만날 때까지 각 요소에 할당된 핸들러가 동작한다.
-
focus 이벤트는 동작하지 않는다.
💡 this와 타깃 요소의 차이
-
타깃 요소(event.target)는 실제 실행한 요소이자 이벤트가 발생한 가장 안쪽의 요소이다.
-
this(event.currentTarget)는 현재 요소, 즉 현재 실행중인 핸들러가 할당된 요소를 참조한다.
💡 이벤트 버블링을 막기위한 방법?
-
이벤트객체의 메서드인
event.stopPropagation()를 이용한다. -
이벤트핸들러가 여러개인 상황에서는
event.stopImmediatePropagation()를 이용한다. -
❗️But 이벤트 버블링을 막는 것은 좋지 않다!
stopPropagation을 사용한 영역은 '죽은 영역(dead zone)'이 되기 때문이다.
💡 이벤트 버블링의 흐름을 반대로 구현하는 방법?
-
캡처링(capturing)이란 흐름을 이용한다.
-
캡처링이란 이벤트가 하위 요소로 전파되는 단계이다.
-
캡처링은 기본적으로 false값 이므로, 캡처링 단계에서 이벤트를 잡아내려면
addEventListener(..., true)와 같이capture옵션을true로 설정해야 한다. -> 핸들러가 캡처링 단계에서 동작한다. -
캡처링 단계에서 동작한 핸들러는
removeEventListener(..., true)로써 지워야 이벤트 버블링시에 동작할 수 있다. -
이벤트 흐름의 3가지 단계
1. 캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계
2. 타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계
3. 버블링 단계 – 이벤트가 상위 요소로 전파되는 단계💡 이벤트 버블링을 잘 활용한다면?
-
이벤트 위임(Event Delegation)과 같이 상위요소에서 하위요소의 이벤트를 제어하고자 할 때 유용하다.
-
예를 들어, 하위요소
li와 상위요소ul가 있을 때,li의 공통 부모 요소인ul에만 하나의 이벤트 핸들러를 할당해도li에서 발생하는 이벤트를ul에서 처리할 수 있게 된다.
