JS : event bubbling, capturing, delegation

정윤호·2024년 5월 9일
js스프린트프론트엔드7기취업까지달린다코드잇스프린트
0

코드잇잇잇!

목록 보기
17/30

Introduction

Event Handling in JavaScript

JavaScript에서 이벤트 핸들링은 웹 페이지에서 발생하는 사용자 상호 작용 또는 기타 이벤트에 응답하는 과정을 의미한다. 이러한 이벤트에는 버튼을 클릭하거나, 요소 위로 마우스를 올리는 등의 사용자 작업 뿐만 아니라, 양식을 제출하거나 키보드에서 키를 누르는 것과 같은 이벤트도 포함한다.

JavaScript에서는 DOM(Document Object Model)의 특정 요소에 ==이벤트 핸들러==를 연결하여 이러한 이벤트를 감시할 수 있다. 지정된 이벤트가 발생하면 관련된 핸들러 함수가 실행되어 사용자 입력에 대한 동작을 수행하거나 트리거할 수 있다.

이벤트 처리는 상호 작용적인 웹 개발의 기본적인 측면이며, 개발자가 동적이고 반응적인 사용자 인터페이스를 구축하는 데 필수적이다. 효과적으로 이벤트를 처리하는 방법을 이해하는 것은 상호작용성이 높고 매력적인 웹 애플리케이션을 구축하는 데 필수적이다.

Importance of understanding Event Bubbling, Capturing, and Delegation

이벤트 버블링, 캡처링 및 위임을 이해하는 것은 웹 개발에서 효과적인 이벤트 관리를 위한 중요한 요소다.

이벤트 버블링과 캡처링은 이벤트가 DOM 트리를 통해 전파되는 방식을 설명하며, 특정 요소에서 발생한 이벤트가 상위 요소로 전파되는 방식을 이해하는 데 도움이 된다. 버블링은 하위 요소에서 상위 요소로 이벤트가 전파되는 반면, 캡처링은 상위 요소에서 하위 요소로 이벤트가 전파된다.

이벤트 위임은 이벤트 핸들링을 최적화하는 데 사용되며, 하위 요소에서 발생한 이벤트를 상위 요소가 처리하도록 한다. 이를 통해 이벤트 핸들러의 수를 줄이고, 동적으로 생성된 요소에 대한 이벤트 처리를 단순화할 수 있다.

이러한 개념을 이해하면 ==이벤트 관리==를 효율적으로 수행하고 ==코드의 가독성==을 높이는 데 도움이 된다. 또한 불필요한 이벤트 핸들러의 생성을 방지하여 ==성능을 향상==시킬 수 있다.

Event Bubbling and Capturing

이벤트 버블링과 캡처링은 이벤트가 DOM(Document Object Model)의 요소들 사이에서 전파되는 방식을 설명하는 두 가지 메커니즘이다.

  1. 이벤트 버블링(Event Bubbling):
    • 하위 요소에서 상위 요소로 이벤트가 전파되는 현상
    • 예를 들어, 버튼 내부에 클릭 이벤트가 발생하면 해당 버튼에 등록된 이벤트 핸들러가 실행되고, 그 후 상위 요소인 부모 요소에 대해 같은 이벤트가 발생한다. 이어서 부모 요소의 이벤트 핸들러가 실행되고, 이 과정이 해당 요소의 모든 부모 요소까지 반복된다.
    • 이벤트 버블링은 DOM 트리의 구조를 따라 이벤트가 전파되기 때문에 가장 먼저 발생한 하위 요소의 이벤트 핸들러가 가장 마지막에 실행된다.
  2. 이벤트 캡처링(Event Capturing):
    • 이벤트 캡처링은 이벤트 버블링과는 반대로 상위 요소에서 하위 요소로 이벤트가 전파되는 현상을 말한다.
    • 이벤트 캡처링은 이벤트가 전파되기 전에 최상위 요소부터 시작하여 하위 요소까지 이벤트가 전달된다. 그리고 이벤트가 실제 대상 요소에 도달하기 전에 모든 부모 요소에서 캡처 단계가 발생한다.
    • 이벤트 캡처링은 이벤트 버블링의 반대 방향으로 발생하므로, 캡처 단계에서 가장 먼저 발생한 이벤트 핸들러가 가장 먼저 실행된다.

이벤트 버블링과 캡처링은 DOM 트리의 구조와 관련이 있으며, 이벤트 핸들러가 어떻게 실행되는지에 대한 이해를 돕는다.

Event Propagation

eventflow|400

이벤트 전파(Event Propagation)는 DOM(Document Object Model) 트리 구조를 따라 이벤트가 전달되는 방식을 의미한다. 일반적으로 이벤트 전파는 다음 세 단계로 이루어진다.

  1. 캡처 단계(Event Capturing Phase):
    • 이벤트 캡처링 단계에서 이벤트는 최상위 요소부터 시작하여 하위 요소로 이동
    • 이벤트 캡처링은 이벤트가 실제 대상 요소에 도달하기 전에 발생하며, 부모 요소에서 자식 요소로 이벤트가 전달
  2. 대상 단계(Target Phase):
    • 이벤트가 대상 요소에 도달하면 대상 단계가 시작
    • 이벤트가 대상 요소에 도달했을 때 대상 요소에 등록된 이벤트 핸들러가 실행
  3. 버블링 단계(Event Bubbling Phase):
    • 이벤트 버블링 단계에서는 이벤트가 대상 요소에서 시작하여 상위 요소로 이동
    • 이벤트 버블링은 대상 요소에서 시작하여 최상위 요소까지 거슬러 올라가며 발생하며, 부모 요소에서 자식 요소로 이벤트가 전달

이렇게 세 단계로 이벤트가 전파되는 동안 각 요소의 이벤트 핸들러가 실행된다. 이벤트 전파는 이벤트가 발생한 요소에서 시작하여 DOM 트리를 따라 이동하면서 처리되므로, 이벤트 핸들러를 특정한 요소에 연결하여 해당 요소에서 이벤트를 캡처하거나 버블링할 수 있다.

Example of Event Capturing and Bubbling

  1. Event Capturing
<div id="outer">
  <div id="middle">
    <div id="inner">Click Me!</div> 
  </div> 
</div>
const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');

outer.addEventListener('click', () => {
  console.log('Outer Div - Capturing');
}, true); 

// 이벤트 핸들러에서 콜백 다음에 오는 아규먼트
// addEventListener('click', () => { }, true)
// 위에서 true에 해당하는 부분이 이벤트 캡처링 여부를 결정한다.

middle.addEventListener('click', () => {
  console.log('Middle Div - Capturing');
}, true);

inner.addEventListener('click', () => {
  console.log('Inner Div - Capturing');
}, true);

위의 예제에서는 세 개의 <div> 요소가 중첩되어 있다. 각 요소에 클릭 이벤트 핸들러가 등록되어 있으며, 이벤트 캡처링 단계에서 실행된다. 클릭이 발생하면 캡처링 단계에서 가장 바깥쪽 요소부터 시작하여 안쪽으로 이벤트가 전파된다. 클릭하면 콘솔에 다음과 같은 출력이 표시된다.

Outer Div - Capturing
Middle Div - Capturing
Inner Div - Capturing
  1. Event Bubbling
    <div id="outer">
 <div id="middle">
   <div id="inner">Click Me!</div> 
 </div> 
</div>
```js
const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');

outer.addEventListener('click', () => {
  console.log('Outer Div - Bubbling');
}, false); 

// 이벤트 핸들러에서 세번째 파라미터는 false값을 디폴트로 가진다.
// 따라서 생략할 수 있다.

middle.addEventListener('click', () => {
  console.log('Middle Div - Bubbling');
});

inner.addEventListener('click', () => {
  console.log('Inner Div - Bubbling');
});

위의 예제에서도 세 개의 <div> 요소가 중첩되어 있다. 클릭 이벤트 핸들러가 등록되어 있지만 이번에는 이벤트 버블링 단계에서 실행된다. 클릭이 발생하면 이벤트는 버블링 단계에서 가장 안쪽 요소부터 시작하여 바깥쪽으로 이벤트가 전파된다. 클릭하면 콘솔에 다음과 같은 출력이 표시된다.

Inner Div - Bubbling
Middle Div - Bubbling
Outer Div - Bubbling

Event Delegation

이벤트 위임(Event Delegation)은 이벤트 핸들러를 하위 요소에 개별적으로 할당하는 대신, 상위 요소에 이벤트 핸들러를 할당하여 하위 요소의 이벤트를 처리하는 기술이다. 상위 요소는 하위 요소들의 이벤트를 감시하고, 해당 이벤트가 발생한 경우에만 이벤트 핸들러를 실행한다.

이벤트 위임의 장점은 다음과 같다:

  1. 성능 개선: 많은 수의 하위 요소에 이벤트 핸들러를 할당하는 것보다 상위 요소에 이벤트 핸들러를 할당하는 것이 성능면에서 효율적이다. 이는 이벤트 핸들러가 한 번만 연결되어서 상위 요소에서 하위 요소로 이벤트를 전파하기 때문이다.
  2. 동적 요소 처리: 이벤트 위임을 사용하면 동적으로 생성되는 요소에도 적용할 수 있다. 새로운 요소가 동적으로 추가되더라도 상위 요소에 할당된 이벤트 핸들러는 새로운 요소에도 적용된다.
  3. 메모리 관리: 이벤트 위임은 메모리 관리 측면에서도 이점을 제공한다. 하위 요소가 제거될 때 해당 이벤트 핸들러도 함께 제거된다.
  4. 코드 간소화: 이벤트 위임을 사용하면 코드를 간소화할 수 있다. 많은 수의 하위 요소에 개별적으로 이벤트 핸들러를 할당하는 것보다 상위 요소에 이벤트 핸들러를 할당하는 것이 코드를 관리하기 훨씬 쉽게 만든다.

이러한 이점들이 있어 이벤트 위임은 웹 애플리케이션에서 널리 사용되는 패턴 중 하나이다.

Event Delegation leveraging event bubbling

이벤트 위임은 이벤트 버블링을 활용하여 작동한다. 상위 요소에 이벤트 핸들러를 할당하고, 해당 상위 요소에서 이벤트가 발생했을 때 실제로 이벤트를 처리하는 방식이다. 이때, 하위 요소에서 발생한 이벤트도 상위 요소까지 버블링되므로 상위 요소의 이벤트 핸들러가 호출된다.

<ul id="post-list">
  <li id="post-1">Item 1</li>
  <li id="post-2">Item 2</li> 
  <li id="post-3">Item 3</li> 
  <li id="post-4">Item 4</li> 
  <li id="post-5">Item 5</li> 
</ul>
function printId() {
  console.log(this.id); 
} 

document.querySelector('#post-1').addEventListener('click', printId); 
document.querySelector('#post-2').addEventListener('click', printId); 
document.querySelector('#post-3').addEventListener('click', printId); 
document.querySelector('#post-4').addEventListener('click', printId); 
document.querySelector('#post-5').addEventListener('click', printId); 
document.querySelector('#post-6').addEventListener('click', printId);

위 예시에서는, 리스트 요소(<ul>) 안에 많은 항목(<li>)이 있다. 각 항목에는 클릭 이벤트를 처리하는 이벤트 핸들러가 필요하다. 이 때, 각 항목에 이벤트 핸들러를 할당하는 대신, 리스트 요소(<ul>)에 하나의 클릭 이벤트 핸들러를 할당할 수 있다. 

document.querySelector('#post-list').addEventListener('click', printId);

이벤트 버블링의 도움으로 클릭이 발생한 하위 항목(<li>)에서 상위 요소(<ul>)로 이벤트가 버블링되고, 상위 요소에 할당된 이벤트 핸들러가 호출된다. 이 핸들러에서는 클릭된 항목을 식별하고 해당하는 동작을 수행할 수 있다.

이렇게 하면 하위 요소에 대한 개별적인 이벤트 핸들러를 할당할 필요가 없으므로 코드가 간결해지고, 동적으로 생성되는 요소에 대해서도 적용할 수 있어 유지보수성이 향상된다. 이벤트 위임은 이러한 방식으로 이벤트 버블링을 활용하여 효율적으로 이벤트를 처리하는 기술이다.

Comparison and Use Cases

  1. 이벤트 버블링 (Event Bubbling):
  • 사용자 인터페이스의 특정 부분에서 발생한 이벤트를 해당 부분의 상위 요소에 모두 전파해야 할 때 유용함
  • 여러 개의 하위 요소에서 동일한 유형의 이벤트를 처리해야 할 때 사용할 수 있음
  • 예를 들어, 특정 버튼을 눌렀을 때 모달을 닫는 경우, 버튼에 클릭 이벤트를 연결하여 모달이 열린 상태에서 모달 영역 외부를 클릭했을 때도 모달이 닫히도록 할 수 있다.
  1. 이벤트 캡처링 (Event Capturing):
    • 거의 사용되지 않지만, 특정 요소에서 발생한 이벤트가 해당 요소의 상위 요소에 대해 처리되어야 할 때 유용함
    • 이벤트 버블링과 비슷한 동작을 하지만, 버블링과는 반대 방향으로 이벤트가 전파
    • 예를 들어, 특정 요소의 하위 요소들 중 하나에서 발생한 이벤트가 해당 요소에 대해 처리되어야 할 때 사용할 수 있다.
  2. 이벤트 위임 (Event Delegation):
    • 동적으로 생성되는 요소에 대해 이벤트를 처리해야 할 때 매우 유용하다. 예를 들어, AJAX를 사용하여 새로운 요소를 동적으로 추가하거나 제거하는 경우에 해당한다.
    • 여러 개의 유사한 요소에 대해 개별적인 이벤트 리스너를 연결하지 않고, 공통 상위 요소에 이벤트 리스너를 연결하여 코드를 간결하게 유지할 수 있음
    • 특히 리스트나 테이블과 같이 많은 수의 항목을 포함하는 경우에 유용하며, 메모리 및 성능 면에서 효율적이다.

Conclusion

이벤트 핸들링 기술을 숙달하는 것은 효율적인 웹 개발을 위해 매우 중요하고, 여기에는 몇 가지 이유가 있다:
1. 사용자 경험 향상: 웹 애플리케이션의 핵심은 사용자와의 상호 작용이다. 이벤트 핸들링 기술을 잘 활용하면 사용자 경험을 향상시키는 데 도움이 된다. 정확하고 빠른 이벤트 응답은 사용자들이 애플리케이션을 사용하는 동안 더욱 뛰어난 경험을 할 수 있도록 한다.
2. 코드 유지 관리성: 이벤트 핸들링을 효율적으로 다루면 코드를 더욱 쉽게 유지 관리할 수 있다. 적절한 이벤트 위임과 핸들링 방법을 사용하면 코드 중복을 줄이고 일관된 패턴을 유지할 수 있다.
3. 성능 최적화: 효율적인 이벤트 핸들링은 애플리케이션의 성능을 향상시킬 수 있다. 불필요한 이벤트 핸들러를 피하고 이벤트 위임을 사용하여 DOM 요소에 대한 처리를 최소화하면 메모리 사용량을 줄이고 더 빠른 실행 속도를 얻을 수 있다.
4. 동적 웹 애플리케이션 개발: 현대의 웹 애플리케이션은 동적이고 대화형적인 요소가 많다. 이러한 요소들은 효과적인 이벤트 핸들링을 통해 구현된다. 이벤트 핸들링 기술을 마스터하면 동적으로 데이터를 로드하고 업데이트하는 등의 작업을 더욱 효율적으로 수행할 수 있다.

요약하면, 이벤트 핸들링 기술을 잘 이해하고 활용하는 것은 웹 개발자에게 매우 중요하다. 이를 통해 사용자 경험을 향상시키고 코드의 유지 보수성을 높이며, 성능을 최적화하고 동적 웹 애플리케이션을 구축할 수 있다.

Additional Resources

  1. MDN Web Docs - Introduction to events
  2. FreeCodeCamp - Understanding JavaScript event listeners
  3. FreeCodeCamp - Event Delegation in JavaScript
  4. Poiemaweb
profile
정윤호
우리 인생 화이팅~
이전 포스트

이웅모 저자 특강 (2024.05.07)

다음 포스트

JS : understanding of 'this'

0개의 댓글