자바스크립트에서 이벤트가 발생할 때 이벤트가 발생한 요소(target)뿐 아니라 자식에서 부모 혹은 그 반대로 부모에서 자식으로 이벤트가 전파되는 경향이 있습니다.
그림에서 부모에서 target까지 이벤트가 내려오는 현상을 캡쳐링, 반대로 target에서 부모로 다시 이벤트가 전파되는 현상을 버블링이라고 부릅니다.
이벤트의 전달 흐름
1. 상위 요소에서 이벤트가 최초로 발생한 요소(target)으로 이벤트가 내려온다. 이를 캡처링이라 부릅니다.
2. target에 이벤트가 전달 되었습니다.
3. 이 이벤트는 다시 상위로 올라오게 되고, 이 현상을 이벤트 버블링이라 부릅니다.
이벤트 캡처링
이벤트 캡처링은 기본적으로 막혀있습니다. 그래서 addEventListener를 쓸 때 capture 기능을 true로 설정해주어야 합니다.
elem.addEventListener(..., {capture: true})
// 아니면, 아래 같이 {capture: true} 대신, true를 써줘도 됩니다.
elem.addEventListener(..., true)capture 옵션은 두 가지 값을 가질 수 있습니다.
- false이면(default 값) 핸들러는 버블링 단계에서 동작합니다.
- true이면 핸들러는 캡처링 단계에서 동작합니다.
이벤트 버블링
한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.
이벤트 전파를 막는 방법은?
event.stopPropagation()로 막을 수 있습니다.
이벤트 전파를 무조건 막아야겠다!
반대의 생각이 좀 더 해답에 가깝습니다. 이벤트 버블링인 경우 ul과 li가 있는 요소가 있다고 가정을 합니다. li에 각각에 클릭이벤트가 필요한데 ul에만 이벤트를 등록하여 이벤트 전파를 활용할 수 있습니다. 이벤트 전파를 막는 케이스는 거의 없습니다.
참고
기록장입니다.