Analyse von addEventListener() und removeEventListener() in js

In diesem Artikel werden hauptsächlich addEventListener() und removeEventListener() ausführlich vorgestellt, die zum Angeben und Löschen von Ereignishandlern verwendet werden. Interessierte Freunde können sich darauf beziehen

addEventListener () und removeEventListener() werden zum Festlegen und Entfernen von Event-Handler-Operationen verwendet.
Alle DOM-Knoten enthalten diese beiden Methoden und beide akzeptieren drei Parameter: den Namen des zu verarbeitenden Ereignisses, die Funktion als Ereignishandler und einen booleschen Wert.

Der letzte boolesche Parameter ist wahr, was bedeutet, dass der Ereignishandler in der Erfassungsphase aufgerufen wird.
Wenn er falsch ist (falsch-Standard), bedeutet dies, dass der Ereignishandler in der Phase aufgerufen wird Blasenphase.

addEventListener hat insgesamt drei Parameter:
element.addEventListener(type, listener, useCapture)

Das Folgende ist im Detail Erklärung:
1. Element ist das Objekt, an das die Funktion gebunden ist.
2. Typ ist der Ereignisname. Es ist zu beachten, dass „onclick“ in „click“ und „onblur“ in „blur“ geändert werden sollte, was bedeutet, dass der Ereignisname kein „on“ enthalten sollte. .
3. Der Listener ist natürlich eine gebundene Funktion.
Der letzte Parameter ist ein boolescher Wert, der die Antwortsequenz des Ereignisses angibt. useCapture ).

Um einen Ereignishandler für das Klickereignis auf einer Schaltfläche hinzuzufügen, können Sie den folgenden Code verwenden:

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
  alert(this.id);
}, false);

Ereignishandler auf DOM2-Ebene hinzufügen Methode Der Hauptvorteil besteht darin, dass Sie mehrere Ereignishandler hinzufügen können. Betrachten Sie das folgende Beispiel:

var btn = document.getElementById("myBtn");

btn.addEventListener("click", function () {
  alert(this.id);
}, false);  
btn.addEventListener("click", function () {
  alert("Hello World");
}, false);

Über addEventListener() hinzugefügte Ereignishandler können nur mit removeEventListener() entfernt werden.

move Die übergebenen Parameter beim Teilen sind die gleichen wie beim Hinzufügen des Handlers.
Dies bedeutet auch, dass anonyme Funktionen, die über addEventListener() hinzugefügt wurden, nicht entfernt werden können, wie im folgenden Beispiel gezeigt:

var btn = document.getElementById("myBtn");

btn.addEventListener("click", function () {
   alert(this.id);
}, false);
btn.removeEventListener("click", function () { //无效！
   alert(this.id);
}, false);

In In diesem Beispiel füge ich einen Event-Handler mit addEventListener() hinzu.
Obwohl der Aufruf von „removeEventListener“ dieselben Parameter zu verwenden scheint
, ist der zweite Parameter tatsächlich eine völlig andere Funktion als die, die an addEventListener() übergeben wird.
Die an „removeEventListener()“ übergebene Event-Handler-Funktion muss mit der an addEventListener() übergebenen identisch sein,

Wie im folgenden Beispiel gezeigt:

var btn = document.getElementById("myBtn");
var handler = function () {
   alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); //有效！

Bei diesem umgeschriebenen Beispiel gibt es kein Problem, da in addEventListener() und removeEventListener() dieselbe Funktion verwendet wird.
Das experimentelle Ergebnis ist, dass, wenn der Benutzer auf die Schaltfläche klickt, jedes Mal „Ich wurde angeklickt!“ ausgegeben wird, was darauf hinweist, dass die Funktion „removeEventListener()“ nicht funktioniert.

Ziehen Sie Schlussfolgerungen, indem Sie nach Informationen suchen. Bei Verwendung der Funktion „removeEventListener()“ muss die Handler-Funktion mit der Handler-Funktion in addEventListener() identisch sein.

Der oben geschriebene Code ist also falsch. Der korrigierte Code sollte wie folgt lauten:

//addEventListener()和removeEventListener()中handler函数必须相同，移除事件函数才有效。
function myhandler(){
  console.log("I have been clicked!");
  document.getElementById('info').removeEventListener('click',myhandler,false);
}
var target=document.getElementById('info');
target.addEventListener("click", myhandler, false);
target.removeEventListener("click", myhandler, false); //有效！

Studenten, die js lernen müssen, achten bitte auf die chinesische PHP-Website js-Video-Tutorial, viele js Online-Video-Tutorials Das Ansehen ist kostenlos!

Das obige ist der detaillierte Inhalt vonAnalyse von addEventListener() und removeEventListener() in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!