캡처링과 버블링을 간단히 정의하면 다음과 같다.
- 캡처링 - window 로부터 이벤트가 발생한 요소까지 이벤트를 전파한다.
- 버블링 - 이벤트가 발생한 요소부터 window 까지 이벤트를 전파한다.
버블링
버블링과 캡처링
ko.javascript.info
버블링(bubbling)의 원리는 간단합니다.
한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.
3개의 요소가 FORM > DIV > P 형태로 중첩된 구조를 살펴봅시다. 요소 각각에 핸들러가 할당되어 있습니다.
사례)
테이블의 경우에 테이블 전체(event.currentTarget)에 이벤트를 걸고 내부의 td(evnet.target)를 클릭해도 이벤트가 동작하게 할 수 있다.
버블링 중단하기
이벤트 버블링은 타깃 이벤트에서 시작해서 <html> 요소를 거쳐 document 객체를 만날 때까지 각 노드에서 모두 발생합니다. 몇몇 이벤트는 window 객체까지 거슬러 올라가기도 합니다. 이 때도 모든 핸들러가 호출됩니다.
그런데 핸들러에게 이벤트를 완전히 처리하고 난 후 버블링을 중단하도록 명령할 수도 있습니다.
이벤트 객체의 메서드인 event.stopPropagation()를 사용하면 됩니다.
아래 예시에서 <button>을 클릭해도 body.onclick은 동작하지 않습니다.
둘의 차이점은 단순히 방향이다.
하위 => 상위, 상위 => 하위 개념으로 보면 된다.
위의 예제의 경우는 버블링이라고 볼 수 있다.
WC3 에서 명시한 스펙의 그림을 보면 쉽게 이해할 수 있다.
제어방법
캡처링
addEventListener 메소드 세번째 인자 useCapture값을 설정
버블링
단순히 e.stopPropagation() 메소드를 사용하면 된다.
뭐가 좋은가?
프로그램이 종료될때 removeEventListner 확실히 제거 에러방지
'programming > Javascript' 카테고리의 다른 글
| 자바스크립트 프로토타입 (0) | 2022.03.11 |
|---|---|
| 자바스크립트의 형 변환(+ null & undefined 차이) (0) | 2022.03.11 |
| [Javascript] 실행 컨텍스트 (0) | 2022.03.06 |
| [Javascript] 스코프(Scope), 스코프체인, 렉시컬스코프 (0) | 2022.03.06 |
| [Javascript] 함수선언문 & 함수표현식 & 화살표함수()=>{} 비교(호이스팅, this 관점에서) (0) | 2022.03.06 |
