[이벤트] 3. 이벤트 흐름

3. 이벤트 흐름

이벤트 흐름과 이벤트 리스너

- 발생한 이벤트는 타겟 객체에 전달된다, 하지만 이벤트가 단번에 타겟 객체로 전달되고 사라지는 것은 아님

- 발생한 이벤트는 window 객체로부터 DOM 트리를 타고 중간 DOM 객체들을 거쳐 타겟 객체로 흘러가고,

다시 반대 방향으로 이동하여 window 객체에 도달한 후 없어진다 → 이 같은 과정을 이벤트 흐름 이라고 함

- 이벤트 흐름의 과정

  1) 캡쳐 단계 : window에서 타겟 객체까지 이벤트 객체가 전파되는 과정. 캡쳐 단계에서 실행되도록 작성된 이벤트 리스너가 있다면 흐름순으로 실행된다. 

    - 캡쳐 리스너 : 캡쳐 단계에서 실행되도록 작성된 리스너 (상 -> 하)

  2) 버블 단계 : 타겟 객체에서 거꾸로 window까지 이벤트 객체가 전파되는 과정. 버블 단계에서 실행되도록 작성된 이벤트 리스너가 있다면 순서대로 실행된다. 

    - 버블 리스너 : 버블 단계에서 실행되도록 작성된 리스너 (하 -> 상)

 

캡쳐 리스너와 버블 리스너

- 하나의 DOM 객체는 캡쳐 리스너와 버블 리스너를 모두 가질 수 있음

- 그러므로 이벤트 리스너를 등록할 때 캡쳐 리스너 인지 버블 리스너인지 분명히 지정하여야 함

- addEventListener()의 경우, 3번째 매개 변수가 true이면 캡쳐 리스너, false이면 버블 리스너로 등록

- 예를 들어, 다음 코드는 button 객체에 click 이벤트가 흘러오게 되면 캡쳐 단게에서는 capFunc() 함수를, 

버블 단계에서는 bubbleFunc() 함수를 실행하도록 등록한다

var b = document.getElementById("button");
b.addEventListener("click",capFunc,true); //캡쳐 단계에서 capFunc() 실행
b.addEventListener("click",bubbleFunc,false); // 버블 단계에서 bubbleFunc() 실행

- 그러나 addEventListener() 외 다른 방법으로 이벤트 리스너를 등록하는 경우 모두 버블 리스너로 자동 등록된다

- 이벤트 흐름을 중단시키고 싶으면, stopPropagation();