찾다

집 >웹 프론트엔드 >JS 튜토리얼 >Javascript_javascript 스킬을 활용한 리스너 추가 및 삭제 방법에 대한 자세한 설명

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

WBOY
WBOY원래의
2016-05-16 16:25:401738검색

이 기사의 예에서는 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< fns.length;i ) {
if (fns[i] 인스턴스of 함수) {
fns[i].call(this,evt);//并且将其数数
//这样이 사건에서 处理函数内部就可以使用统一的 方法访问事件对象了 } } };
<…


复代码 代码如下:



test6.html