이벤트 위임은 바닐라 JavaScript 성능과 코드 단순성을 어떻게 향상시킬 수 있습니까?

바닐라 JavaScript를 사용한 이벤트 위임

바닐라 JavaScript에서 이벤트 위임은 이벤트 리스너를 단일 상위 요소에 연결하는 데 사용되는 기술입니다. 그 안에 있는 개별 요소. 이 접근 방식은 여러 이벤트 리스너의 필요성을 제거하여 성능을 향상시키고 코드를 단순화합니다.

효과적인 이벤트 위임

이벤트 위임을 효율적으로 구현하려면 다음 단계를 사용하세요.

1. 이벤트가 실행될 상위 요소를 찾습니다. 발생합니다.
2. 원하는 이벤트 유형(예: 클릭)의 상위 요소에 이벤트 리스너를 추가합니다.
3. 이벤트 핸들러 내에서 클릭한 요소가 특정 선택기 또는 해당 상위 요소와 일치하는지 확인합니다. 요소가 선택자와 일치합니다.
4. 조건이 만족되면 원하는 기능을 실행하거나 action.

예: jQuery 코드 위임

다음 jQuery 코드를 고려하세요.

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

이 코드를 바닐라 JavaScript로 변환하려면 , 다음을 사용합니다.

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

이 코드에서는 다음을 사용합니다. querySelector()를 사용하여 ID가 ​​main인 상위 요소를 찾고 여기에 클릭 이벤트 리스너를 연결합니다. 이 상위 요소 내의 요소를 클릭하면 클릭한 요소 또는 해당 상위 요소에 .focused 클래스가 있는지 확인합니다. 그렇다면 settingsPanel() 함수를 호출합니다.

위임의 이점:

• 향상된 성능: 이벤트 리스너, 이벤트 처리 수 감소 함수.
• 단순화된 코드: 각 요소에 개별 이벤트 리스너를 사용하는 것에 비해 유지 관리 및 이해가 더 쉽습니다.
• 유연성: 동적 바인딩 허용 선택기를 기반으로 하는 이벤트 핸들러를 사용하여 동적으로 추가하거나 제거할 수 있는 요소의 이벤트를 처리할 수 있습니다.

위 내용은 이벤트 위임은 바닐라 JavaScript 성능과 코드 단순성을 어떻게 향상시킬 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!