이벤트 버블링

📌 이벤트 버블링

이벤트 버블링은 이벤트가 발생한 요소부터 점점 부모 요소를 거슬러 올라가서 window 까지 이벤트를 전파하는 것을 말한다.

✔️ 이벤트 버블링은 왜 일어날까?

브라우저가 이벤트 발생 의도를 알지 못하기 때문에, '사용자가 클릭하려고 의도한게 뭐지? 이건가? 이건가?' 하면서 중첩된 요소들의 이벤트가 있다면 전부 다 수행해보기 때문이다.

브라우저 동작 원리
브라우저는 이벤트가 발생한 좌표에 어떤 요소가 있는지를 확인하기 위해 렌더링 과정 중에 페인트 기록을 열심히 찾아본다.
페인트 기록을 통해 좌표를 알아낸 브라우저는 막상 우리의 의도는 읽지 못한다.

✔️ 이벤트 버블링의 문제점

이벤트 버블링은 때로는 유용하지만 때때로는 문제를 일으킬 수 있다.

예를 들어, 특정 요소에 이벤트 핸들러를 연결했는데 상위 요소에도 같은 이벤트 핸들러가 연결되어 있다면, 의도하지 않게 두 개의 이벤트가 발생할 수 있다.

✔️ 해결 방법

'event.stopPropagation()' 함수를 이용하면 이벤트가 상위 요소로 전파되는 것을 막을 수 있다.

element.addEventListener('click', function(event) {
  event.stopPropagation();
});

위 코드와 같이 활용하면 'click' 이벤트가 발생할 때 이벤트가 상위 요소로 전파되는 것을 막을 수 있으며, 의도치 않은 이벤트 발생을 피할 수 있다.