jfriend00의 답변에 몇 가지 언급과 반론을 추가하고 싶습니다. (주로 내 직감에 근거한 나의 의견)
아니오-위임 된 모든 이벤트 핸들러를 문서 오브젝트에 바인드해서는 안됩니다. 아마도 당신이 만들 수있는 최악의 시나리오 일 것입니다.
먼저, 이벤트 위임이 항상 코드를 더 빨리 만드는 것은 아닙니다. 어떤 경우에는 유리하며 어떤 경우에는 그렇지 않습니다. 실제로 이벤트 위임이 필요할 때와 그로부터 혜택을받을 때 이벤트 위임을 사용해야합니다. 그렇지 않으면 이벤트 처리기가 일반적으로 더 효율적이므로 이벤트 처리기가 이벤트가 발생하는 개체에 직접 바인딩되어야합니다.
단일 요소에 대해서만 등록하고 이벤트를 진행할 경우 성능이 약간 향상 될 수는 있지만, 위임이 가져 오는 확장 성 이점과 비교할 필요는 없습니다. 나는 이것에 대한 증거가 없지만 브라우저가 이것을보다 효율적으로 처리 할 것이라고 믿습니다. 제 생각에, 이벤트 위임은 갈 길입니다!
둘째, 모든 위임 된 이벤트를 문서 수준에서 바인딩해서는 안됩니다. 이것이 바로 .live ()가 더 이상 사용되지 않는 이유입니다.이 방법으로 묶인 이벤트가 많을 때 매우 비효율적입니다. 위임 된 이벤트 처리의 경우 동적이 아닌 가장 가까운 상위에 바인딩하는 것이 훨씬 효율적입니다.
나는 이것에 동의합니다. 이벤트가 컨테이너 내부에서만 발생한다고 100 % 확신하는 경우 이벤트를이 컨테이너에 바인딩하는 것이 합리적이지만 트리거 요소에 이벤트를 직접 바인딩하는 것에 대해서는 여전히 논쟁의 여지가 있습니다.
셋째, 위임으로 모든 이벤트가 작동하거나 모든 문제를 해결할 수있는 것은 아닙니다. 예를 들어, 입력 컨트롤에서 키 이벤트를 가로 채고 유효하지 않은 키가 입력 컨트롤에 입력되는 것을 차단하려면 이벤트가 위임 된 처리기로 버블 링 될 때까지 이벤트가 위임 된 이벤트 처리를 통해이를 수행 할 수 없습니다. 입력 컨트롤에 의해 처리되었으며 해당 동작에 영향을주기에는 너무 늦습니다.
이것은 단순히 사실이 아닙니다. 이 코드를 참조하십시오 : 펜 : https://codepen.io/pwkip/pen/jObGmjq
document.addEventListener('keypress', (e) => {
e.preventDefault();
});
문서에 키 누르기 이벤트를 등록하여 사용자가 입력하지 못하게하는 방법을 보여줍니다.
이벤트 위임이 필요하거나 유리한 경우는 다음과 같습니다.
이벤트를 캡처하는 오브젝트가 동적으로 작성 / 제거되는 경우 새 오브젝트를 작성할 때마다 이벤트 핸들러를 명시 적으로 리 바인드하지 않고 이벤트를 캡처하려고 할 때. 모두 정확히 동일한 이벤트 처리기를 원하는 많은 객체가있는 경우 (로트가 수백 이상인 경우). 이 경우 설정시 수백 개 이상의 직접 이벤트 핸들러가 아닌 하나의 위임 된 이벤트 핸들러를 바인드하는 것이 더 효율적일 수 있습니다. 위임 된 이벤트 처리는 직접 이벤트 처리기보다 런타임시 항상 효율적이지 않습니다.
https://ehsangazar.com/optimizing-javascript-event-listeners-for-performance-e28406ad406c 에서이 인용문으로 회신하고 싶습니다.
Event delegation promotes binding as few DOM event handlers as possible, since each event handler requires memory. For example, let’s say that we have an HTML unordered list we want to bind event handlers to. Instead of binding a click event handler for each list item (which may be hundreds for all we know), we bind one click handler to the parent unordered list itself.
또한 인터넷 검색을 사용 performance cost of event delegation google
하면 이벤트 위임을 위해 더 많은 결과를 얻을 수 있습니다.
문서의 모든 요소에서 발생하는 이벤트를 문서의 상위 레벨에서 캡처하려고 할 때. 디자인에서 명시 적으로 이벤트 버블 링 및 stopPropagation ()을 사용하여 페이지의 일부 문제 또는 기능을 해결하는 경우 이것을 조금 더 이해하려면 jQuery 위임 이벤트 핸들러의 작동 방식을 이해해야합니다. 이런 식으로 전화하면 :
$ ( "# myParent"). on ( 'click', 'button.actionButton', myFn); #myParent 객체에 일반 jQuery 이벤트 핸들러를 설치합니다. click 이벤트가이 위임 된 이벤트 처리기로 버블 링되면 jQuery는이 객체에 연결된 위임 된 이벤트 처리기 목록을 살펴보고 이벤트의 시작 요소가 위임 된 이벤트 처리기의 선택기와 일치하는지 확인해야합니다.
선택기가 상당히 관여 할 수 있기 때문에 jQuery는 각 선택기를 구문 분석 한 다음이를 원래 이벤트 대상의 특성과 비교하여 각 선택기와 일치하는지 확인해야합니다. 이것은 저렴한 작업이 아닙니다. 둘 중 하나만 있으면 큰 문제는 아니지만 모든 선택기를 문서 객체에 배치하고 모든 단일 버블 이벤트와 비교할 수백 개의 선택기가 있으면 이벤트 처리 성능이 크게 저하 될 수 있습니다.
이러한 이유로, 위임 된 이벤트 핸들러가 대상 오브젝트에 최대한 가깝도록 위임 된 이벤트 핸들러를 설정하려고합니다. 이는 각 위임 된 이벤트 핸들러를 통해 버블 링되는 이벤트 수가 줄어들어 성능이 향상됨을 의미합니다. 모든 버블 링 된 이벤트는 모든 위임 된 이벤트 처리기를 통과하고 가능한 모든 위임 된 이벤트 선택기에 대해 평가되어야하기 때문에 문서 객체에 모든 위임 된 이벤트를 배치하는 것은 최악의 성능입니다. 이것이 바로 .live ()가 더 이상 사용되지 않는 이유입니다. 이것이 .live ()가 수행 한 것이므로 매우 비효율적 인 것으로 판명되었습니다.
이것은 어디에 문서화되어 있습니까? 이것이 사실이라면 jQuery는 위임을 매우 비효율적 인 방식으로 처리하는 것으로 보이며 내 반론은 바닐라 JS에만 적용해야합니다.
여전히 :이 주장을 뒷받침하는 공식 출처를 찾고 싶습니다.
:: 편집하다 ::
jQuery가 실제로 매우 비효율적 인 방식으로 이벤트 버블 링을 수행하는 것처럼 보입니다 (IE8을 지원하기 때문에)
https://api.jquery.com/on/#event-performance
따라서 여기의 대부분의 논쟁은 바닐라 JS와 최신 브라우저에만 적용됩니다.