티스토리 뷰

우아한테크코스

이벤트 버블링과 캡처링 그리고 이벤트 위임

개발여행가 2023. 3. 14. 01:23

버블링이란?

이벤트가 제일 깊은 곳에 있는 요소부터 시작해, 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품과 닮았다고 붙여진 이름이다.

한 요소에 이벤트가 발생하면, 해당 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복된다. 즉 각각의 요소에 할당된 모든 핸들러들이 동작한다.

아래 코드는 FORM > DIV > P 형태로 중첩된 구조다.
각각의 요소에 핸들러가 할당되어 있다.

<form onclick="alert('form')">
    FORM
  <div onclick="alert('div')">
    DIV
    <p onclick="alert('p')">
            P
        </p>
  </div>
</form>

아래는 위의 코드에서 동작 과정이다.

<p> 클릭 → <p> onclick 동작 → <div> onclick 동작 → <form> onclick 동작 → document 객체 만나고 종료(몇몇 이벤트는 window 객체를 만나기도 함)

event.target

부모 요소의 핸들러는 이벤트가 정확히 어디서 발생했는지 등에 대한 자세한 정보를 얻을 수 있다.

****이벤트가 발생한 가장 안쪽의 요소는 target 요소라고 불리고, event.target 을 사용해 접근 가능하다.**

event.target 과 this(=event.currentTarget) 는 다르다.

  • event.target - 실제 이벤트가 시작된 타깃 요소다. 버블링이 진행되어도 변하지 않는다.
    • 위의 예시를 참조하자면, event.target 은 <p> 로 document 를 만날 때까지도 변하지 않는다.
  • this - ‘현재’ 요소로 현재 실행 중인 핸들러가 할당된 요소를 참조한다.
    • 위의 예시를 참조하자면, this 는 <p> → <div> → <form> 으로 변하게 된다.

캡처링이란?

캡처링은 이벤트가 부모 → 자식 요소로 전파되는 흐름이다.

<form>
    FORM
  <div>
    DIV
    <p>
            P
        </p>
  </div>
</form>

<script>
  for(let elem of document.querySelectorAll('*')) {
    elem.addEventListener("click", e => alert(`캡쳐링: ${elem.tagName}`), true);
    elem.addEventListener("click", e => alert(`버블링: ${elem.tagName}`));
  }
</script>

위 코드에서 <p> 를 클릭하면 이벤트가 최상위 조상부터 전파된다.

전파 순서는 다음과 같다.

(캡처링 단계) <html> → <body> → <form> → <div> → <p> → (버블링 단계) <p> → <div> → <form> → <body> → <html>

이벤트 위임이란?

캡처링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임을 구현할 수 있다.

이벤트 위임은 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용된다. 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다.

예를 들어, 999개의 <td> 에 이벤트를 걸어야 한다면 하나 하나 이벤트를 걸기 보단, 상위 태그인 <table> 에 이벤트를 걸어 해결할 수 있다.

  1. 컨테이너에 하나의 핸들러를 할당한다.
  2. 핸들러의 event.target 을 사용해 이벤트가 발생한 요소가 어딘지 알아낸다.
  3. 원하는 요소에서 이벤트가 발생했다고 확인되면 이벤트를 핸들링한다.
저작자표시

'우아한테크코스' 카테고리의 다른 글

렌더링 방식 분석과 우리 프로젝트에 도입해보기  (1) 2023.10.16
동글 서비스 소개  (0) 2023.10.07
자바스크립트의 비동기  (0) 2023.03.27
webpack과 tree shaking (named export VS default export)  (0) 2023.02.27
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/03   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
글 보관함