[JavaScript] 이벤트 버블링, 이벤트 캡처링, 이벤트 위임

 

---

목차

 

1. 이벤트 버블링

2. 이벤트 캡처링

3. 이벤트 위임

---

 

 

오늘은 이벤트 버블링, 이벤트 캡처링, 이벤트 위임에 대해 다룰 것이다. 

모두 JavaScript에서 이벤트 처리와 관련된 중요한 개념이기 때문에 잘 알아두어야 한다.

 

1. 이벤트 버블링 (Event Bubbling)

---

이벤트 버블링은 자식 요소에서 부모 요소로 이벤트가 전파되는 것을 말한다.

간단한 예시를 통해 알아보자.

<div id="outer">
    <div id="inner">Click me!</div>
</div>

document.getElementById('inner').addEventListener('click', function() {
    console.log('Inner clicked');
});

document.getElementById('outer').addEventListener('click', function() {
    console.log('Outer clicked');
});

 

위의 코드에서 #inner를 클릭하면 두 이벤트 모두 발생하게 되며 콘솔에는 'Inner clicked'가 먼저 출력되고, 그 다음에 'Outer clicked'가 출력된다.

 

 

2. 이벤트 캡처링 (Event Capturing)

---

이벤트 캡처링은 이벤트가 발생하면 가장 먼저, 그리고 이벤트 버블링과 반대로 작동하는 이벤트 전파 방식이다.한마디로 이벤트 캡처링은 이벤트가 가장 먼 부모 요소에서 시작하여 실제 대상 요소까지 이벤트가 전파되는 것을 말 한다.

 

간단한 예시는 다음과 같다.

document.getElementById('outer').addEventListener('click', function() {
    console.log('Outer clicked');
}, true); // 이벤트 캡처링을 활성화하려면 true를 전달해야한다.

document.getElementById('inner').addEventListener('click', function() {
    console.log('Inner clicked');
}, true);

 

주의할점은 이벤트 캡처링을 사용하려면 세번째 프로퍼티에 true 또는 {capture: true}를 전달해야 한다.

 

아래의 이미지를 한 번 보자.

이벤트가 발생하면 가장 먼저 window 객체에서부터 target 까지 이벤트 전파가 일어난다. (캡쳐링 단계)
그리고 나서 타깃에 도달하면 타깃에 등록된 이벤트 핸들러가 동작하고, (타깃 단계)
이후 다시 window 객체로 이벤트가 전파된다. (버블링 단계)

 

이런 과정을 통해 각 요소에 할당된 이벤트 핸들러가 호출된다. 하지만 캡처링 단계에서 이벤트를 발생시켜야 하는 일은 매우 드물기 때문에 가볍게 짚고 넘어가자.

 

3. 이벤트 위임

---

이벤트 위임은 여러 요소에 대해 각각 이벤트 리스너를 등록하는 대신 공통된 부모 요소에 이벤트 리스너를 등록하여 자식 요소들의 이벤트를 처리하는 방법이다. 이렇게 이벤트를 다루는 방식을 자식 요소의 이벤트를 부모 요소에 위임한다고 해서 이벤트 위임(Event Delegation)이라고 부른다.

 

이벤트 위임은 버블링 개념을 활용하여 훨씬 효과적인 이벤트 관리를 도와준다.

 

이벤트 위임을 사용할 때 주의할 점은 원하는 요소에서 의도한 동작이 일어나게끔 따로 처리를 해주어야 한다는 점이다.  간단한 예제를 통해 알아보자.

<ul id="parent-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

document.getElementById('parent-list').addEventListener('click', function(event) {
   if (event.target.tagName === 'LI') {
       console.log('List item clicked:', event.target.textContent);
   } else {
       console.log('Clicked element is not an LI.');
   }
});

 

위의 예제는 tagName 이 LI인 경우에만 작업을 수행하게 되어있다.

(.tagName을 사용할 때는 HTML 요소 이름을 대문자로 사용해야 한다.)

 

만약 다른 요소를 클릭하면 "Clicked element is not an LI."가 출력된다. 이렇게 if 문을 사용하면서 제약을 두는 이유는 이벤트 버블링 때문에 LI 태그가 아닌 다른 요소에도 클릭 이벤트가 전파될 수 있기 때문이다.