[Javascript] Event Bubbling, Capture, 위임 이란?

---

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

poiemaweb.com/js-event

---

 

1. 서론

사용자가 브라우저와 상호작용한다.

클릭, 드래그, 키보드 입력, ..

이 모든 동작은 Event를 통해 이루어진다.

그리고 브라우저는 사용자의 Event를 감지하여 해당 동작을 처리한다.

 

 

2. 이벤트 등록

먼저 사용자와 상호작용하는 동작(함수)를 만들어 Event와 연결하기 위해서는 addEventListener로 이벤트 등록을 해야한다.

 

( 개발자도구로 확인해보세요! )

( 크롬기준 : F12 → Console )

 

 

3. 이벤트 흐름

• 브라우저가 HTML을 읽어 DOM tree를 만들때 계층적 구조로 만든다.
• 이렇게 만들어진 DOM tree의 HTML 요소에 Event가 발생하면 계층 순서에 맞게 이벤트가 연쇄적으로 발생한다.

따라서 아래 그림을 보면 쉽게 이해할 수 있다.

 

1. <td> 요소에 이벤트가 발생하면
2. <td> 요소의 최상위 요소부터 이벤트가 발생한 <td>요소까지 Event Capture가 일어난다.
3. 해당 <td>까지 내려왔으면
4. 이벤트가 발생한 <td>요소부터 최상위 요소로 Event Bubbling이 일어난다.

 

• 1~4까지의 동작이 어떠한 요소의 Event가 발생할 때마다 동작한다.
• 또한 각 요소의 Event Capture, Event Bubbling으로 등록한 함수가 실행된다.

 

event flow / 클릭하면 원본 페이지로 이동

 

 

4. Event Capture (상위 요소 → 하위 요소)

• 이벤트 캡쳐는 최상위 요소부터 시작하여 이벤트가 발생한 요소로 전달되는 것이다.

 

( 개발자도구로 확인해보세요! )

( 크롬기준 : F12 → Console )

 

 

 

5. Event Bubbling (하위 요소 → 상위 요소)

• 이벤트 버블링은 이벤트가 발생한 요소부터 시작하여 최상위 요소로 전달되는 것이다.

 

( 개발자도구로 확인해보세요! )

( 크롬기준 : F12 → Console )

 

 

 

6. Event Capture + Event Bubbling

• 이벤트 캡쳐와 이벤트 버블링을 혼합하여 사용해보면 어떻게 동작하는 지 더 잘 이해된다.

 

1. 아래 예시에서 four를 클릭하면
2. 최상위 요소에서 특정 이벤트 요소까지 내려오면서 이벤트 캡쳐로 추가된 함수를 실행한다.
3. 다시 특정 이벤트 요소에서 최상위 요소로 올라가면서 이벤트 버블링으로 추가된 함수를 실행한다.

 

( 개발자도구로 확인해보세요! )

( 크롬기준 : F12 → Console )

 

 

 

7. event.stopPropagation()

• 매 요소마다 이벤트 전달이 불필요하거나 원하는 대로 작동하지 않는 경우, 전달을 그만두게 할 수 있다.
• 이벤트 캡쳐, 버블링에 연결된 함수에 아래 코드를 추가하면 해당 이벤트까지 동작하고 전달을 멈춘다.

event.stopPropagation();

 

 

아래 예시에서는

• 소문자로 만들어진 요소의 이벤트 전달은 two의 Event Capture에서 멈추게 만들었고
• 대문자로 만들어진 요소의 이벤트 전달은 TWO의 Event Bubbling에서 멈추게 만들었다.

 

( 개발자도구로 확인해보세요! )

( 크롬기준 : F12 → Console )

 

 

 

8. Event Delegation

이벤트 위임은 캡틴판교님이 한문장으로 잘 정리해주셨다.

하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식

 

• 쉽게 떠올릴 수 있는 예시로는 ul 요소와 li 요소 사이의 이벤트를 어떻게 처리할 지 생각하는 것이다.
• 하나씩 addEventListener로 처리하는 건 매우 비효율적이고
• javascript에서 li요소를 생성해 ul 요소에 추가한다면 addEventListener가 없으므로 원하는 대로 작동하지 않을 것이다.

 

• 이러한 문제점을 해결하기 위해 앞서 배운 이벤트 캡쳐와 이벤트 버블링을 이용하여 해결할 수 있다.

 

아래 예시를 보면

• 각 li 요소에 이벤트를 연결하는 것이 아니라
• 상위 요소인 ul 요소에 이벤트를 연결해두면
• 사용자가 li 요소를 클릭한 경우 이벤트 버블링을 통해
• ul 요소의 이벤트로 연결된 함수를 수행하게 된다.
• 따라서 li 요소를 클릭해도 콘솔에 one, two, three가 아니라 ul이라고 나오는 것이다.

 

( 개발자도구로 확인해보세요! )

( 크롬기준 : F12 → Console )

 

 

 

9. 결론

이벤트가 어떠한 흐름으로 동작하는 지 알게되면

여러 이벤트를 연결하여 복잡해진 구조에서 왜 실행되는 지 이해할 수 없던 동작을 쉽게 제어할 수 있다고 생각된다.

 

이러한 문제해결로 개발자가 좀 더 원하는 대로 동작을 수행할 수 있게 된다고 생각되고,

결과적으로 사용자 경험도 함께 좋아질 거라 생각된다.

 

 

---