이벤트 전파

(2019-09-21)

캡처링 단계, 버블링 단계, 캡처링/버블링, 이벤트 위임


1. [자바스크립트]  이벤트의 전파 방향/단계

  ㅇ 캡처링 단계 (capturing)
     - Window 객체부터 좀더 구체적인 요소 타깃을 찾아가며 하향 전파되는 단계
     - 이러한 이벤트 하향 전파에 반응하도록 등록된 이벤트 처리기가 실행됨

  ㅇ 타깃 단계 (target)
     - 이벤트가 타깃 요소에 최종 전파되는 단계
     - 이때 요소에 등록된 이벤트 처리기가 실행됨

  ㅇ 버블링 단계 (bubbling)
     - 맨 아래 요소 타깃에서 발생한 이벤트가 점차 상향 Window 객체까지 전파되는 단계
     - 이러한 이벤트 상향 전파에 반응하도록 등록된 이벤트 처리기가 실행됨

  ※ 실행 구분
     - 이벤트 핸들러 : 타깃 단계, 버블링 단계 모두에서 실행됨
        . 例) onload, onclick 등
     - 이벤트 리스너 : `캡처링,타깃 단계(true)` 또는 `타깃,버블링 단계(false)`를
                       선택적으로 실행 가능
        . 例) addEventListener(type,callback,true/false)


2. [자바스크립트]  이벤트의 위임 (delegation)

  ㅇ 하위 요소들 각각에 이벤트를 붙이지 않고,
     - 상위 요소 하나 만으로 하위 요소의 이벤트들을 제어하는 방식

  ※ 통상, 위의 버블링 단계를 응용하여 구현 함



Copyrightⓒ written by 차재복 (Cha Jae Bok)
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"