'closest()'를 사용한 이벤트 위임은 어떻게 바닐라 JavaScript 이벤트 처리를 최적화할 수 있습니까?

바닐라 JavaScript 이벤트 위임: 효율적이고 적절한 접근 방식

이벤트 위임은 이벤트 리스너를 연결할 수 있는 JavaScript의 일반적인 기술입니다. 단일 상위 요소를 만들고 해당 하위 요소에 이벤트 처리를 위임합니다. 이 접근 방식은 각 개별 하위 항목에 대한 중복 이벤트 리스너 생성을 방지하여 성능을 크게 향상시킬 수 있습니다.

바닐라 JavaScript에서 이벤트 위임을 구현하는 일반적인 방법 중 하나는 addEventListener() 메서드를 사용하는 것입니다. 그러나 #main의 모든 하위 항목을 순회하는 질문에 언급된 구현은 성능에 적합하지 않습니다.

더 효율적인 대안은 클릭한 요소가 있는지 확인하는 close() 메서드를 활용하는 것입니다. 지정된 선택기와 일치하는 상위 요소가 있습니다. 이를 통해 이벤트를 더 정확하고 효율적으로 위임할 수 있습니다.

예를 들어,closed()를 사용하여 jQuery 이벤트 핸들러를 바닐라 JavaScript로 변환하려면:

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

이 코드에서는 먼저 다음을 선택합니다. #main 요소를 추가하고 'click' 이벤트에 대한 이벤트 리스너를 추가합니다. 클릭이 발생하면 close()를 사용하여 클릭한 요소에 '.focused' 클래스가 있는 상위 요소가 있는지 확인합니다. 그렇다면 settingsPanel() 함수를 호출합니다.

이 접근 방식은 필요한 요소만 확인하고 #main의 모든 하위 요소를 반복할 필요가 없기 때문에 효율적입니다. 또한 대상 요소를 직접 참조하여 취약한 종속성을 줄입니다.

깊게 중첩된 구조로 작업할 때 내부 선택자가 상위 요소가 될 수 없도록 하면 성능을 더욱 최적화할 수 있습니다. 이 접근 방식에 대한 라이브 데모 및 추가 세부 정보는 제공된 참조 자료에서 제공됩니다.

위 내용은 'closest()'를 사용한 이벤트 위임은 어떻게 바닐라 JavaScript 이벤트 처리를 최적화할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!