DOM 조작을 위한 JavaScript 이벤트 델리게이션 팁

작성: 2024년 05월 27일읽기: 약 3분

웹 개발을 하다 보면, 웹 페이지의 요소들을 동적으로 변경해야 할 때가 많습니다. 이럴 때 자주 사용되는 기술이 바로 DOM(Document Object Model) 조작입니다. 오늘은 특히 많은 요소에 이벤트 리스너를 추가하지 않고도 이벤트를 관리할 수 있는 효율적인 방법인 이벤트 델리게이션에 대해 알아보겠습니다.

이벤트 델리게이션이란?

간단히 말해서, 이벤트 델리게이션은 부모 요소에 이벤트 리스너를 하나만 추가하여 여러 자식 요소의 이벤트를 관리하는 기법입니다. 이 방식은 웹 페이지의 메모리 사용량을 줄이고, 동적으로 요소가 추가되거나 제거될 때 이벤트 리스너를 다시 추가하거나 제거할 필요가 없게 해줍니다.

기본 예제

아래는 이벤트 델리게이션을 사용하는 간단한 예제 코드입니다. 여기서는 ul 태그의 목록 항목을 클릭할 때마다 메시지를 콘솔에 출력하는 예제를 보여줍니다.

<ul id="myList">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

<script>
  document.getElementById('myList').addEventListener('click', function(e) {
    if(e.target.tagName === 'LI') {
      console.log(e.target.textContent + '가 클릭되었습니다.');
    }
  });
</script>

이 코드에서는 ul 요소에 이벤트 리스너를 추가하고, 클릭 이벤트가 발생하면 이벤트의 대상(e.target)이 li 태그인지 확인합니다. 만약 li 태그라면 해당 항목의 텍스트를 콘솔에 출력합니다.

팁

적절한 부모 요소 선택: 이벤트 델리게이션을 사용할 때는 이벤트를 캡처할 적절한 부모 요소를 선택해야 합니다. 너무 상위 요소에 이벤트 리스너를 추가하면 불필요한 이벤트 체크가 많아질 수 있으니 주의하세요.
e.target과 e.currentTarget 구분하기: e.target은 실제 이벤트가 발생한 요소를 가리키고, e.currentTarget은 이벤트 리스너가 등록된 요소를 가리킵니다. 이벤트 델리게이션을 사용할 때는 대부분 e.target을 사용합니다.
성능 고려하기: 이벤트 델리게이션은 메모리 사용량을 줄이고 성능을 향상시킬 수 있지만, 모든 이벤트를 한 곳에서 처리한다는 점에서 복잡도가 증가할 수 있습니다. 따라서 적절한 균형을 찾는 것이 중요합니다.

이벤트 델리게이션은 DOM 조작 시 자주 사용되는 유용한 기법 중 하나입니다. 이 기법을 잘 활용하면 웹 애플리케이션의 성능을 향상시키고 코드의 유지보수성을 높일 수 있습니다.