이벤트 버블링

이벤트 버블링이란 어떤 요소에 이벤트가 발생하면 그 요소에 해당하는 핸들러가 동작하고 가장 최상단의 조상 요소를 만날 때까지 계속 이어서 부모 요소의 핸들러가 동작하는 것을 말합니다. 이벤트가 올라가는 모습이 거품이 올라가는 것과 닮아서 버블링이라고 부릅니다.

이벤트가 발생한 가장 안쪽의 요소는 target을 통해 접근할 수 있습니다. this는 핸들러가 작동한 요소를 가리킵니다.

버블링을 막기 위해선 event.stopPropagation을 사용할 수 있습니다.

이벤트 캡처링은 이벤트가 하위 요소로 전파되는 것을 말합니다. 이벤트 리스너에 캡처 true로 설정하면, 조상 요소부터 target까지 캡처링 단계를 거칩니다.

event.target - 이벤트 발생한 가장 안 쪽의 요소

event.currentTarget(=this) - 핸들러가 실제 할당된 요소