[JS] 이벤트 버블링/캡쳐링

이애진·2023년 6월 7일

JavaScript

목록 보기

15/16

A에 A 전용 클릭 이벤트 달고, B에 B 전용 클릭 이벤트를 달아놓은 상태였다. (A 이벤트와 B 이벤트는 독립적이다.)
문제는 B에서 클릭 이벤트가 발생할 때, A에 걸어놓은 이벤트도 같이 실행됐다.

이벤트 버블링 때문에 A 이벤트도 실행된 것처럼 보였다.

DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다.
다만 이벤트가 무작정 전파되는 것은 아니다. 부모-자식 간 관계만 전파된다.

이벤트가 전파되는 방향에 따라 3단계로 구분할 수 있다.

c 영역을 누르면 c > b > a 가 찍히는걸 볼 수 있다.
이처럼 버블링은 이벤트가 아래에서 위로 전파된다.

브라우저의 이벤트는 기본적으로 버블링 방식으로 이벤트가 전파된다.

그럼 캡처링 설정은 어떻게 해?
이벤트 리스너 맨 끝에 아래와 같이 true 옵션만 설정하면 된다.

document.getElementById("d").addEventListener(
  "click",
  () => console.log("d"),
  true
);

그리고 f 영역을 누르면 d > e > f 가 찍힌다.
캡처링을 사용해 볼 경우가 드물 것 같다는 생각이 들었다.

본론으로 돌아와서 나는 B 이벤트가 발생할 때, A 이벤트도 발생하지 않길 원했다.

<div onClick={(e) => {
     e.stopPropagation();
    // do something
}}>

그래서 그냥 단순하게 이벤트 전파를 막고자 하는 부분에 stopPropagation을 달았다.
근데 stopPropagation을 사용한 부분은 죽은 영역으로 판단해서 행동 패턴 분석을 위한
분석 시스템이 인식하지 못하는 상황이 생긴다는 블로그를 봤다.

죽은영역으로 판단한다는게 아직 잘 안와닿아서 나중에 찾아봐야될거같다.

그래서 e.target과 e.currentTarget이 같은지 아닌지로 이벤트 전파를 막으신 듯 하다.

Frontend Developer