웹 개발에서 이벤트 처리는 매우 중요한 부분입니다. 특히 많은 수의 요소가 있는 경우에는 각 요소에 이벤트 핸들러를 추가하는 것이 유지보수가 어려울 수 있습니다. 그런 문제를 해결하기 위해 이벤트 위임 이라는 기법을 활용할 수 있습니다. 이 기법을 사용하면 동적으로 추가되는 요소에도 이벤트를 처리할 수 있어 코드를 효율적으로 유지할 수 있습니다.

이벤트 위임이란 무엇인가요?

이벤트 위임(Event Delegation) 이란 여러 요소에 이벤트 핸들러를 일일히 설정하는 대신, 더 상위 요소에 이벤트 핸들러를 설정하고, 해당 요소에서 발생한 이벤트를 처리하는 방법을 의미합니다. 이렇게 하면 새로운 요소를 추가하거나 제거해도 이벤트를 처리하는 코드를 수정할 필요가 없습니다.

예를 들어, 여러 개의 <li> 요소를 갖는 목록이 있을 때 각각의 <li>에 이벤트 핸들러를 추가하는 것이 아니라 상위 <ul> 요소에 이벤트 핸들러를 추가하고, 클릭한 요소에 따라 처리를 다르게 할 수 있습니다.

어떻게 이벤트 위임을 구현할 수 있나요?

아래는 JavaScript를 사용하여 이벤트 위임을 구현하는 간단한 예제입니다.

document.querySelector("#parentElement").addEventListener("click", function(event) {
  if (event.target.classList.contains("specificClass")) {
    // specificClass에 속한 요소를 클릭했을 때 처리할 작업
  }
});

위의 예제에서 #parentElement는 상위 요소의 ID를 나타냅니다. 이 요소에서 발생한 이벤트를 처리하기 위해 addEventListener를 사용했습니다. 그리고 이벤트가 발생한 요소는 event.target을 통해 접근할 수 있습니다.

그리고 이벤트가 발생한 요소의 클래스를 확인하여 원하는 작업을 처리할 수 있습니다.

결론

이벤트 위임은 효율적인 이벤트 관리를 위한 강력한 도구입니다. HTML 컬렉션 전체 또는 동적으로 추가되는 요소에 대해 일일이 이벤트 핸들러를 지정하는 번거로움을 줄일 수 있으며, 유지보수성을 향상시킬 수 있습니다. 이 기법을 활용하여 더 나은 웹 애플리케이션을 개발할 수 있습니다.

자세한 내용은 아래 링크에서 확인할 수 있습니다.

• MDN Web Docs: 이벤트 위임