이벤트 캡처링, 버블링

이벤트의 흐름

HTML 문서의 각 엘리먼트들은 태그 안에 태그가 위치하는 식으로 계층적으로 이루어짐을 볼 수 있다. 이러한 계층적 구조 특징 때문에 만일 HTML 요소에 이벤트가 발생할 경우 연쇄적 이벤트 흐름이 일어나게 된다. 이러한 현상을 이벤트 전파라 부르며, 전파 방향에 따라 버블링과 캡처링으로 구분한다.

이벤트 캡처링

자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달한다.
캡처링 단계에서 무언가를 처리하는 일은 흔하지 않다.

이벤트 버블링

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

이벤트 전파 방지

• event.stopPropagation() : 이벤트 전파 중지, 더이상 버블링이 발생하지 않음.
• event.stopImmediatePropagation() : 이벤트 전파 중지 + 형제 이벤트 실행 중지, 더이상 버블링이 발생하지 않으면서 함께 등록된 이벤트리스너도 방지함.

→ 이벤트 전파를 중지할 경우 생각지 못한 문제가 발생할 수 있기 때문에 가능하면 사용하지 않는게 좋다.
만약 이벤트 버블링을 막아야 할 경우, 부모에서 이벤트 target과 현재 이벤트 target의 동일 여부를 판단해서 버블링을 막는 방법도 있다.

if (event.target !== event.currentTarget) {
	return
}