바닐라 JavaScript 이벤트 위임은 최적의 성능을 위한 jQuery의 접근 방식과 어떻게 비교됩니까?

최적의 성능을 위한 바닐라 JavaScript의 이벤트 위임

jQuery 구문 재검토

jQuery에서는 다음 코드를 사용하여 이벤트 위임을 수행할 수 있습니다.

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

바닐라로 번역 중 JavaScript

바닐라 JavaScript에서 이벤트 위임을 활용하는 것은 addEventListener를 통해 달성할 수 있습니다. 그러나 효율성을 위해 접근 방식을 최적화하는 것이 중요합니다. 다음 대안을 고려해보세요.

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

closed()를 활용하여 클릭한 요소나 해당 상위 항목이 .focused 선택기와 일치하는지 확인합니다. 이렇게 하면 하위 요소를 비효율적으로 반복할 필요가 없습니다.

코드를 간결하게 유지

코드 간결성을 향상하기 위해 기본 논리를 초기 반환 문 아래에 배치할 수 있습니다.

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

  // Code of settingsPanel here
});

구현예

다음 코드는 접근 방식:

document.querySelector('#outer').addEventListener('click', (e) => {
  if (!e.target.closest('#inner')) {
    return;
  }
  console.log('vanilla');
});

$('#outer').on('click', '#inner', () => {
  console.log('jQuery');
});

바닐라 JavaScript 및 jQuery 이벤트 핸들러를 사용하여 요소와 상호작용할 때 출력을 관찰하세요.

위 내용은 바닐라 JavaScript 이벤트 위임은 최적의 성능을 위한 jQuery의 접근 방식과 어떻게 비교됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!