이벤트 위임은 JavaScript에서 이벤트를 처리할 때 사용하는 패턴 중 하나입니다. 이 패턴은 여러 요소에 동일한 이벤트 핸들러를 등록하는 대신, 상위 요소에 이벤트 핸들러를 등록하여 하위 요소들의 이벤트를 처리하는 방법입니다.

왜 이벤트 위임을 사용하는가?

일반적으로 웹 페이지에서 DOM 요소들은 계층적으로 구조화되어 있습니다. 이 때문에 하위 요소들에게 각각 이벤트 핸들러를 등록하는 것은 번거롭고, 메모리 사용량을 증가시키는 원인이 될 수 있습니다. 또한, 동적으로 생성되는 요소에 이벤트 핸들러를 등록하기 어렵다는 문제도 있습니다.

이벤트 위임은 이러한 문제를 해결하기 위해 상위 요소에만 이벤트 핸들러를 등록하고, 하위 요소들의 이벤트 처리를 상위 요소에서 담당합니다. 이를 통해 메모리 사용량을 줄이고, 동적으로 생성되는 요소들에 대해서도 이벤트 핸들러를 간편하게 등록할 수 있습니다.

이벤트 위임의 구현 방법

이벤트 위임을 구현하기 위해서는 다음과 같은 단계를 따릅니다:

1. 상위 요소에 이벤트 핸들러를 등록합니다. 예를 들어, ul 요소의 click 이벤트를 처리하기 위해 document.querySelector(“ul”).addEventListener(“click”, handler)와 같은 방식으로 등록할 수 있습니다.

2. 이벤트 핸들러 내부에서 이벤트가 발생한 요소를 확인합니다. 이벤트 객체의 target 속성을 사용하여 이벤트가 발생한 요소를 알아낼 수 있습니다. 예를 들어, event.target을 사용하여 클릭된 li 요소를 알아낼 수 있습니다.

3. 이벤트가 발생한 요소를 기준으로 원하는 동작을 수행합니다. 이벤트 핸들러 내부에서 event.target을 사용하여 클릭된 요소에 대한 동작을 수행할 수 있습니다. 예를 들어, 클릭된 li 요소의 텍스트를 변경하거나 다른 동작을 수행할 수 있습니다.

예제 코드

아래는 ul 요소 내부의 li 요소를 클릭했을 때, 클릭된 요소의 텍스트를 콘솔에 출력하는 예제 코드입니다. 이 코드에서는 이벤트 위임을 사용하여 ul 요소에만 이벤트 핸들러를 등록하고, 클릭된 요소를 기준으로 동작을 수행합니다.

document.querySelector("ul").addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log(event.target.textContent);
  }
});

위 코드에서, ul 요소에 이벤트 핸들러를 등록하고 이벤트 객체의 target 속성을 사용하여 클릭된 요소를 알아내고 있습니다. 클릭된 요소의 태그 이름이 “LI”인 경우에만 텍스트를 콘솔에 출력하고 있습니다.

결론

이벤트 위임은 JavaScript에서 유용하게 활용할 수 있는 패턴 중 하나입니다. 이 패턴을 사용하면 메모리 사용량을 줄이고, 동적으로 생성되는 요소에 대해서도 간편하게 이벤트 핸들러를 등록할 수 있습니다. 이벤트 위임을 사용하면 코드의 유지보수성과 성능을 향상시킬 수 있습니다.

더 많은 정보를 원하시면 아래의 참고자료를 참고해주세요.

• MDN Web Docs: 이벤트 위임
• 이벤트 위임을 사용하여 성능 개선하기