So entfernen Sie anonyme Event-Handler in JavaScript

Wenn addEventListener() und attachmentEvent() zum Binden eines Event-Handlers an ein DOM-Element verwendet werden und eine anonyme Funktion übergeben wird, dann sind die entsprechenden RemoveEventListener() und detachEvent() vorhanden verwendet Dieser anonyme Handler kann nicht entbunden werden. Daher sollten wir bei der Verwendung einen Funktionsausdruck übergeben.

Wenn Sie also anonyme Funktionen zum Binden und Entbinden verwenden möchten, wie können Sie das Problem lösen?

Idee

Keine dieser beiden Funktionen akzeptiert anonyme Funktionen zum Aufheben der Bindung, sodass Sie sich bei der Verwaltung von Ereignissen nicht auf sie verlassen können. Daher definieren Sie ein benutzerdefiniertes Objekt zur Verarbeitung von Ereignissen.
Das Wesentliche eines Ereignishandlers ist, dass, wenn ein Ereignis auf einem Objekt auftritt, die Funktion ausgeführt wird, die das Ereignis abhört.

Ein DOM-Element kann Handler haben, die an mehrere Ereignistypen gebunden sind. Beispielsweise ändert sich die Farbe, wenn Sie klicken, und wird größer, wenn Sie mit der Maus darüber fahren.

Ein Ereignistyp kann an mehrere Ereignishandler gebunden sein. Wenn beispielsweise ein Mouseover erfolgt, ändert sich die Farbe und es wird größer.

Dieses Ereignisobjekt sollte also eine Eigenschaft haben, um alle an dieses DOM-Element gebundenen Ereignishandler zu speichern, und es sollte auch zwei Methoden geben, eine zum Hinzufügen und eine zum Entfernen.

{
    handlers:{
    type1:[handler1,handler2],
    type2:[handler1,handler2],    ...//其他事件类型和对应的事件处理函数
    },
    on:function(){},
    off:function(){}
}

Wenn ein Ereignis eintritt, werden alle Funktionen im Array des entsprechenden Ereignistyps in diesem Objekt aufgerufen.

Das Bindungsereignis besteht also darin, die Funktion zum entsprechenden Array hinzuzufügen, und das Entbindungsereignis besteht darin, die Funktion aus dem Array zu löschen.

Wie kann also sichergestellt werden, dass das richtige DOM-Element betrieben wird?

Natürlich sollte jedes DOM-Element ein solches Objekt benötigen, um seine eigenen Event-Handler zu verwalten. Wenn Sie dieses Ereignisverwaltungsobjekt zu einem Attribut des DOM-Elements machen, wird sichergestellt, dass das richtige DOM-Element ausgeführt wird.

Implementierung

Jedes DOM-Element erfordert ein solches Objekt und das in jedem Objekt () und off()-Methoden sind die gleichen, daher ist ein Konstruktor erforderlich, der diese beiden Methoden in sein Prototypobjekt einfügt.

    function EventManage() {
        this.handlers = {}
    }
    EventManage.prototype = {
        on: function (type, handler) {
            if (!this.handlers[type]) {
                this.handlers[type] = [handler]                return true //避免添加多个事件
            } else {
                this.handlers[type].push(handler)
            }
        },
        off: function (type, handler) {
            for (var i = 0; i < this.handlers[type].length; i++) {
                if (this.handlers[type][i].toString() == handler.toString()) {
                    this.handlers[type].splice(i, 1);
                }
            }
        }
    }

Mit diesen beiden Methoden kann jedes Objekt selbst Ereignishandler hinzufügen und entfernen. Um jedoch auf Ereignisse zu warten, müssen Sie sich weiterhin auf die von JavaScript bereitgestellten Methoden verlassen, also verwenden Sie addEventListner() und attachmentEvent() zum Lauschen auf Ereignisse:

    var EventUtil = {};
    EventUtil.on = function (ele, type, handler) {
        if (!ele.event) {
            ele.event = new EventManage();
            console.log(ele.event.handlers)
        }
        var isNewType = ele.event.on(type, handler);
        var fire = function () {            for (var i = 0; i < ele.event.handlers[type].length; i++) {
                ele.event.handlers[type][i]();
            }
        }        if (isNewType) {            if (ele.addEventListener) {
                ele.addEventListener(type, fire, false);
            } else {
                ele.attachEvent("on" + type, fire)
            }
        }
    }
    EventUtil.off = function (ele, type, handler) {
        ele.event.off(type, handler);
    }

Hier ist zu beachten, dass jedes Mal, wenn Sie EventUtil.on() verwenden, eine Feuerfunktion neu definiert wird und addEventListener() mehrere Ereignisse hinzufügt Derselbe Ereignistyp. Daher müssen Sie feststellen, ob dieser Ereignistyp neu ist. Wenn ja, verwenden Sie addEventListener(), um auf diesen Ereignistyp zu warten.

Verwendungsbeispiel:

var btn=document.getElementById(“btn”);
EventUtil.on(btn,”click”,function(){ 
  console.log(“11”);
}); EventUtil.on(btn,”click”,function(){ 
  console.log(“22”); }); EventUtil.off(btn,”click”,function(){ 
  console.log(“11”); });

Das obige ist der detaillierte Inhalt vonSo entfernen Sie anonyme Event-Handler in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!