Javascript_javascript 스킬을 활용한 리스너 추가 및 삭제 방법에 대한 자세한 설명

이 기사의 예에서는 Javascript를 사용하여 리스너를 추가하고 삭제하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

js의 이벤트 모니터링은 addEventListener를 사용하여 이벤트를 바인딩하는 것입니다. 이 사용법은 jquery에서 매우 일반적이고 간단하지만 기본 js에서는 더 복잡합니다. 참조.

이틀 전 플레이어 작업을 할 때 모니터를 추가하고 삭제한 후 약간의 문제가 발생했습니다. 살펴보니 매개변수가 완전히 일치해야 합니다. 완전한 대응은 다른 말로 하면:

코드 복사 코드는 다음과 같습니다.

$('.video')[0].addEventListener('timeupdate ', currentTimeHandler, true);

예를 들어, 이 문장에서는 삭제할 수 있도록 세 개의 매개변수를 전달해야 합니다. 왜 이렇게 되어야 할까요? 네, 여기서 괴로운 부분이 있습니다.
추가 및 제거시 세 번째 매개변수는 작성할 필요가 없지만 이때 기본 조건은 다릅니다! !

일반적으로 addEventListener는 false입니다...
1. 맞춤 이벤트 리스너 추가

코드 복사 코드는 다음과 같습니다.

var eventHandlesCounter=1;//이벤트 수 계산 청취자 추가됨, 예약된 비트로 0
함수 addEvent(obj,evt,fn){
If(!fn.__EventID){ fn.__EventID=eventHandlesCounter;}
If(!obj.__EventHandles){ obj.__EventHandles=[] }
If(!obj.__EventHandles[evt]){
              obj.__EventHandles[evt]=[];
If(obj["on" evt] 인스턴스of 함수){
                obj.__EventHandles[evt][0]=obj["on" evt];
                 obj["on" evt]=handleEvents;
           }
}
        obj.__EventHandles[evt][fn.__EventID]=fn;

        함수 handlerEvents(){
        var fns = obj.__EventHandles[evt];
for (var i=0;i                                 fns[i].call(this);
}
}

2. 삭제 이벤트 모니터링 사용자 지정

코드 복사 코드는 다음과 같습니다.

function delEvent(obj,evt,fn){
if(!obj.__EventHandles || !obj.__EventHandles[evt] || !fn.__EventID){
거짓을 반환합니다.
}
if(obj.__EventHandles[evt][fn.__EventID]==fn){
obj.__EventHandles 삭제[evt][fn.__EventID];
}
}

3.위 방법을 수정하세요

코드 복사 코드는 다음과 같습니다.

함수 addEvent(obj,evt,fn,useCapture){
    if(obj.addEventListener){//优先使用W3C事件注册
       obj.addEventListener(evt,fn,!!useCapture);
    }그밖에{
       if(!fn.__EventID){fn.__EventID = addEvent.__EventHandlesCounter ;}
       if(!obj.__EventHandles){ obj.__EventHandles=[];}
       if(!obj.__EventHandles[evt]){
           obj.__EventHandles[evt]=[];
           if(obj["on" evt]){
              (obj.__EventHandles[evtype][0]=obj["on" evtype]).__EventID=0;
           }
           obj["on" evtype]=addEvent.execEventHandles;
       }
    }
}
addEvent.__EventHandlesCounter=1;
addEvent.execEventHandles = 함수(evt){
    if(!this.__EventHandles) {return true;}
    evt = evt || window.event;
    var fns = this.__EventHandles[evt.type];
    for (var i=0;i        if(fns[i] 인스턴스of 함수){
           fns[i].call(this);
       }
    }
};
함수 delEvent(obj,evt,fn,useCapture){
   if (obj.removeEventListener) {//先使사용 W3C적 방법移除事件处理函数        
       obj.removeEventListener(evt,fn,!!useCapture);
   }그밖에 {
      if(obj.__EventHandles){
         var fns = obj.__EventHandles[evt];
         if(fns){fns 삭제[fn.__EventID];}
      }
}

4、标准化事件对象

复主代码 代码如下:

function fixEvent(evt){
   if(!evt.target){
      evt.target = evt.srcElement;
      evt.preventDefault=fixEvent.preventDefault;
      evt.stopPropagation = fixEvent.stopPropagation;
      if(evt.type == "mouseover"){
         evt.관련Target = evt.fromElement;
      }else if(evt.type == "mouseout"){
         evt.관련Target = evt.toElement;
      }
      evt.charCode =(evt.type == "keypress")?evt.keyCode:0;
      evt.eventPhase = 2;
      evt.timeStamp = (new Date()).getTime();
   }
이벤트 반환;
}
fixEvent.preventDefault=function(){ this.returnValue=false;}
fixEvent.stopPropagation=function(){this.cancelBubble = true;};

fixEvent는 옳지 않습니다. Event函数의 execEventHandles리면。

复代码码 代码如下:

addEvent.execEventHandles = function(evt) {//遍历所有的事件处理函数并执行
if (!this.__EventHandles) {return true;}
evt = fixEvent(evt || window.event);//지금 여기에서 var fns = this.__EventHandles[evt.type];
for (var i=0;i if (fns[i] 인스턴스of 함수) {
fns[i].call(this,evt);//并且将其数数
//这样이 사건에서 处理函数内部就可以使用统一的 方法访问事件对象了 } } };

复代码 代码如下:

머리>




본문>

여기서 document.getElementById("1").attachEvent("onclick",test);는 동적 이벤트 바인딩에 사용되며

은 코드 복사에 사용됩니다코드는 다음과 같습니다.

document.getElementById("1").detachEvent("onclick",test)

동적 시간을 취소하여 이 이벤트가 한 번만 응답할 수 있도록 하고 다음 번에는 버튼이 다시 클릭되지 않도록 합니다. 어떤 효과가 있나요? 생산하다.
다음은 입력이 숫자인지 확인하기 위해 항상 키보드 이벤트를 모니터링하는 또 다른 데모입니다. 숫자가 아닌 경우 동적으로 메시지를 표시한 다음 입력을 거부합니다.

코드 복사 코드는 다음과 같습니다.

도기/ /EN">




머리>


숫자를 입력하세요
본문>

여기서 이벤트는 많은 정보를 반환할 수 있는 이벤트 객체입니다. 자세한 내용은 관련 문서를 참고하세요.

보충사항: 이벤트 모니터링 호환성

1. IE는 AttachEvent/detachEvent 메소드를 사용하여 이벤트 리스너를 추가하고 제거합니다. w3c는 addEventListener/removeEventListener 메소드를 사용합니다.
2. IE는 이벤트에 대해 onevent 명명 방법을 사용하는 반면 w3c는 이벤트 명명 방법을 사용합니다.
3. IE 이벤트 리스너는 전역 이벤트 객체를 사용하는 반면, w3c는 이벤트 객체를 리스너에 매개변수로 전달합니다.
4. 기본 이벤트 동작의 트리거를 방지하기 위해 IE에서는 프로그래머가 Event 개체의 returnValue 속성 값을 false로 설정하도록 요구하는 반면, w3c의 접근 방식은 PreventDefault 메서드를 실행하는 것입니다.
5. IE는 이벤트 캡처 단계를 지원하지 않습니다.
6. 이벤트 전달을 중지하기 위해 IE의 접근 방식은 이벤트 개체의 cancelBubble을 true로 설정하는 반면, w3c의 접근 방식은 stopPropagation 메서드를 설정하고 실행하는 것입니다.
7. IE는 이벤트 리스너를 독립적인 함수로 호출하지만 w3c에서는 객체의 메서드로 호출합니다. 이는 IE의 이벤트 리스너에 있는 this 키워드가 이벤트 객체를 가리키는 것이 아니라 쓸모없는 전역 객체를 가리키는 것을 의미합니다. 개체(창 개체).
8. IE에서는 이벤트 리스너를 사용할 때 메모리 누수 문제가 있습니다. IE 브라우저에서 요소에 대한 이벤트 리스너를 생성하고 리스너의 요소를 사용하려는 경우 사용자가 다른 페이지에 들어가기 전에 리스너 및 관련 DOM 노드가 차지하는 메모리 공간이 해제되지 않습니다.

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.