캡쳐링 버블링

• 버튼 클릭 → Document의 ‘root’에 이벤트 객체 생성 (누른 버튼에 생성이 아닌 최상단에 생성)
• document root에서 실제 이벤트 벌어진 곳까지 이동(캡쳐링)
• 실제 이벤트 발생 → document root까지 이동 (버블링)

onClick A안에 onClick B이 있는 경우, B호출 후 A호출한다. 

이를 막기 위해서 A 호출 시점에 e.stopPropagation();를 사용 → 버블링 중단.

 

 document.addEventListener("click", handleClick, listenCapturing);

3번째를 명시하지 않으면 기본적으로 버블링으로 유지한다. 

 

 

각 태그마다 div.addEventListener 처럼 가능하다.

 

기본적으로 버블링이고, 캡쳐링은 잘 안쓴다.

 

[버블링의 경우]

div.addEventListener 호출3

      div.addEventListener 호출2

              div.addEventListener 호출1

 

인 경우 맨 아래까지 우선 도달 후 위로 올라가면서 호출한다.

호출 1 -> 호출 2 -> 호출 3

 

[캡쳐링의 경우]

div.addEventListener 호출1

      div.addEventListener 호출2

               div.addEventListener 호출3

 

바깥에 있는것부터 그냥 호출한다.