Ausführliche Erklärung zum Hinzufügen und Löschen von Listenern mithilfe von Javascript_Javascript-Kenntnissen-js-Tutorial-php.cn

Das Beispiel in diesem Artikel beschreibt die Verwendung von Javascript zum Hinzufügen und Löschen von Listenern. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Bei der Ereignisüberwachung in js wird addEventListener verwendet, um ein Ereignis zu binden. Diese Verwendung ist in jquery sehr verbreitet und einfach, in nativem js ist sie jedoch komplizierter. Hier sind die Tests und Beispiele für jede Methode des addEventListener-Ereignisses Referenz.

Als ich vor zwei Tagen an dem Player arbeitete, stieß ich auf ein kleines Problem, nachdem ich ihn hinzugefügt und gelöscht hatte. Nachdem ich ihn mir angesehen hatte, stellte ich fest, dass die Parameter vollständig übereinstimmen mussten bedeutet vollständige Übereinstimmung? Mit anderen Worten:

Code kopieren Der Code lautet wie folgt:

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

In diesem Satz müssen beispielsweise drei Parameter übergeben werden, damit er gelöscht werden kann. Ja, der schmerzhafte Teil ist hier:
Beim Hinzufügen und Entfernen muss der dritte Parameter nicht geschrieben werden, aber die Standardbedingungen sind zu diesem Zeitpunkt unterschiedlich! !

Normalerweise ist addEventListener falsch...
1. Benutzerdefinierten Ereignis-Listener hinzufügen

Code kopieren Der Code lautet wie folgt:

var eventHandlesCounter=1;//Zähle die Anzahl der Ereignisse Zuhörer hinzugefügt, 0 als reserviertes Bit

Funktion 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] Instanz der Funktion){

                obj.__EventHandles[evt][0]=obj["on" evt];

                 obj["on" evt]=handleEvents;

           }

}

        obj.__EventHandles[evt][fn.__EventID]=fn;

        Funktion handleEvents(){

        var fns = obj.__EventHandles[evt];

für (var i=0;i
                                  fns[i].call(this);

}

}

2. Passen Sie die Löschereignisüberwachung an

Code kopieren Der Code lautet wie folgt:

function delEvent(obj,evt,fn){

if(!obj.__EventHandles || !obj.__EventHandles[evt] || !fn.__EventID){

Gibt false zurück;

}

if(obj.__EventHandles[evt][fn.__EventID]==fn){

Löschen Sie obj.__EventHandles[evt][fn.__EventID];

}

}

3. Ändern Sie die obige Methode

Code kopieren Der Code lautet wie folgt:

Funktion addEvent(obj,evt,fn,useCapture){

    if(obj.addEventListener){//优先使用W3C事件注册

       obj.addEventListener(evt,fn,!!useCapture);

    }else{

       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 = function(evt){

    if(!this.__EventHandles) {return true;}

    evt = evt || window.event;

    var fns = this.__EventHandles[evt.type];

    für (var i=0;i
       if(fns[i] Instanz der Funktion){

           fns[i].call(this);

       }

    }

};

Funktion delEvent(obj,evt,fn,useCapture){

   if (obj.removeEventListener) {//先使用W3C的方法移除事件处理函数         

       obj.removeEventListener(evt,fn,!!useCapture);

   }else {

      if(obj.__EventHandles){

         var fns = obj.__EventHandles[evt];

         if(fns){delete 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.latedTarget = evt.fromElement;

      }else if(evt.type == "mouseout"){

         evt.latedTarget = evt.toElement;

      }

      evt.charCode =(evt.type == "keypress")?evt.keyCode:0;

      evt.eventPhase = 2;

      evt.timeStamp = (new Date()).getTime();

   }

return evt;

}

fixEvent.preventDefault=function(){ this.returnValue=false;}

fixEvent.stopPropagation=function(){this.cancelBubble = true;};

fixEvent函数不是单独执行的，它必须有一个事件对象参数，而且只有事件发生时它才被执行！最Fügen Sie die Funktion „addEvent“ hinzu und verwenden Sie „execEventHandles“.

复制代码代码如下:

addEvent.execEventHandles = function (evt) {//遍历所有的事件处理函数并执行

if (!this.__EventHandles) {return true;}

evt = fixEvent(evt || window.event);//在这里对其进行标准化操作

var fns = this.__EventHandles[evt.type];

für (var i=0;i< fns.length;i ) {

if (fns[i] Instanz der Funktion) {

fns[i].call(this,evt);//并且将其作为事件处理函数的第一个参数

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

上面是高手写了，下面整理几个实际的监听事情的例子

复制代码代码如下:

test6.html

Hier wird document.getElementById("1").attachEvent("onclick",test); für die dynamische Ereignisbindung verwendet und

zum Kopieren des Codes Der Code lautet wie folgt:

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

Brechen Sie die dynamische Zeit ab, sodass auf dieses Ereignis nur einmal reagiert werden kann und beim nächsten Mal nicht erneut auf die Schaltfläche geklickt wird Welche Auswirkung hat es? produzieren.
Nachfolgend finden Sie eine weitere Demonstration der jederzeitigen Überwachung von Tastaturereignissen, um festzustellen, ob es sich bei der Eingabe um eine Zahl handelt. Wenn es sich nicht um eine Zahl handelt, erfolgt eine dynamische Eingabeaufforderung und die anschließende Ablehnung der Eingabe

Code kopieren Der Code lautet wie folgt:

test7.html

Bitte geben Sie eine Zahl ein

Das Ereignis hier ist ein Ereignisobjekt, das viele Informationen zurückgeben kann. Einzelheiten finden Sie in den entsprechenden Dokumenten.

Ergänzung: Kompatibilität bei der Ereignisüberwachung

1. IE verwendet die Methode attachmentEvent/detachEvent, um Ereignis-Listener hinzuzufügen und zu entfernen; w3c verwendet die Methode addEventListener/removeEventListener.
2. IE verwendet für seine Ereignisse die Onevent-Benennungsmethode, während w3c die Ereignis-Benennungsmethode verwendet.
3. Der IE-Ereignis-Listener verwendet ein globales Ereignisobjekt, während w3c das Ereignisobjekt als Parameter an den Listener übergibt.
4. Um das Auslösen des Standardereignisverhaltens zu vermeiden, verlangt IE von Programmierern, den Attributwert returnValue im Event-Objekt auf false zu setzen, während der Ansatz von w3c darin besteht, die Methode PreventDefault auszuführen.
5. IE bietet keine Unterstützung für die Ereigniserfassungsphase.
6. Um die Ereigniszustellung zu stoppen, besteht der Ansatz von IE darin, die cancelBubble des Ereignisobjekts auf true zu setzen, während der Ansatz von w3c darin besteht, die Methode stopPropagation festzulegen und auszuführen.
7. IE ruft den Ereignis-Listener als unabhängige Funktion auf, aber in w3c wird er als Methode des Objekts aufgerufen. Dies bedeutet, dass das Schlüsselwort this im Ereignis-Listener im IE nicht auf das Ereignisobjekt, sondern auf ein nutzloses globales Objekt verweist Objekt (Fensterobjekt).
8. IE hat ein Speicherverlustproblem bei der Verwendung von Ereignis-Listenern. Wenn Sie im IE-Browser einen Ereignis-Listener für ein Element erstellen und das Element im Listener verwenden möchten, wird der vom Listener und den zugehörigen DOM-Knoten belegte Speicherplatz nicht belegt, bevor der Benutzer andere Seiten betritt.

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.