자바스크립트 | 이벤트 버블링과 이벤트 캡처링

이벤트 버블링(Event Bubbling)과 이벤트 캡처링(Event Capturing)은 이벤트가 DOM 트리에서 어떻게 전파되는지에 대한 두 가지 방법입니다. 이벤트 캡처링은 이벤트가 상위 요소에서 하위 요소로 전파되는 방식이며, 이벤트 버블링은 이벤트가 하위 요소에서 상위 요소로 전파되는 방식입니다. 이 글에서는 이벤트 캡처링과 이벤트 버블링의 개념 그리고 장단점에 대해서 알아봅니다.

1. 이벤트 캡처링 📸

이벤트 캡처링은 이벤트가 최상위 요소에서 시작하여 하위 요소로 전파되는 방식입니다. 

이벤트 캡처링의 장점

이벤트 캡처링을 이용하면 다음과 같은 장점이 있습니다.

👍🏻 이벤트 처리 순서

이벤트 캡처링은 상위 요소에서 하위 요소로 이벤트가 전파되는 방식으로 이벤트를 처리합니다. 이러한 방식으로 이벤트를 처리하면, 이벤트 처리 순서가 명확해집니다. 이벤트 캡처링을 사용하면, 이벤트 핸들러가 실행되는 순서가 하위 요소에서 상위 요소로 정해져 있으므로, 이벤트가 처리되는 순서가 예측 가능합니다.

👍🏻 이벤트 처리 전파 방지

이벤트 캡처링을 사용하면, 하위 요소에서 발생한 이벤트를 상위 요소에서 처리할 수 있습니다. 이렇게 하면 상위 요소에서 이벤트를 처리할 때, 이벤트 전파를 중단할 수 있습니다. 이벤트 전파를 중단하면, 하위 요소에서 발생한 이벤트를 더 이상 상위 요소에서 처리하지 않도록 할 수 있습니다.

👍🏻 이벤트 위임

이벤트 캡처링을 이용하면, 상위 요소에서 하위 요소로 이벤트가 전파되는 방식으로 이벤트를 처리할 수 있습니다. 이를 이용하여, 상위 요소에서 하위 요소의 이벤트를 처리할 수 있습니다. 이를 이용한 기법을 이벤트 위임(Event Delegation)이라고 합니다. 예를 들어, 리스트 항목마다 클릭 이벤트를 등록하는 대신, 리스트 전체에 하나의 클릭 이벤트를 등록하여 이벤트 위임을 사용할 수 있습니다.

👍🏻 이벤트 핸들러 중복 등록 방지

이벤트 캡처링을 이용하면, 상위 요소에서 하위 요소로 이벤트가 전파되는 방식으로 이벤트를 처리할 수 있습니다. 이러한 방식으로 이벤트를 처리하면, 이벤트 핸들러가 중복 등록되는 것을 방지할 수 있습니다. 이벤트 핸들러가 중복 등록되는 것을 방지하면, 코드의 가독성을 높일 수 있습니다.

이벤트 캡처링 사용시 주의할 점

이벤트 캡처링을 사용할 때는 다음과 같은 주의할 점이 있습니다.

⚠️ 이벤트 핸들러 등록 순서

이벤트 캡처링에서는 이벤트가 상위 요소에서 하위 요소로 전파되므로, 이벤트 핸들러를 등록하는 순서가 중요합니다. 상위 요소에서 하위 요소로 이벤트가 전파되는 동안, 이벤트 핸들러를 등록한 순서대로 실행됩니다. 따라서, 이벤트 핸들러를 등록할 때는, 적절한 순서로 등록해야 합니다.

⚠️ 이벤트 전파 중단

이벤트 캡처링을 사용할 때, 이벤트 전파를 중단하기 위해서는 event.stopPropagation() 메서드를 사용해야 합니다. 하지만, 이렇게 이벤트 전파를 중단하면, 다른 요소에서 이벤트를 처리하지 않게 됩니다. 이 경우, 이벤트 전파를 중단하는 것이 올바른 해결책이 아닐 수 있습니다.

⚠️ 이벤트 캡처링과 이벤트 버블링 혼용

이벤트 캡처링과 이벤트 버블링을 함께 사용하면, 이벤트 처리가 복잡해질 수 있습니다. 이벤트 캡처링과 이벤트 버블링을 함께 사용할 때는, 이벤트 전파 방식을 명확하게 구분해야 합니다.

⚠️ 이벤트 타겟 설정

이벤트 캡처링을 사용하면, 상위 요소에서 하위 요소로 이벤트가 전파됩니다. 이때, 이벤트가 발생한 요소와 이벤트 타겟이 다를 수 있습니다. 이 경우, event.target 속성을 이용하여 실제 이벤트가 발생한 요소를 구분해야 합니다.

⚠️ 이벤트 핸들러 중복 등록

이벤트 캡처링에서는 상위 요소에서 하위 요소로 이벤트가 전파되므로, 이벤트 핸들러가 중복 등록될 수 있습니다. 이를 방지하기 위해, 이벤트 핸들러를 등록할 때, eventListenerOptions 객체의 capture 옵션을 true로 설정하여 등록해야 합니다. 이렇게 하면, 이벤트 캡처링에서만 이벤트 핸들러가 실행되며, 이벤트 버블링에서는 실행되지 않습니다.

2. 이벤트 버블링 🫧

이벤트 버블링(Event Bubbling)은 이벤트가 발생한 요소에서 시작하여 상위 요소로 전파되는 방식을 말합니다. 이벤트 버블링을 이용하면, 하위 요소에서 발생한 이벤트를 상위 요소에서 처리할 수 있습니다.

이벤트 버블링의 장점

이벤트 버블링(Event Bubbling)을 사용하는 것은 DOM 이벤트 처리에서 많은 장점을 가질 수 있습니다.

👍🏻 이벤트 위임

이벤트 버블링을 이용하면 하위 요소에서 발생한 이벤트를 상위 요소에서 처리할 수 있습니다. 이를 이용하면 상위 요소에서 하위 요소의 이벤트 처리를 대신 처리할 수 있습니다. 이를 이용한 기법을 이벤트 위임(Event Delegation)이라고 합니다. 예를 들어, 리스트 항목마다 클릭 이벤트를 등록하는 대신, 리스트 전체에 하나의 클릭 이벤트를 등록하여 이벤트 위임을 사용할 수 있습니다.

👍🏻 코드 가독성

이벤트 버블링을 사용하면 각 요소에서 이벤트를 처리하는 코드를 작성할 필요가 없어집니다. 이렇게 하면 코드가 간결해지고, 가독성이 좋아집니다.

👍🏻 이벤트 처리 성능

이벤트 버블링을 사용하면 하위 요소에서 발생한 이벤트를 상위 요소에서 처리하므로, 이벤트 핸들러의 수가 줄어들어 성능상의 이점이 있습니다. 이는 특히, 동적으로 생성된 요소에서 이벤트를 처리할 때 유용합니다.

👍🏻 동적 이벤트 처리

이벤트 버블링을 이용하면, 동적으로 생성된 요소에서 이벤트를 처리하는 것이 가능해집니다. 새로운 요소가 생성되면, 자동으로 이벤트 처리가 상위 요소로 전파되어 처리됩니다. 이렇게 하면, 이벤트 핸들러를 다시 등록할 필요가 없어 코드가 간결해집니다.

이벤트 버블링 사용시 주의할 점

이벤트 버블링(Event Bubbling)을 사용하면, 하위 요소에서 발생한 이벤트를 상위 요소에서 처리할 수 있습니다. 하지만, 이벤트 버블링을 사용할 때는 몇 가지 주의할 점이 있습니다.

⚠️ 이벤트 핸들러 중복 등록

이벤트 버블링을 이용하면, 하위 요소에서 발생한 이벤트를 상위 요소에서 처리할 수 있습니다. 하지만, 상위 요소에서 이벤트 핸들러를 등록하면, 하위 요소에서도 이벤트 핸들러가 등록되어 중복 등록될 수 있습니다. 이를 방지하기 위해, 이벤트 핸들러를 등록할 때 event.stopPropagation() 메서드를 사용하거나, 하위 요소에서 이벤트를 발생시키지 않도록 주의해야 합니다.

⚠️ 이벤트 타겟 설정

이벤트 버블링을 이용하면, 상위 요소에서 처리할 수 있는 이벤트가 하위 요소에서도 처리되기 때문에, 이벤트 발생 시 발생한 요소와 이벤트 타겟이 다를 수 있습니다. 이 경우, event.target 속성을 이용하여 실제 이벤트가 발생한 요소를 구분해야 합니다.

⚠️ 이벤트 캡처링과의 혼동

이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 상위 요소로 전파되는 방식이지만, 이벤트 캡처링은 이벤트가 상위 요소에서 시작하여 하위 요소로 전파되는 방식입니다. 이벤트 버블링과 이벤트 캡처링을 함께 사용할 때는, 이벤트 전파 방식을 명확하게 구분해야 합니다.

⚠️ 이벤트 전파 막기

이벤트 버블링을 이용하면, 하위 요소에서 발생한 이벤트를 상위 요소에서 처리할 수 있습니다. 하지만, 이 때, 상위 요소에서 이벤트를 막는 로직이 있는 경우, 하위 요소에서 발생한 이벤트도 막히게 됩니다. 따라서, 이벤트 핸들러에서 event.stopPropagation() 메서드를 사용하여 이벤트 버블링을 막아야 하는 경우에는, 상위 요소에서 이벤트 전파를 막지 않도록 주의해야 합니다.

⚠️ 이벤트 타입과 버블링

모든 이벤트가 버블링되지 않는 경우도 있습니다. 일부 이벤트는 버블링되지 않고, 해당 요소에 대해서만 발생합니다. 이는 submit 이벤트와 같은 폼 관련 이벤트, focus 이벤트, blur 이벤트 등이 해당됩니다. 예를 들어, 다음과 같은 코드가 있다고 가정해봅시다 :

<form onSubmit={handleSubmit}>
  <input type="text" />
  <button type="submit">Submit</button>
</form>

이 코드에서 onSubmit 이벤트는 form 요소에서 발생하는 이벤트입니다. 이 이벤트는 form 요소에서만 발생하며, 버블링되지 않습니다. 따라서, form 요소 이외의 요소에서는 onSubmit 이벤트 핸들러를 등록할 수 없습니다.

이러한 이벤트가 버블링되지 않는 이유는, 이러한 이벤트가 발생했을 때, 기본적으로 브라우저가 페이지를 새로고침하거나, 다른 페이지로 이동하게 되기 때문입니다. 이러한 이벤트가 버블링되면, 다른 요소에서 이벤트를 처리하는 동안 브라우저가 새로고침되거나, 페이지 이동이 발생할 수 있기 때문에, 이벤트 버블링이 막혀 있습니다.

참고 : 따라서, 이러한 이벤트는 해당 요소에서만 발생하며, 버블링되지 않기 때문에 주의하여 사용해야 합니다. 이러한 이벤트를 처리할 때는, 해당 요소에서 이벤트 핸들러를 등록해야 합니다. 예를 들어, 위의 form 요소에서는 onSubmit 이벤트 핸들러를 등록하여 폼을 제출할 때 이벤트를 처리할 수 있습니다.

 

3. 동작 방식 비교

캡처링 단계에서는 :

• 브라우저는 요소의 가장 바깥쪽의 조상()에 등록된 이벤트 핸들러가 있는지 검사하고, 만약 있다면 이벤트를 실행합니다.
• 그리고서내부에 있는 다음 요소로 이동하여 위 단계를 다시 수행합니다.
• 또, 다음 요소로 이동하여 위 두 단계를 반복합니다. 실제로 선택된 요소에 닿을 때까지 계속합니다.

버블링 단계에서는, 캡처링과 반대의 일이 일어납니다 :

• 브라우저는 선택된 요소에 등록된 이벤트 핸들러가 있는지 검사하고, 만약 있다면 이벤트를 실행합니다.
• 그리고서 해당 요소 외부에 있는 바로 위의 조상 요소로 이동하여 위 단계를 다시 수행합니다.
• 요소에 닿을 때까지 계속합니다.