버블링과 캡처링

버블링과 캡처링

2025. 9. 23. 19:03ㆍFront-end/JavaScript

이건 머메이드 다랑어인데, 얘한테서 나오는 200g의 특수 부위가 '버블리 뱃살'이다.

포획한 후 일주일 뒤에 맛이 정점에 달하지만 동시에 일주일이 지나면 버블이 되어 사라진다. (그래서 머메이드 다랑어인가..)

국제 법안을 통과 시키기 위해 다랑어 뱃살 좋아하는 대통령에게 내놓을 요리 재료로 사용된다.

그냥 버블링을 보니까 생각났다. 정말 맛있게 생겼다. 토리코 18화쯤에 나온다.

1. 버블링

한 요소에 이벤트가 발생하면,

1. 이 요소에 할당된 핸들러가 동작하고,

2. 이어서 부모 요소의 핸들러가 동작한다.

가장 최상단의 조상 요소를 만날 때까지 이 과정을 반복하며, 요소 각각에 할당된 핸들러가 동작한다.

이렇게 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 핸들러가 동작하는 흐름을

이벤트 버블링이라고 부른다.

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

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

위 예시는 form - div - p 로 중첩된 구조를 가지고 있으며, 각 요소에 onclick으로 핸들러가 할당되어 있다.

이 코드를 실행하면 클릭한 요소부터 상위 요소로 순서대로 이벤트 핸들러가 실행된다.

1. event.target

event.target은 실제 이벤트가 시작된 타겟 요소이다.

// script.js
form.onclick = function(event) {
  setTimeout(() => {
    alert(`target: ${event.target.tagName}, this: ${this.tagName}`);
  }, 0);
};

//index.html
<!DOCTYPE HTML>
<html>
  <head>..</head>
  <body>
    <form id="form">FORM
      <div>DIV
        <p>P</p>
      </div>
    </form>
    <script src="script.js"></script>
  </body>
</html>

여기에 CSS까지 작성해서 form, div, p 영역을 나누고 각 영역을 클릭하면

P 클릭 : target: P, this: FORM
DIV 클릭 : target: DIV, this: FORM
FORM 클릭 : target: FORM, this: FORM

이런 결과를 얻을 수 있다.

2. 버블링 중단하기

버블링은 꼭 멈춰야 하는 상황이 아니면 중단하지 않는 것이 좋다. 막아야 하는 경우도 거의 없다.

하지만 이벤트 객체의 메서드 event.stopPropagation()을 사용해서 버블링을 중단할 수 있다.

해당 메서드를 사용하면 핸들러는 이벤트 처리 후, 버블링을 중단한다.

<body onclick="alert(`버블링 못옴`)">  // alert가 뜨지 않는다
  <button onclick="event.stopPropagation()">클릭</button>
</body>

2. 캡처링

캡처링은 실제 코드에서 자주 쓰이지는 않으나, 종종 유용한 경우가 있다.

캡처링은 이벤트가 하위 요소로 전파되는 흐름이다.

표준 DOM 이벤트에서 정의한 이벤트 흐름은 3가지 단계가 있다.

1. 캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계

2. 타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계

3. 버블링 단계 : 이벤트가 상위 요소로 전파되는 단계

<!DOCTYPE HTML>
<html>
  <head> .. </head>
  <body>
    <div>
      <table>
        <tbody>
          <tr>
            <td>..</td>
            <td>..</td>

      ....

이렇게 코드가 작성되어 있을 때 <td>를 클릭하여 이벤트를 발생시키면 동작의 흐름은 아래와 같다.

1. 최상위 조상에서 아래로 이벤트 전파 (캡처링) : window - document - html - body - table ...

2. 이벤트가 타깃 요소에 도착하여 실행됨 (타깃)

3. 다시 위로 전파됨 (버블링)

캡처링 단계에서 이벤트를 잡아내기 위해서는

addEventListener의 capture 옵션을 true로 설정하면 된다.

elem.addEventListener(..., {capture: true});
// or
elem.addEventListener(..., true);

참고

'Front-end > JavaScript' 카테고리의 다른 글

[WIP]브라우저 기본 동작 (0)	2025.09.23
[WIP]이벤트 위임 : 캡처링과 버블링 활용하기 (1)	2025.09.23
브라우저 이벤트 (0)	2025.09.23
브라우저 창 사이즈와 스크롤 정보 얻기 (1)	2025.09.22
메서드로 DOM 조작해서 문서 수정하기 (0)	2025.09.22

🥔 감자의 오묘한 개발 🥔

🥔 감자의 오묘한 개발 🥔

태그

최근글

댓글

공지사항

아카이브

목차

1. 버블링

1. event.target

2. 버블링 중단하기

2. 캡처링

'Front-end > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바