Heim > Web-Frontend > js-Tutorial > Hauptteil

Analyse von addEventListener() und removeEventListener() in js

零下一度
Freigeben: 2017-04-22 10:05:15
Original
2123 Leute haben es durchsucht

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);
Nach dem Login kopieren

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);
Nach dem Login kopieren

Ü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);
Nach dem Login kopieren

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); //有效!
Nach dem Login kopieren

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); //有效!
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!