TIL 55. 2024-03-20

버블링(bubbling)

:한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.

요약: 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파

캡처링(capturing)

: 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달

1. event.target

부모 요소의 핸들러는 이벤트가 정확히 어디서 발생했는지 등에 대한 자세한 정보를 얻을 수 있습니다.
이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.target을 사용해 접근할 수 있습니다.

2. event.target과 this(=event.currentTarget)는 다음과 같은 차이점이 있습니다.

event.target은 실제 이벤트가 시작된 ‘타깃’ 요소입니다. 버블링이 진행되어도 변하지 않습니다.
this는 ‘현재’ 요소로, 현재 실행 중인 핸들러가 할당된 요소를 참조합니다.

form.onclick 핸들러 내의 this와 event.target은 다음과 같습니다.
this(event.currentTarget) – form 요소를 가리킵니다.
event.target – 폼 안쪽에 실제 클릭한 요소를 가리킵니다.

버블링 및 캡처링 중단하기

event.stopImmediatePropagation()
한 요소의 특정 이벤트를 처리하는 핸들러가 여러개인 상황에서, 핸들러 중 하나가 버블링을 멈추더라도 나머지 핸들러는 여전히 동작합니다.

event.stopPropagation()은 위쪽으로 일어나는 버블링은 막아주지만, 다른 핸들러들이 동작하는 건 막지 못합니다.

버블링을 멈추고, 요소에 할당된 다른 핸들러의 동작도 막으려면 event.stopImmediatePropagation()을 사용해야 합니다. 이 메서드를 사용하면 요소에 할당된 특정 이벤트를 처리하는 핸들러 모두가 동작하지 않습니다.

버블링을 꼭 멈춰야 하는 명백한 상황이 아니라면 아키텍처를 잘 고려해 버블링을 막아야한다.

👇👇👇
참고 사이트1
참고 사이트2