Javascript 이벤트 전파와 이벤트 위임

웹 페이지에서 사용자의 상호 작용은 이벤트를 통해 이루어진다.

버튼 클릭, 마우스 이동, 키보드 입력 등 다양한 사용자의 행동이 이벤트로 발생되고, 이벤트 핸들러를 통해 특정 동작을 수행할 수 있다.

 

이벤트는 단순히 발생만 하는 것이 아닌, DOM 트리를 다라 전파되는 특징을 가지고 있다. 이러한 이벤트 전파와 이벤트 전파를 기반으로 하여 더욱 효율적인 이벤트 처리를 가능하게 하는 이벤트 위임에 대해 알아보고자 한다.

 

💡 이벤트 전파 💡

이벤트가 발생한 요소에서 시작하여 DOM 트리를 따라 상위 또는 하위 쪽으로 전파되는 과정을 의미한다.

 

DOM 트리 상에 존재하는 DOM 요소 노드에서 이벤트가 발생하면, 이벤트 객체는 DOM 트리 통해 다른 DOM 요소 노드로 전파하게 되는 것이다.

 

<ul>
  <li>happy</li>
</ul>

 

위와 같은 코드가 작성되어 있는 경우, <li> 태그에 들어온 클릭 이벤트가 부모 태그인 <ul>에 전파된다.

즉, 부모 노드에서도 자식 노드에서 발생한 이벤트를 감지 가능하고, 부모 노드에서 발생한 이벤트도 자식 노드에서 감지 가능하다.

 

이러한 이벤트 전파는 다음과 같은 방식들이 존재한다.

 

✅ 이벤트 전파 방식 ✅

캡처링 단계

이벤트가 상위 요소에서 하위 요소 방향으로 전파되는 것이다.

 

즉, 이벤트가 발생했을 때 해당 이벤트가 최상위 요소인 body부터 해당 이벤트가 발생한 태그까지 전달되며 내려가는 특성을 가진다.

 

버블링 단계

이벤트가 하위 요소에서 상위 요소 방향으로 전파되는 것이다.

 

즉, 특정 화면 요소에서 이벤트가 발생하면 해당 이벤트가 상위의 화면 요소들로 전달되어 가는 특성을 가진다.

🧐 이벤트 캡처링과 이벤트 버블링의 차이점 🧐

두 가지 전파 방식은 동시에 일어날까?

일반적으로 이벤트는 캡처링 단계를 거쳐 타겟 요소에 도달하고, 다시 버블링 단계를 거쳐 최상위 노드까지 전파된다.

하지만 대부분의 경우 우리는 버블링 단계에서 이벤트를 처리하기에 캡처링에 대해 크게 신경 쓰지 않아도 된다.

 

왜 두 가지 방식이 존재할까?

1. 유연성: 개발자는 이벤트 처리 방식을 선택할 수 있다. 예를 들어, 특정 이벤트를 하위 요소보다 상위 요소에서 먼저 처리하고 싶을 때 캡처링을 사용할 수 있다.
2. 효율성: 이벤트 캡처링과 버블링은 브라우저가 이벤트를 처리하는 방식에 영향을 미치며, 성능 최적화에 도움이 될 수 있다.

❗️ 이벤트 핸들러 등록 방식에 따른 전파 차이 ❗️

이벤트 핸들러 어트리뷰트, 프로퍼티 방식

이 방식을 이용한 이벤트 핸들러는 버블링 단계의 이벤트만 캐치할 수 있다.

 

addEventListener 메서드 이용 방식

이 방식으로 등록된 이벤트 핸들러는 모든 단계의 이벤트를 캐치할 수 있다.

 

addEventListener의 3번째 매개변수는 캡처링 이벤트를 캡처링할 건지 결정하는데 쓰인다. 기본값은 false인데, true일 경우 캡쳐링 단계의 이벤트를 캐치할 수 있다.

 

💡 이벤트 위임 💡

여러 개의 자식 요소에 동일한 이벤트 핸들러를 등록하는 대신, 부모 요소에 하나의 이벤트 핸들러를 등록하여 모든 자식 요소의 이벤트를 처리하는 방식이다.

 

바닐라 JS로 앱을 만들 때, 어떤 요소를 클릭하게 되면 상위 또는 하위 DOM을 변화시켜야 하거나 여러 개의 하위 요소에 핸들러를 등록해야 하는 경우들이 있다. 이런 경우 하나하나 이벤트를 걸어줘도 되지만 상위 DOM에서만 이벤트 핸들러 등록함으로써 해결이 가능하다.

 

const list = document.querySelector('.list');

list.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    // 클릭된 li 요소에 대한 처리
    console.log(event.target.textContent);
  }
});

 

위와 같은 코드가 있을 경우, 위 코드에서 list 클래스를 가진 요소 내부의 모든 li 요소에 클릭 이벤트를 위임하는 것이다.

list 요소에 클릭 이벤트 핸들러를 하나만 등록하고, event.target을 통해 실제 클릭된 요소를 확인하여 처리한다.

 

❓ 왜 이벤트 위임을 사용할까 ❓

성능 향상

많은 수의 자식 요소에 개별적으로 이벤트 핸들러를 등록하는 것보다 부모 요소에 하나의 이벤트 핸들러를 등록하는 것이 메모리 효율적이다.

 

코드 간결화

중복된 코드를 줄이고 코드의 가독성 향상이 가능하다.

 

동적 요소 처리

동적으로 추가되는 요소에도 이벤트를 자동으로 적용 가능하다.

 

✨ 이벤트 객체의 다양한 속성 활용 ✨ 

이벤트 발생할 때 event 객체에는 다양한 정보가 담겨있는데, 이 정보들을 잘 활용하는 것이 중요하다.

 

• event.target: 이벤트가 발생한 요소를 가리킨다.
• event.currentTarget: 이벤트 핸들러가 등록된 요소를 가리킨다.
• event.type: 이벤트 종류를 의미한다. (click, mouseover, keydown 등)
• event.preventDefault(): 기본 동작을 취소한다. (ex. 링크 클릭 시 페이지 이동 방지)
• event.stopPropagation: 이벤트 전파를 중단한다.

 

🚨 이벤트 위임 시 주의할 점 🚨

1. 성능: 너무 많은 요소에 이벤트를 위임하면 성능 저하를 발생할 수 있다.
2. 특정 요소만 처리: event.target을 이용하여 원하는 요소만 처리해야 한다.
3. 이벤트 버블링 이해: 이벤트 버블링을 정확히 이해해야 의도하지 않은 이벤트 처리가 발생하지 않는다.
4. 캡처링 단계 활용: 필요에 따라 캡처링 단계를 활용할 수 있지만, 일반적으로 버블링 단계를 사용하는 것이 더 일반적이다.

 

💻 이벤트 위임과 React, Vue.js 등의 프레임워크 연동 💻

React와 Vue.js와 같은 프레임워크들을 사용하면 이러한 이벤트 처리 방식이 다를 수 있다.

하지만 이벤트 위임의 기본적인 개념은 동일하게 적용된다.

 

React

JSX를 사용하여 이벤트 핸들러를 직접 작성하고, event.target을 이용하여 이벤트를 처리한다.

 

Vue.js

v-on 지시어를 사용하여 이벤트 핸들러를 등록하고, $event 객체를 통해 이벤트 정보에 접근한다.

 

이를 알고 프레임워크들을 사용한다면, 프레임워크를 통해 이벤트를 처리하는 과정을 더 쉽게 이해할 수 있을 것이다.

 

🔥 결론 🔥

JS 이벤트 전파와 이벤트 위임은 웹 개발에서 매우 중요한 개념이다.

이벤트 전파를 이해하고 이벤트 위임을 효과적으로 활용하는 것이 중요하다.