JavaScript에서 이벤트 핸들러 최적화

요소에 추가된 과도하게 많은 핸들러는 많은 RAM을 소비하고 페이지 지연을 초래합니다.

예를 들어 살펴보겠습니다. 어떤 목록이 있다고 가정해 봅시다:

html<ul></ul>

이 목록에 대한 참조를 변수에 가져옵니다:

javascriptlet ul = document.querySelector('ul');

이제 우리 목록을 li 태그로 채우고, 클릭 핸들러를 부착해 보겠습니다:

javascriptfor (let i = 1; i <= 1000; i++) {
  let li = document.createElement('li');
  li.textContent = i;
  ul.append(li);
  
  li.addEventListener('click', function() {
    console.log(this.textContent);
  });
}

결국 우리는 1000개의 핸들러를 갖게 됩니다. 이것은 매우 많습니다. 최적화를 위해 이벤트 위임을 사용하여 ul 태그에 단 하나의 핸들러만 부착할 수 있습니다.

이제 해보겠습니다. 먼저 목록 항목을 만듭니다:

javascriptfor (let i = 1; i <= 1000; i++) {
  let li = document.createElement('li');
  li.textContent = i;
  ul.append(li);
}

이제 이벤트 핸들러 위임을 수행합니다:

javascriptul.addEventListener('click', function(event) {
  let li = event.target.closest('li');
  
  if (li) {
    console.log(li.textContent);
  }
});