So entfernen Sie EventListener mit der im EventLizenzer definierten Funktion?

Question

Ich habe Event-Listener mit Funktion innerhalb der Ereignis-Listener definiert als:

$("body")[0].addEventListener("click", function my3(){alert(786)}); 

Wenn ich jetzt versuchen, diese Eventlistener zu entfernen:

$("body")[0].removeEventListener("click", function my3); 

ich den Fehler, dass my3 nicht definiert ist. Gibt es eine Möglichkeit, diese Art von Ereignislistenern zu entfernen oder my3 Funktion außerhalb des Ereignis-Listener zu definieren ist der einzige Weg ?.

Answer 1

Gibt es eine Möglichkeit, diese Art von Ereignis-Listenern zu entfernen ...

Nein, nicht mit addEventListener/removeEventListener. Aber du hast jquery getaggt, also lies weiter, denn du kannst mit jQuery.

... oder die my3-Funktion außerhalb des Ereignis-Listeners zu definieren ist der einzige Weg?

Es ist der einzige Weg mit addEventListener/. Sie benötigen müssen einen Verweis auf die Funktion haben, die hinzugefügt wurde, um es zu entfernen. Also:

// Declare the function 
function my3() { 
    alert(786); 
} 

// Add it 
$("body")[0].addEventListener("click", my3); 

// Later, remove it 
$("body")[0].removeEventListener("click", my3); 

Sie haben Ihre Frage jquery markiert, also werde ich beachten Sie, dass das nicht wahr der Handler mit jQuery angebracht, weil jQuery seine eigene Liste von Event-Handler unterhält, anstatt mit dem nativen DOMs Liste. Das bedeutet, dass Sie alle Handler für ein Ereignis, die mit jQuery verknüpft wurden, aus einem Element entfernen können, ohne eine Referenz darauf zu haben, und/oder jQuery's "namespaced" -Ereignisse verwenden, um nur eine Teilmenge von ihnen zu entfernen, ohne Referenzen darauf zu haben .

Zum Beispiel:

$("body").on("click.foo", function my3() { alert(786); }); 

Dort haben wir "Namespace" unser Click-Handler mit foo. Später können wir unsere Handler entfernen, ohne anderen Klick-Handler zu beeinflussen:

$("body").off("click.foo"); 

Einzelheiten in der Dokumentation zu on und off.

Answer 2

Eine weitere Option ist .onclick zu verwenden, in dem Sie den Handler mit document.body.onclick = null