[javascript] 이벤트 위임 처리하기

14 Dec 2023

javascript

이벤트 위임(event delegation)은 DOM 이벤트를 효율적으로 처리하기 위한 패턴입니다. 이 패턴을 사용하면 동적으로 생성된 요소 또는 여러 개의 요소에 이벤트를 한 번에 처리할 수 있습니다.

이벤트 위임의 개념

보통 우리는 특정한 요소에 이벤트를 바인딩하여 처리합니다. 예를 들어, 아래와 같이 각 요소에 클릭 이벤트를 바인딩하는 코드를 작성할 수 있습니다.

const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.addEventListener('click', () => {
    // 클릭 이벤트 처리
  });
});

그러나 만약 동적으로 새로운 요소가 추가되거나 수많은 요소에 이벤트를 바인딩해야 하는 경우, 위임 패턴을 사용하는 것이 더 효율적입니다.

이벤트 위임의 사용

이벤트 위임은 상위 요소에 이벤트를 바인딩하고, 해당 이벤트가 발생한 요소를 식별하여 처리하는 방식으로 구현됩니다. 예를 들어, 아래와 같이 상위 요소에 이벤트를 바인딩하고, 클릭된 요소를 식별하여 처리할 수 있습니다.

const container = document.querySelector('.container');
container.addEventListener('click', event => {
  if (event.target.classList.contains('item')) {
    // 클릭된 요소가 .item 클래스를 갖고 있다면 처리
  }
});

이렇게 하면 동적으로 추가되는 요소에 대해서도 이벤트가 처리될 수 있습니다.

이벤트 위임을 사용하면 이벤트를 처리하는 코드를 줄일 수 있고, 성능을 개선할 수 있습니다.

마무리

이벤트 위임은 동적으로 추가되는 요소에 대한 이벤트 처리나 많은 수의 요소에 대한 이벤트 처리를 효율적으로 할 수 있는 방법입니다. 적절히 활용하여 코드를 간결하고 효율적으로 작성해 보세요.

더 자세한 내용은 아래의 참고자료를 참고하시기 바랍니다.