질문4 이벤트 버블링(Event Bubbling)과 캡처링(Capturing)를 설명하세요

질문의도: DOM 이벤트 처리 과정과 이벤트 전파 방식에 대한 지식을 확인합니다.

 

면접 답변

"DOM에서 이벤트 버블링은 이벤트가 발생한 요소부터 상위 요소로 전파되는 과정이고, 캡처링은 최상단부터 이벤트 대상까지 이벤트가 내려가는 과정입니다.

이 두 방식을 활용함으로써, 우리는 이벤트를 효율적으로 관리할 수 있습니다.

예를 들어, 여러 버튼의 클릭을 한 곳에서 처리할 수 있고(버블링), 불필요한 이벤트 전파를 막을 수도 있습니다(캡처링)."

---

 

아래 내용 요약 정리

"이벤트 버블링과 캡처링은 DOM 이벤트의 전파 방식을 설명하는 개념입니다.

 

캡처링은 이벤트가 문서의 최상단에서부터 이벤트 대상까지 전달되는 과정이며, 버블링은 이벤트가 발생한 요소에서 시작하여 상위 요소로 전파되는 과정입니다.

 

이 두 메커니즘을 이해함으로써, 우리는 이벤트를 보다 효율적으로 관리하고, 특정 요소에서 이벤트를 처리한 후 필요에 따라 그 이벤트를 상위 또는 하위 요소로 전달할 수 있습니다.

 

예를 들어, 단일 핸들러를 사용하여 여러 버튼의 클릭 이벤트를 처리하거나(버블링 이용), 특정 이벤트가 문서의 다른 부분으로 전파되는 것을 방지(캡처링 이용)할 수 있습니다."

 

---

이벤트 캡처링 (Capturing)

• 이벤트 캡처링은 이벤트가 최상위 노드에서 시작하여, 이벤트가 발생한 노드까지 문서 트리를 거슬러 내려오는 과정입니다. 즉, 문서의 루트에서부터 대상 요소로 이벤트가 전달되는 방식입니다.
• 이 과정은 이벤트를 가장 외곽에서부터 내부로 전달하여, 특정 이벤트가 대상 요소에 도달하기 전에 사전에 감지하거나 작업을 수행할 수 있도록 합니다.
• 이벤트 캡처링 단계에서는, 주로 이벤트의 전파를 중지하거나, 이벤트가 특정 요소에 도달하기 전에 필요한 작업을 수행하는 데 사용됩니다.

이벤트 버블링 (Bubbling)

• 이벤트 버블링은 이벤트가 발생한 요소에서 시작하여, DOM 트리를 따라 상위 요소로 전파되는 과정입니다. 이는 이벤트가 실제 이벤트 대상에서 부모 노드로, 그리고 그 상위 노드로 순차적으로 전달되는 방식입니다.
• 이벤트 버블링의 주된 목적은 하위 요소에서 이벤트를 처리한 후, 그 이벤트가 상위 요소들에게도 전파되어 추가적인 핸들링이 가능하도록 하는 것입니다.
• 예를 들어, 리스트 항목(<li>)을 클릭했을 때, 그 클릭 이벤트는 해당 <li> 요소 뿐만 아니라, 그것을 포함하는 <ul> 요소에도 전파됩니다. 이를 통해 개발자는 개별 항목 뿐만 아니라 리스트 전체에 대한 이벤트 핸들러를 등록할 수 있습니다.

---

이벤트 처리 과정

예시: 클릭 이벤트

웹 페이지에 다음과 같은 HTML 구조가 있다고 가정해보겠습니다.

  <div id="parent">

    <button id="child">Click Me!</button>

</div>

---

여기서 버튼(id="child")을 클릭하는 경우의 이벤트 전파 과정은 다음과 같습니다.

1. 캡처링 단계: 이벤트는 document 객체에서 시작하여 DOM 트리를 따라 div#parent를 거쳐 button#child까지 내려갑니다. 이 경로에 있는 각 요소에서 캡처링 단계에 해당하는 이벤트 리스너가 실행됩니다(만약 있다면).
2. 대상 단계: 이벤트가 button#child에 도달하면, 이 요소에 등록된 이벤트 핸들러(들)가 실행됩니다. 이 단계에서는 button#child를 대상으로 하는 이벤트 리스너가 작동합니다.
3. 버블링 단계: 이벤트는 다시 button#child에서부터 시작하여, div#parent를 거쳐 document 객체까지 올라갑니다. 이 경로에 있는 각 요소에서 버블링 단계에 해당하는 이벤트 리스너가 실행됩니다(만약 있다면).

이 과정을 통해, 개발자는 특정 이벤트에 대해 여러 수준에서 다양한 반응을 설정할 수 있으며, 이벤트의 전파를 효과적으로 제어할 수 있습니다.

 

---

 

1. 캡처링 단계: 이벤트는 문서의 최상위에서 시작하여, 이벤트가 발생한 요소까지 내려갑니다.
2. 대상 단계: 이벤트가 실제로 발생한 요소에서 이벤트 핸들러가 실행됩니다.
3. 버블링 단계: 이벤트가 발생한 요소에서 시작하여, DOM 트리를 따라 상위 요소로 전달됩니다.

1. 캡처링 단계

• 목적: 이벤트가 최상위 요소(예: document 객체)에서 시작하여, 실제 이벤트가 발생한 요소까지 내려가는 과정입니다. 이 단계는 이벤트가 아직 실제 대상에 도달하지 않았을 때, 상위 요소에서 미리 이벤트를 처리할 수 있는 기회를 제공합니다. (처리 기회를 제공하는 예시는 맨아래에 있음)
• 동작: 웹 페이지가 로드될 때, 이벤트 리스너들은 DOM 트리의 각 노드에 연결됩니다. 캡처링 단계에서는, 이벤트는 DOM 트리의 최상위에서 시작하여 하위로 이동하면서 각 요소에 등록된 캡처링 이벤트 핸들러를 찾습니다. 만약 핸들러가 있다면, 그 핸들러는 이벤트가 실제 대상에 도달하기 전에 실행됩니다.

2. 대상 단계

• 목적: 이벤트가 실제로 발생한 요소에서 처리됩니다. 이 단계는 이벤트가 정확히 발생한 위치에서 이벤트 리스너들이 실행되는 시점입니다.
• 동작: 캡처링 단계를 거쳐 이벤트가 실제 발생한 요소에 도달하면, 해당 요소에 등록된 이벤트 핸들러들이 실행됩니다. 이 단계는 이벤트의 정확한 발생 위치에서만 실행되므로, 이벤트 리스너는 정확히 그 요소를 대상으로만 작동합니다.

3. 버블링 단계

• 목적: 이벤트가 실제 발생한 요소에서 시작하여, DOM 트리를 따라 상위 요소로 전달됩니다. 이 단계는 하위 요소에서 발생한 이벤트를 상위 요소에서도 처리할 수 있는 기회를 제공합니다.( 처리 기회 아래에 예시있음)
• 동작: 이벤트가 대상 요소에서 처리된 후, 동일한 이벤트는 다시 상위 요소로 이동하면서 각 요소에 등록된 버블링 이벤트 핸들러를 실행합니다. 이 과정은 최상위 요소(예: document 객체)에 도달하거나, event.stopPropagation() 메소드를 호출하여 명시적으로 중단될 때까지 계속됩니다.

---

캡처링 단계를 사용한 사전 처리 기회 제공 예시

:최상단으로 이벤트를 끌어올려서 캡처링 단계에서 아래 모든 이벤트 사전 제어 가능

 

이벤트가 실제 대상 요소에 도달하기 전에 최상위 요소에서부터 시작하여 이벤트를 "잡아낼" 수 있습니다.

이를 통해 개발자는 특정 조건이 충족되었을 때만 이벤트가 하위 요소에 전달되도록 제어하거나,

전혀 다른 작업을 수행하도록 설정할 수 있습니다

 

<div id="admin-area">

    <button id="delete-button">삭제</button>

    <button id="update-button">업데이트</button>

    <!-- 기타 관리자 영역의 다른 요소들 -->

</div>

 

document.getElementById('admin-area').addEventListener('click', function(event) {

  if (event.target.id === 'delete-button') {

  // 특정 조건에 따라 삭제 버튼 클릭 무시

  if (!confirm('정말로 삭제하시겠습니까?')) {

  console.log('삭제 작업이 취소되었습니다.');

  event.preventDefault(); // 이벤트를 취소

  event.stopPropagation(); // 이벤트 전파를 중지

  }

  }

  }, true); // 여기서 true는 이벤트 리스너를 캡처링 단계에서 실행하도록 설정

 

이 코드에서 addEventListener의 세 번째 매개변수로 true를 지정함으로써, 이벤트 리스너를 캡처링 단계에 등록합니다.

따라서, 사용자가 #admin-area 내의 어떤 요소를 클릭하더라도, 클릭 이벤트는 먼저 이 리스너에 도달하고, 여기서 if조건을 평가합니다.

예시에서는 사용자가 삭제 버튼을 클릭했을 때, 추가 확인 절차를 수행합니다. 사용자가 삭제 작업을 취소하면, event.preventDefault()를 호출하여 기본 동작을 방지하고, event.stopPropagation()을 호출하여 이벤트가 더 이상 전파되지 않도록 합니다. 이를 통해, 삭제 버튼에 대한 기본 클릭 이벤트를 방지하고, 이벤트가 #admin-area의 상위 요소로 버블링되는 것을 막을 수 있습니다.

---

버블링 단계를 사용한 사전 처리 기회 제공 예시

: 상위 ul 한개 태그에서 아래 태그들 모두 관리 가능

<ul id="todo-list">

<li>할 일 1</li>

<li>할 일 2</li>

<li>할 일 3</li>

</ul>

 

document.getElementById('todo-list').addEventListener('click', function(event) {

  alert(event.target.innerText + '를 클릭했습니다!');

});

 

어떤 li 태그를 눌러도 상위의 ul에 지정된 click 이벤트 리스너가 반응하게끔함. 

 

사용자가 목록의 어느 <li> 요소를 클릭하더라도, 그 클릭 이벤트는 해당 <li>에서 시작하여 상위 요소인 <ul>로 버블링됩니다. 이벤트 리스너는 <ul>에 등록되어 있으므로, 사용자가 목록의 어떤 항목을 클릭하든 해당 이벤트를 감지하고 처리할 수 있습니다.

 

이를 통해 아래의 3가지 효과를 누릴 수 있습니다.

 

1. 효율성: 개별 <li> 요소마다 이벤트 리스너를 추가하는 대신, 하나의 상위 요소에 이벤트 리스너를 추가함으로써 코드의 양을 줄이고 관리를 용이하게 합니다. 특히 항목이 동적으로 추가되거나 제거될 때 매우 유용합니다.
2. 동적 요소 처리: 웹 애플리케이션에서 동적으로 요소가 추가되는 경우(예를 들어, 사용자가 할 일 목록에 새 항목을 추가하는 경우), 각각의 새 요소에 개별적으로 이벤트 리스너를 추가할 필요가 없습니다. 상위 요소에 추가된 리스너가 자동으로 새 하위 요소의 이벤트도 처리할 수 있기 때문입니다.
3. 이벤트 위임: 이 방식은 이벤트 위임이라고도 불리며, 많은 하위 요소들이 유사한 방식으로 이벤트를 처리해야 할 때 매우 효과적입니다. 이벤트 위임을 사용하면, 이벤트 핸들러를 공통된 상위 요소에 설정하여, 그 하위 요소들의 이벤트를 한 곳에서 관리할 수 있습니다.