이벤트 버블링은 HTML 요소 간에 발생한 이벤트가 부모 요소로 전파되는 메커니즘으로, 이를 활용하여 효율적으로 이벤트를 처리할 수 있습니다.

이 글에서는 이벤트 버블링에 대해 설명하고, JavaScript를 사용하여 이벤트를 처리하는 방법을 살펴보겠습니다.

이벤트 버블링이란?

이벤트 버블링은 HTML 요소 안에서 발생한 이벤트가 해당 요소의 부모 요소로 이벤트가 전파되는 동작입니다. 예를 들어, 내부 요소에서 클릭 이벤트가 발생하면 해당 이벤트는 부모 요소로 전파되어갑니다.

이벤트 버블링을 이용한 이벤트 처리

이벤트 버블링을 활용하여 부모 요소에서 자식 요소로 이벤트를 전파시키고, 처리할 수 있습니다. 다음은 간단한 예제 코드입니다.

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target && event.target.id === 'child') {
    alert('Button clicked');
  }
});
</script>

위의 코드에서, parent 요소에 클릭 이벤트가 발생하면 해당 이벤트가 자식 요소인 child 버튼으로 버블링되어 child 버튼에 대한 처리가 이루어집니다.

이러한 방식으로 이벤트 버블링을 이용하여 특정 요소에서 발생한 이벤트를 효율적으로 처리할 수 있습니다.

결론

이벤트 버블링은 JavaScript를 사용하여 HTML 요소의 이벤트를 처리할 때 유용한 메커니즘입니다. 익숙해지면 코드의 가독성과 유지보수성을 높일 수 있으며, 효율적인 이벤트 처리를 가능하게 합니다.

이 글을 통해 이벤트 버블링에 대한 개념을 이해하고, 실제로 JavaScript를 사용하여 이를 활용하는 방법에 대해 배웠습니다.