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

---

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

poiemaweb.com/js-event

---

 

1. 서론

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

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

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

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

 

 

2. 이벤트 등록

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

 

See the Pen about addEventListener by pirateTurtle (@wogha95) on CodePen.

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

( 크롬기준 : 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 (상위 요소 → 하위 요소)

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

 

See the Pen about Event Capture by pirateTurtle (@wogha95) on CodePen.

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

( 크롬기준 : F12 → Console )

 

 

 

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

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

 

See the Pen about addEventListener by pirateTurtle (@wogha95) on CodePen.

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

( 크롬기준 : F12 → Console )

 

 

 

6. Event Capture + Event Bubbling

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

 

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

 

See the Pen about Event Capture + Bubbling by pirateTurtle (@wogha95) on CodePen.

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

( 크롬기준 : F12 → Console )

 

 

 

7. event.stopPropagation()

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

event.stopPropagation();

 

 

아래 예시에서는

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

 

See the Pen about event stopPropagation by pirateTurtle (@wogha95) on CodePen.

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

( 크롬기준 : F12 → Console )

 

 

 

8. Event Delegation

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

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

 

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

 

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

 

아래 예시를 보면

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

 

See the Pen about Event Delegation by pirateTurtle (@wogha95) on CodePen.

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

( 크롬기준 : F12 → Console )

 

 

 

9. 결론

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

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

 

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

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

 

 

---