JS 이벤트 전파
이벤트 전파
DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 이를 이벤트 전파(event propagation)라고 한다.
이벤트가 발생해 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃(event target)을 중심으로 DOM 트리를 통해 전파된다. 이벤트 전파는 이벤트 객체가 전파되는 방향에 따라 다음과 같이 3단계로 구분할 수 있다.
- 캡처링 단계(capturing phase) : 이벤트가 상위 요소에서 하위 요소 방향으로 전파
- 타킷 단계(target phase) : 이벤트가 이벤트 타깃에 도달
- 버블링 단계(bubbling phase) : 이벤트가 하위 요소에서 상위 요소 방향으로 전파
사용법
이벤트 핸들러 어트리뷰트/프로퍼티 방식으로 등록한 이벤트 핸들러는 타깃 단계와 버블링 단계의 이벤트만 캐치할 수 있지만 addEventListener 메서드 방식으로 등록한 이벤트 핸들러는 캡처링 단계의 이벤트도 선별적으로 캐치할 수 있다.
addEventListener(type, listener, useCapture)
useCapture
- true : capturing
- false : bubbling(기본값)
3번째 인수로 true를 전달하면 캡처링 단게의 이벤트를 사용할 수 있다.
이벤트 전파 방지
이벤트 객체의 stopPropagation 메서드는 이벤트 전파를 중지시킨다.
event.stopPropagation()
이 메서드는 하위 DOM 요소의 이벤트를 개별적으로 처리하기 위해 이벤트의 전파를 중지시킨다. 예를 들어 이벤트 위임으로 클릭된 하위 버튼 요소의 color을 전부 변경하는 코드를 작성할 때 특정 버튼은 바뀌지 않았으면 한다면 이 메서드를 사용해서 상위 요소에서 이벤트를 캐치할 수 없도록 한다.
출처 :
댓글남기기