이벤트 버블링, 캡쳐링, 위임

이벤트 버블링

이벤트 버블링은 특정 화면 요소에서 이벤트가 발생한 경우 해당 이벤트가 상위 요소들로 전달되어가는 특성을 의미한다.

상위 요소란 HTML 트리 구조상 위에 있는 요소를 의미한다.

브라우저는 특정 화면 요소에서 이벤트가 발생하는 경우 그 이벤트를 최상위 요소까지 전파시키도록 동작한다. 

이렇게 하위 요소에서 상위 요소로 이벤트가 전달되는 방식을 이벤트 버블링 이라고 한다.

이벤트 캡쳐

이벤트 캡쳐는 버블링과 반대 방향으로 진행되는 이벤트 전파 방식이다.

위 그림처럼 특정 이벤트가 발생한 경우 해당 태그를 찾아 내려간다.

이벤트 캡쳐는 addEventListener를 사용할 경우 API 옵션 객체에 capture: true 를 설정해주면 된다.

event.stopPropagation()

해당 이벤트가 전파되는 것을 막는다. 이벤트 버블링의 경우 클릭한 요소의 이벤트만 발생시키고 상위 요소로의 이벤트 전달을 방지한다. 이벤트 캡쳐의 경우 클릭한 요소의 최상위 요소의 이벤트만 동작시키고 하위 요소로의 전달을 막는다.

이벤트 위임 (Event Delegation)

이벤트 위임이란 상위 요소에서 하위 요소의 이벤트를 제어하는 방식이다. 많은 경우 화면 요소마다 이벤트를 추가하게 된다면, 요소의 추가/수정시 수정해야 하는 코드가 늘어나고 관리하는 이벤트의 개수도 증가하여 성능상으로도 좋지 못하다.

이럴 때 Event Delegation을 통해 상위 요소에 하나의 이벤트를 등록하고 관리하면 관리해야하는 이벤트 개수도 줄어들고 성능상으로도 더 좋은 성능을 낼 수 있다. 물론 코드를 짜는 효율성 역시 증가하게 된다.

출처 - https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/