Event(버블링)

이벤트의 단계

표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있습니다.

• 캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계
• 타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계
• 버블링 단계 : 이벤트가 상위 요소로 전파되는 단계

캡쳐링(capturing)

이벤트를 실행할 때 최상위 조상에서 타깃으로 설정된 요소까지 전파되는 동안을 캡쳐링 단계라고 합니다. 실제 코드에서 자주 쓰이진 않지만, 종종 유용한 경우가 있습니다.

 

타깃

이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.target을 사용해 접근할 수 있습니다.

 

버블링

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.
이런 흐름을 '이벤트 버블링’이라고 부릅니다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문입니다.
버블링은 거의 모든 이벤트에서 일어납니다. 버블링은 event.stopPropagation() 메서드로 멈출 수 있지만 추후에 문제가 될 상황이 생길 수 있으므로 신중하게 사용해야 됩니다.