js의 바인딩 이벤트 및 바인딩 해제 이벤트에 대한 자세한 설명

이 글에서는 주로 js 바인딩 이벤트와 언바인딩 이벤트 관련 지식을 소개합니다. 매우 좋은 참조 값을 가지고 있습니다. 아래 에디터를 살펴보겠습니다

js에서 여러 이벤트를 바인딩하는 데는 attachmentEvent와 addEventListener라는 두 가지 방법이 사용되는데, 이 두 가지 방법에는 차이가 있습니다

attachEvent 방법만 해당됩니다. IE678 지원, 다른 브라우저와 호환되지 않음

addEventListener 메소드는 Firefox 및 Google과 호환되지만 IE8 이하에서는 호환되지 않음

addEventListener 메소드

p.addEventListener('click',fn);

p.addEventListener('click',fn2);
function fn(){ console.log("春雨绵绵"); }

function fn2(){
        console.log("到处潮湿");
      }

attachEvent 메소드

p.attachEvent('onclick',fn);
p.attachEvent('onclick',fn2);
function fn(){ console.log("春雨绵绵"); }
function fn2(){
        console.log("到处潮湿");
      }

참고: attachmentEvent 메소드로 바인딩된 이벤트는 on이 있고, addEventListener로 바인딩된 이벤트는 on이 없습니다.

아래에 IE 및 Firefox Google의 메소드와 호환되는 이벤트를 작성했습니다

var p=document.getElementsByTagName("p")[0];
      addEvent('click',p,fn)
      function addEvent(str,ele,fn){
        ele.attachEvent?ele.attachEvent('on'+str,fn):ele.addEventListener(str,fn);
      }
      function fn(){
        console.log("春雨绵绵");
      }

이것은 호환성 문제를 완벽하게 해결합니다

바인딩 이벤트가 있으면 언바인딩 이벤트가 있어야 하는데 언바인딩 이벤트와 바인딩 이벤트도 마찬가지입니다. 사악한 IE는 여전히 특수화를 만듭니다

detachEvent 메소드는 IE678만 지원하며 다른 브라우저와 호환되지 않습니다

removeEventListener 메소드 Firefox 및 Google과 호환되지만 호환되지 않습니다. IE8 이하 호환

detachEvent 메소드 작성:

ele.detachEvent("onclick",fn);

removeEventListener 작성 방법:

ele.removeEventListener("click",fn);

아래에는 참조 및 구현을 위한 호환성 방법을 작성했습니다. 또한 매우 간단합니다

function remove(str,ele,fn){
        ele.detachEvent?ele.detachEvent("on"+str,fn):ele.removeEventListener(str,fn);
      }

참고: 이벤트 attachmentEvent 바인딩이든 이벤트 detachEvent 삭제든 추가해야 합니다. RemoveEventListenser 및 addEventListenser는 추가할 필요가 없습니다.

위 내용은 js의 바인딩 이벤트 및 바인딩 해제 이벤트에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!