DOM 이벤트 위임의 정의 및 설명

Question

누군가 JavaScript의 이벤트 위임과 그 역할에 대해 설명해 주실 수 있나요?

P粉593649715 · Answer

DOM 이벤트 위임은 각 하위 요소가 아닌 단일 공통 상위 요소를 통해 UI 이벤트에 응답하는 메커니즘으로, 이벤트 "버블링"(이벤트 전파라고도 함)이라는 마법을 통해 달성됩니다.

요소에서 이벤트가 트리거되면 다음이 발생합니다:

이벤트 버블링은 브라우저에서 이벤트 위임을 위한 기반을 제공합니다. 이제 이벤트 핸들러를 단일 상위 요소에 바인딩할 수 있으며 하위 노드에서 이벤트가 발생할 때마다 핸들러가 해당 하위 요소와 함께 실행됩니다. 이벤트 위임입니다. 다음은 실제적인 예입니다:

으아아아

이 예에서는 하위

节点，您将看到一个"click!"的警告，即使没有将

上的点击处理程序绑定。如果我们将onclick="..."绑定到每个

를 클릭하면 동일한 효과를 얻을 수 있습니다.

그럼 어떤 혜택이 있나요?

이제 DOM 조작을 통해 위 목록에 새

항목을 동적으로 추가해야 한다고 가정해 보겠습니다.

으아아아

이벤트 위임을 사용하지 않는 경우 "onclick" 이벤트 핸들러를 새 "onclick"事件处理程序到新的

元素上，以使其与其兄弟元素表现相同。使用事件委托，您不需要做任何事情。只需将新的

요소에 다시 바인딩하여 형제 요소와 동일하게 동작하도록 해야 합니다. 이벤트 위임을 사용하면 아무 것도 할 필요가 없습니다. 목록에 새

를 추가하면 작업이 완료됩니다.

이 기능은 새 요소가 DOM에서 동적으로 생성 및/또는 제거되는 많은 요소에 바인딩된 이벤트 핸들러가 있는 웹 애플리케이션에 적합합니다. 이벤트 위임을 사용하면 이벤트 바인딩 수를 크게 줄여 이를 공통 상위 요소로 이동할 수 있으며, 요소를 동적으로 생성하는 코드를 해당 요소를 바인딩하는 이벤트 핸들러의 논리에서 분리할 수 있습니다.

이벤트 위임의 또 다른 이점은 이벤트 바인딩 수가 줄어들기 때문에 이벤트 리스너가 사용하는 총 메모리 공간이 줄어든다는 것입니다. 자주 언로드되는 작은 페이지(즉, 사용자가 다른 페이지로 자주 이동하는 경우)의 경우 이는 큰 영향을 미치지 않을 수 있습니다. 그러나 수명이 긴 애플리케이션의 경우 이는 중요할 수 있습니다. DOM에서 요소가 제거될 때 요소가 여전히 메모리를 차지하는 경우(즉, 누출)를 추적하기 매우 어려운 경우가 있으며, 이러한 누출된 메모리는 이벤트 바인딩과 관련된 경우가 많습니다. 이벤트 위임을 사용하면 이벤트 리스너를 "바인딩 해제"하는 것을 잊어버릴 염려 없이 하위 요소를 자유롭게 삭제할 수 있습니다(리스너는 상위 요소에 있으므로). 이러한 유형의 메모리 누수는 억제될 수 있습니다(완전히 제거되지는 않더라도 때로는 수행하기가 매우 어렵습니다. IE, 잘 보고 있습니다).

다음은 더 나은 이벤트 위임의 구체적인 코드 예입니다. 🎜

JavaScript 이벤트 위임 작동 방식
이벤트 위임과 이벤트 처리 비교
jQuery.delegate는 이벤트 대리자 + 선택기 사양입니다
jQuery.on선택기를 두 번째 매개변수로 전달할 때 이벤트 위임을 사용하세요
JavaScript 라이브러리 없이 이벤트 위임
클로저 대 이벤트 위임: 이벤트 위임을 사용하도록 코드를 변환하지 않는 의 장점을 살펴보세요
PPK가 발견한 흥미로운 방법Delegationfocus和blurEvent(버블되지 않음)