1. 버블링
<div onclick="alert('div에 할당한 핸들러!')">
<em><code>EM</code>을 클릭했는데도 <code>DIV</code>에 할당한 핸들러가 동작합니다.</em>
</div>: 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 부모 요소의 핸들러가 동작하는 현상(가장 최상단의 조상 요소를 만날 때까지 반복)
- 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품과 닮아 '이벤트 버블링'이라고 부름
- 거의 모든 이벤트에 적용(
focus같이 몇몇 이벤트 제외)
1-1. event.target
event.target: 실제 이벤트가 시작된 타깃 요소, 버블링이 진행되어도 변하지 않음this(=event.currentTarget): 현재 실행 중인 핸들러가 할당된 요소 참조
1-2. 버블링 중단하기
- 이벤트 버블링은 타깃 이벤트에서 시작해
<html>요소를 거쳐document객체를 만날 때까지 각 노드에서 모두 발생(몇몇 이벤트는window객체까지 거슬러 올라가기도 함) event.stopPropagation(): 이벤트를 완전히 처리하고 난 후 버블링을 중단하도록 명령event.stopImmediatePropagation(): 버블링을 멈추고 + 요소에 할당된 다른 핸들러의 동작도 막음 -> 요소에 할당된 특정 이벤트를 처리하는 핸들러가 모두 동작하지 않도록
💥 아키텍처를 잘 고려해, 꼭 필요한 경우에만 버블링을 막자!
2. 캡처링
- 실제 코드에서 자주 쓰이지는 않지만, 종종 유용한 경우가 있음
- 표준 DOM 이벤트에서 정의한 이벤트 흐름
- 1) 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계
- 2) 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 단계
- 3) 버블링 단계: 이벤트가 상위 요소로 전파되는 단계
- 캡처링 단계에서 이벤트를 잡아내려면
elem.addEventListener(..., {capture: true})사용
->capture값이false(default)이면 핸들러가 버블링 단계에서 동작,true이면 캡처링 단계에서 동작
2년차 프론트엔드 개발자의 소소한 기록을 담습니다 :-)