javascript 버블링과 캡처링

- 버블링

bubbling

 

한 요소에 이벤트가 발생하면

이 요소에 할당된 핸들러가 동작하고,

이어서 부모 요소의 핸들러가 동작

 

가장 최상단의 조상 요소를 만날때 까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다.

 

ex)

<div onclick="alert('1')">

   1

   <div onclick="alert('2')">

      2

      <div onclick="alert('3')">

         3

      </div>

   </div>

</div>

 

--> 

1. 가장 안쪽의 3을 클릭하면 해당 div에 할당된 onclick 핸들러가 동작

2. 바깥의 div 2의 할당된 onclick핸들러 동작

3. 그 바깥의 div 1의 할당된 onclick 핸들러 동작

 

document 객체를 만날때 까지 각 요소에 할당된 onclick 핸들러가 동작함.

 

거의 모든 이벤트는 버블링된다.

 

-- focus이벤트와 같이 버블링되지 않는 이벤트도 있다.

 

event.target

부모 요소의 핸들러는 이벤트가 정확히 어디서 발생했는지 등에 대한 자세한 정보를 얻을수 있다.

이벤트가 발생한 가장 안쪽의 요소는 타깃(target)이라 불리고

event.target을 사용하여 접근할 수있다.

 

event.target과 this( = event.currentTarget)는 다음과 같은 차이점이 있다.

 

- event.target은 실제 이벤트가 시작된 target요소. 버블링이 진행되어도 변하지 않는다.

- this는 '현재'요소로, 현재 실행중인 핸들러가 할당된 요소를 참조한다.

 

event.stopPropagation() : 이벤트를 완전히 처리하고 난 후 버블링을 중단하도록명령

 

event.stopImmediatePropagation() : 한 요소의 특정 이벤트를 처리하는 핸들러가 여러개인 상황에서

핸들러중 하나가 버블링을 멈추더라도 나머지 핸들러는 여전히 동작한다.

 

event.stopPropagation()은 위쪽으로 일어나는 버블링은 막아주지만

다른 핸들러들이 동작하는건 막지 못함.

 

버블링을 멈추고 요소에 할당된 다른 핸들러의 동작도 막으려면 stopImmediatePropagation사용

--> 요소에 할당된 특정 이벤트를 처리하는 핸들러 모두 동작하지 않음.

 

꼭 필요한 경우를 제외하곤 버블링을 막지마라!!

 

버블링은 유용하다.

 

버블링을 꼭 멈춰야 하는 명백한 상황이 아니라면 버블링을 막지 마라

아키텍처를 잘 고려해 진짜 막아야하는상황에서만 막아야한다.

 

event.stopPropagation()은 추후에 문제가 될 수 있는 상황을 만들어낼 수 있다.

 

-- 캡처링

 

DOM 이벤트 정의

1. 캡처링 단계 - 이벤트가 하위 요소로 전파되는 단계

2. 타깃 단계 - 이벤트가 실제 타깃 요소에 전달되는 단계

3. 버블링 단계 - 이벤트가 상위 요소로 전파되는 단계

 

캡처링 단계에서 이벤트를 잡아내려면 addEventListener의 capture옵션을 true로 선언

 

capture : false ==> default / 핸들러는 버블링 단계에서 동작

capture : true ==> 핸들러는 캡처링 단계에서 동작

 

** 공식적으로는 3가지 단계가 있지만

이벤트가 실제 타깃 요소에 전달되는 단계 (2번째 단계 )는 별도로 처리되지 않는다.

--> 캡처링과 버블링 단계의 핸들러는 타깃 단계에서 트리거 된다.

 

3번째 div를 클릭을 한다고 하면,

 

1. [ 캡처링 단계, 첫번째 리스너 ] :: HTML -> BODY -> 1 -> 2 

2. [ 타깃 단계, 캡처링과 버블링 둘다에 리스너를 설정하였기 때문에 2번 호출됨! ] 3

3. [ 버블링 단계, 두번째 리스너 ] :: 2 -> 1 -> BODY -> HTML

 

 

- 핸들러를 제거할 경우 removeEventListener가 같은 단계에 있어야한다.