바닐라 JavaScript 이벤트 위임은 여러 개별 이벤트 리스너에 대한 성능을 어떻게 향상합니까?

바닐라 JavaScript 이벤트 위임: 자세한 분석

배경

이벤트 위임은 서로 다른 이벤트 리스너에 연결된 여러 이벤트 리스너의 처리를 단순화하는 데 사용되는 기술입니다. DOM 구조 내의 요소. 바닐라 JavaScript에서는 .addEventListener()를 사용하여 이를 수행할 수 있습니다.

바닐라 JS의 이벤트 위임

질문에 제공된 jQuery 예제를 번역하려면:

$('#main').on('click', '.focused', function() {
    settingsPanel();
});

... 바닐라 JavaScript로 다음을 사용합니다:

document.querySelector('#main').addEventListener('click', (e) => {
  if (e.target.closest('#main .focused')) {
    settingsPanel();
  }
});

개선됨 해결 방법

그러나 성능을 최적화하고 과도한 DOM 순회를 방지하려면 내부 선택자만 .closest()에 전달하는 것이 좋습니다.

document.querySelector('#main').addEventListener('click', (e) => {
  if (e.target.closest('.focused')) {
    settingsPanel();
  }
});

코드 구조 단순화

가독성을 위해 조기 반품 시 상태를 확인하는 것이 일반적입니다. 설명:

document.querySelector('#main').addEventListener('click', (e) => {
  if (!e.target.closest('.focused')) {
    return;
  }
  // Remaining code of settingsPanel here
});

성능 비교

질문에 제공된 대체 솔루션(document.getElementById('main').addEventListener('click', doThis);)과 비교하면 다음과 같습니다. 메서드는 이벤트 버블링을 사용하고 내부의 수많은 하위 요소를 반복하는 것을 방지하므로 향상된 성능을 제공합니다. #main.

라이브 데모

차이점을 설명하려면 답변에 제공된 라이브 데모 스니펫을 참조하세요. 내부 요소(#inner)를 클릭하면 바닐라 JavaScript 및 jQuery 이벤트 핸들러 모두 해당 메시지를 콘솔에 기록합니다.

위 내용은 바닐라 JavaScript 이벤트 위임은 여러 개별 이벤트 리스너에 대한 성능을 어떻게 향상합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!