Javascript_javascript 스킬을 활용한 리스너 추가 및 삭제 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

이 기사의 예에서는 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);//并且将其数数

//这样이 사건에서 处理函数内部就可以使用统一的 方法访问事件对象了 } } };

<…

复代码代码如下: