JS 이벤트 위임 예시에 대한 자세한 설명

이 글에서는 주로 JS 이벤트 위임 예제에 대한 자세한 설명을 공유합니다. 먼저 분석을 살펴보겠습니다. 이벤트 위임: 이벤트 프록시라고도 하며 버블링 원리를 사용하여 부모에 이벤트를 추가하여 실행 효과를 발생시킵니다. .

우선 이런 프로그램을 작성하셨을 겁니다. 마우스가 각 리로 이동하면 배경색이 빨간색으로 바뀌므로 다음과 같은 코드를 작성했습니다.

(제가 제공한 코드는 일반적으로 다음과 같습니다. 작성 키코드는 HTML로 직접 작성하셔도 됩니다.)

window.onload =  oUl = document.getElementById('ull' aLi = document.getElementsByTagName('li'); 
    ( i =0;i < aLi.length;i++=

물론 코드에는 문제가 없습니다. 루프를 통해 각 li에 이벤트를 추가하지만, li이 많으면 필요할까요? 이벤트를 여러 번 추가하려면? 실제로 성능이 많이 소모됩니다. 그러면 이벤트 하나만 추가하면 달성할 수 있을지 궁금해집니다. 물론 가능합니다. 그렇지 않으면 나는 그것에 대해 이야기하지 않을 것입니다.

이는 버블링 원칙을 통한 이벤트 위임입니다. 부모 oUL에만 이벤트를 추가할 수 있으므로 어떤 li가 이동하더라도 부모의 이동 이벤트가 트리거됩니다. 내 JS 버블링 기사를 참조하세요. 그러나 내 요구 사항은 전체 목록이 아닌 해당 li의 색상을 변경하는 것이므로 내 마우스가 어느 LI로 이동했는지 어떻게 알 수 있습니까? 시간, 범용 이벤트 개체 속성 중 하나가 나타나려고 합니다. 이는 이벤트 소스(이벤트가 바인딩된 요소에 관계없이 실제로 이벤트를 트리거하는 대상을 나타냄)이며, 이는 LI를 가져올 수 있습니다. 현재 마우스 위치는

그러나 이는 IE와 표준 사이에 호환성 문제가 있습니다. 표준은 최신 버전의 브라우저를 참조합니다.

IE: window.event.srcElement
Standard: event.target

그래서 호환성이 필요합니다. , 이는 또한 매우 간단합니다.

아래 전체 코드를 보세요.

window.onload = function(){ 
    var oUl = document.getElementById('ull');     var aLi = document.getElementsByTagName('li');

  oUl.onmouseover = function(ev){ 
     var event = ev||window.event;  // 获取event对象     var target = ev.target || ev.srcElement; // 获取触发事件的目标对象    
     if(target.nodeName.toLowerCase() == 'li'){  //判断目标对象是不是li
         target.style.background = 'red';
     }

  }
代码中加了一个标签名的判断，主要原因是如果不加判断，当你鼠标移入到父级oUL上面的时候，整个列表就会变红，这不是我们想要的结果，所以要判断一下。

target.nodeName 弹出的名字是大写的，所以需要转换大小写再比较。

이렇게 하면 전체 요구 사항이 완성되고, 목록이 많을 때 성능이 크게 향상됩니다.

사실 이벤트 위임에는 두 번째 장점이 있습니다. 새로 추가된 요소에는 이전 이벤트도 포함됩니다.

또 다른 요구 사항이 있다고 가정하고, 버튼을 클릭하고, 이때 목록에 다른 li를 생성합니다. 새로 생성된 li에는 이벤트가 추가되지 않아 이동하여 빨간색으로 바뀌는 기능이 없습니다. 그러나 이벤트 위임 방식을 사용하면 새 li에도 이 이벤트가 있습니다. 아버지에게 이벤트가 추가되기 때문에 원리를 적용하는 것도 매우 쉽습니다. 아버지가 있으면 이벤트도 거기에 있으므로 직접 테스트해 볼 수 있습니다.

관련 추천:

js의 이벤트 버블링, 이벤트 캡처 및 이벤트 위임이란 무엇입니까

이벤트 캡처 및 버블링과 이벤트 위임 비교 분석

Javascript 이벤트 위임에 대한 자세한 설명

위 내용은 JS 이벤트 위임 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!