바닐라 JavaScript에서 이벤트 위임을 효과적으로 구현하려면 어떻게 해야 합니까?

바닐라 JavaScript의 이벤트 위임: 종합 가이드

바닐라 JavaScript에서 이벤트 위임을 달성하면 이벤트 리스너를 처리하는 효율적이고 유지 관리 가능한 방법이 제공됩니다. 내장된 프로토타입을 수정하는 jQuery의 이벤트 위임과 달리 바닐라 JavaScript는 '.closest()'와 함께 이벤트 위임을 사용하여 보다 강력한 접근 방식을 제공합니다.

jQuery 이벤트 위임을 바닐라 JavaScript로 변환

jQuery 예제를 번역하려면:

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

바닐라로 JavaScript에서는 다음을 사용합니다.

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

'.closest()' 메서드는 클릭한 요소에 '.focused' 선택기와 일치하는 상위 요소가 있는지 확인합니다. 그렇다면 'settingsPanel()' 함수를 호출합니다.

복잡한 이벤트 연결을 위한 최적화

특히 중첩된 요소를 처리할 때 성능을 향상하려면 조기 반환:

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

이 접근 방식은 '.focused' 선택기가 없을 때 불필요한 코드 실행을 방지합니다.

실시간 데모

다음 코드 조각은 '.closest()'와 함께 바닐라 JavaScript의 이벤트 위임을 사용하는 방법을 보여줍니다.

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

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

이 예에서 '#inner' 요소를 클릭하면 "vanilla"가 콘솔에 기록되어 바닐라를 보여줍니다. JavaScript의 이벤트 위임.

위 내용은 바닐라 JavaScript에서 이벤트 위임을 효과적으로 구현하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!