이벤트 전파

(2019-09-21)

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


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

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

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

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

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


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

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

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

JS 이벤트
   1. JS 이벤트   2. JS 이벤트 종류   3. JS 이벤트 객체   4. JS 이벤트 처리기   5. JS 이벤트 전파   6. 커스템 이벤트  


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