이벤트 전파

본 글을 자바스크립트의 이벤트 전파에 대해 다룬 내용입니다.

 

목차
1. 이벤트 전파(Event Propagation)란?
2. 이벤트 전파의 종류 (버블링, 캡처링)

 

프론트엔드 개발자가 이벤트 전파에 대해 이해하면 사용자와의 상호작용을 관리하고, 효율적으로 이벤트를 처리할 수 있다.

 

1.  이벤트 전파(Event Propagation)란?

이벤트 전파에 대해 간단하게 정리하면 아래와 같다. 

 

HTML 문서 내에서 이벤트가 발생하면, 해당 이벤트가 어떻게 처리되는지를 설명하는 개념

 

 

위에 내용만 읽어봤을 때는 무슨 말인지 이해 못할 수도 있다.

아래 과정을 통해 이벤트 전파가 어떻게 일어나는지 알아보자!

 

이벤트 처리 과정

1. 사용자의 상호작용(예: 클릭, 마우스 오버 등)으로 인해 이벤트 발생 → 이벤트 타깃(Event Target)
2. 이벤트가 발생한 요소에서 시작하여 DOM 트리를 따라 상위 요소로 전파 → 이벤트 전파 (Event Propagation)
   • 이 때, 버블링 또는 캡처링 단계를 거쳐서 전파된다.

 

즉, 사용자의 상호작용에 의해 발생된 이벤트 객체는 벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM트리를 통해 전파 된다.

 

위의 개념의 이벤트를 관리하고 처리하는 데 중요한 개념이기 때문에 반드시 기억해야 한다.

 

2. 이벤트 전파의 종류

이제 이벤트 처리에 대한 개념이 이해되었다면 이벤트 전파의 종류에 대해 알아보자.

 

위에서 봐서 알겠지만 버블링, 캡처링이란 2가지 단계가 있다.

 

먼저 두 가지의 차이점을 표로 간단하게 정리해봤다.

	버블링	캡처링
전파 방향	이벤트 발생 요소 → 최상위(부모)	최상위(부모) → 이벤트 발생 요소
이벤트 핸들러 실행 유무	O	X

 

버블링(Bubbling)

• 이벤트가 발생한 요소에서 시작하여 최상위 요소로 전파되는 현상
• 이벤트 핸들러(이벤트 리스너)가 실행되어 이벤트를 처리할 수 있음

 

캡처링(Capturing)

• 최상위 요소에서 시작하여 이벤트가 발생한 요소로 전파되는 현상
• 이때 이벤트 핸들러가 실행되지 않음

 

마무리

이번에는 자바스크립트에서 이벤트를 전파하는 방법에 대해 알아봤습니다.

 

이벤트 전파 개념은 중요한 개념이기 때문에 한번 더 개념을 정리한다는 생각으로 해봤습니다! :)

 

이 내용을 공부하면서 이벤트 관련 함수들도 공부하면 좋을 거 같다는 생각이 들어 조만간 포스팅하도록 하겠습니다!