[TIL] 이벤트 버블링, 이벤트 캡쳐

javascript logo

 

◎ 면접을 진행하다 보면 이벤트 버블링과 이벤트 캡쳐의 차이에 대하 자주 물어본다.

근본적인 지식에 대한 정보는 없어서 정리를 한번 해볼까 한다.

 

1. 이벤트 버블링이란?

◎ 이벤트 버블링(Event Bubbling)은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위 요소들로 전달되어 가는 특성을 의미한다. 

이벤트 버블링 과정

여기서 상위 요소란, HTML 요소는 기본적으로 트리 구조를 갖는다. 여기서는 트리 구조상으로 한 단계 위에 있는 요소를 상위 요소라고 한다.

다음 코드를 봐보자.

 

html

이벤트 버블링

세 개의 div 태그가 있고 가장 아래에 있는 div 태그에서 이벤트가 발생했을 때 최상위 요소인 body 태그까지 이벤트가 전달되는 코드이다.

위의 코드는 세 개의 div 태그에 모두 클릭 이벤트를 등록하고 클릭했을 때 addEvent 함수를 실행시키는 코드이다.

여기서 최하위 div 태그 <div class="three-div"></div>를 클릭하면 아래와 같은 결과가 나온다.

 

console

브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킨다.

여기서 주의해야 할 점은 각 태그마다 이벤트가 등록되어 있기 때문에 상위 요소로 이벤트가 전달되는 것을 확인할 수 있다.

만약 이벤트가 특정 div 태그에만 달려 있다면 위와 같은 동작 결과는 확인할 수 없다.

 

이와 같이 하위에서 상위 요소로의 이벤트 전파 방식을 이벤트 버블링(Event Bubbling)이라고 한다.

 

2. 이벤트 캡쳐란?

◎ 이벤트 캡쳐는 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식이다.

특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 하위 요소들로 전달되어 가는 특성을 의미한다.

이벤트 캡쳐

다음 코드를 봐보자.

 

html

js

addEventListener( ) API에서 옵션 객체에 capture: true를 설정해주면 된다. 그러면 해당 이벤트를 감지하기 위해 이벤트 버블링과 반대 방향으로 탐색한다.

여기서 최하위 div 태그 <div class="three-div"></div>를 클릭하면 아래와 같은 결과가 나온다.

 

console

3. event.stopPropagation( ) 

◎ event.stopPropagation( ) API는 해당 이벤트가 전파되는 것을 막는다. 따라서 이벤트 버블링의 경우에는 클릭한 요소의 이벤트만 발생시키고 상위 요소로 이벤트를 전달하는 것을 방해합니다. 그리고 이벤트 캡쳐의 경우에는 클릭한 요소의 최상위 요소의 이벤트만 동작시키고 하위 요소들로 이벤트를 전달하지 않는다.

위의 예제의 이벤트 버블과 이벤트 캡쳐의 코드에 적용해 보자.

 

이벤트 버블링

이벤트 버블링

이벤트 캡쳐

이벤트 캡쳐

4. 느낀 점

◎ 면접을 보기 전에는 이벤트 버블링과 캡쳐에 대한 지식이 전혀 없었다.

여태까지 이벤트를 발생할 때 어떠한 원리로 발생하는지도 모르고 사용했던 것이다.

정말 근본적인 지식부터 알아야 나중에 의미 있게 사용하고 남들한테 좀 더 유용하게 설명을 해줄 수 있을 거 같다.

 

※ 참고

https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/

이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지