이벤트 버블링(event bubbling)은 웹 개발에서 사용되는 필수 개념 중 하나다. 이벤트가 발생했을 때, 해당 이벤트가 DOM 구조를 통해 더 상위의 화면 요소들로 전달되어가는 특성을 의미한다.
특정 요소에서 버튼 클릭과 같은 이벤트가 발생하면, 그 이벤트는 그 특정 엘리먼트에서만 트리거되는게 아니라 이벤트가 발생한 요소의 부모 요소들과 document의 루트까지 트리거된다.
이벤트 버블링에 대한 이해는 효과적이면서 유지하기 쉬운 프론트엔드 앱을 개발하는데 필수적이다. 특히나 유저 인터페이스가 복잡하고 인터렉션 가능한 요소가 많은 프로젝트일 수록 그 효과가 더 커지기 때문에 미리미리 공부해두면 좋다.
이벤트 전파(Propagation)의 3단계
이벤트 전파는 이벤트 객체가 전파되는 방향에 따라 3단계로 구분할 수 있는데, 이벤트 버블링은 이벤트 전파의 3단계 중 세번째에 해당된다.
- Capturing phase
- 이벤트가 상위 요소에서 하위 요소 방향으로 전파
- 이벤트는 캡처링 단계를 지나게 된다. 다큐먼트의 루트에서 시작해서 DOM 구조를 아래로, 타겟 요소가 있는 곳까지 가는 것이다.
- 그러나, 대다수의 프론트엔드 개발자는 주로 버블링 단계와 관련해 개발 작업을 하며, 해당 이벤트를 컵체링 페이스에서 이벤트를 캡처하지 않는 이벤트 리스너를 사용하기 때문에 이 단계보다는 버블링 단계에 좀 더 집중하면 된다.
- Target phase
- 이벤트가 이벤트 타깃에 도달
- Bubbling phase
- 이벤트가 하위 요소에서 상위 요소 방향으로 전파
- 타겟 요소에 도달한 뒤엔, 이벤트는 DOM을 따라 올라가게 된다. 그러면서 같은 이벤트를 부모 요소들에서 트리거하는데, 이는 다큐먼트의 루트 (window 객체)에 도달될 때까지 진행된다.
아래와 같은 HTML 구조가 있다고 생각해보자:
<div id="outer">
<div id="inner">
<button id="button">Click Me</button>
</div>
</div>
유저가 버튼 요소를 클릭해서 이벤트가 발생했다면, 이제 이 이벤트는 아래와 같은 버블링 단계를 지나게 된다:
- 버튼: 여기서 이벤트 발생 (클릭클릭)
- inner: 이벤트가 Inner에 도달
- outer: 이벤트가 outer에 도달
- document (<html>): 이벤트가 document에 도달
- window: 이벤트가 window에 도달
프론트엔드 개발에 있어서 이와같은 버블링 행위가 중요한 이유는 아래와 같다.
이벤트 위임(delegation)
이벤트 버블링은 “이벤트 위임 (event delegation)”이라고 부르는 기술을 사용할 수 있게 해준다. 이벤트 위임이란 이벤트 리스너를 몸든 개별 요소에 붙이는 대신에, 이벤트 리스너를 붙이고 싶은 여러 요소들의 공통된 조상 요소에 붙여서 단순화시키는 작업을 뜻한다. 이벤트 위임 기술을 적용하면 사용되는 이벤트 리스너의 수를 감소시킬 수 있고, 이는 곧 웹사이트의 성능이 개선된다는 것을 뜻한다. 이는 특히 다이나믹하면서 많은 요소들이 있는 프로젝트에서 더 그 빛을 발휘하게 된다.
이벤트 핸들링 순서
여러 이벤트 핸들러들이 이벤트 버블링에 관여된 여러 요소들에 붙어있다면, 버블링 단계에서 어떤 이벤트 핸들러가 실행되는 순서가 어떻게 되는지 알 필요가 있다. 이걸 알아야 의도하지 않은 사이드 이펙트나 이벤트 핸들러간 발생할 수 있는 버그를 예방할 수 있기 때문이다.
전파(propagation) 중지
간혹, 이벤트가 부모 요소로 전달되는 걸 방지하고 싶을 때가 있다. 그럴 경우엔, 이벤트 대상에 stopPropagation() 메소드를 사용하면 된다.
'Learn to Code' 카테고리의 다른 글
| TCP와 UDP (0) | 2023.08.15 |
|---|---|
| 클라이언트 사이드 렌더링 vs. 서버 사이드 렌더링 (CSR vs. SSR) (0) | 2023.08.03 |
| 레이지로딩(lazy loading)이란? (0) | 2023.07.27 |
| [JS] 이벤트룹 (Event loop), 힙(Heap), 콜 스텍(Call stack) (2) | 2021.11.18 |
| HTTP/1.1 vs. HTTP/2 (1) | 2021.10.24 |
댓글