JavaScript -HTML-DOM-EventListener
Die Methode addEventListener()
Beispiel
Fügen Sie einen Ereignis-Listener hinzu, der ausgelöst wird, wenn ein Benutzer auf eine Schaltfläche klickt:
document.getElementById("myBtn").addEventListener("click", displayDate);
Die addEventListener()Methode fügt einen Ereignishandler an das angegebene Element an.
Die addEventListener()Methode hängt einen Ereignishandler an ein Element an, ohne vorhandene Ereignishandler zu überschreiben.
Sie können einem Element viele Event-Handler hinzufügen.
Sie können einem Element viele Ereignisbehandler des gleichen Typs hinzufügen, dh zwei "Klick"-Ereignisse.
Sie können Ereignis-Listener zu jedem DOM-Objekt hinzufügen, nicht nur zu HTML-Elementen. dh das Fensterobjekt.
Die addEventListener()Methode macht es einfacher zu steuern, wie das Ereignis auf Sprudeln reagiert.
Bei Verwendung der addEventListener()Methode wird das JavaScript vom HTML-Markup getrennt, um die Lesbarkeit zu verbessern, und Sie können Ereignis-Listener hinzufügen, auch wenn Sie das HTML-Markup nicht steuern.
Sie können einen Ereignis-Listener einfach entfernen, indem Sie die removeEventListener()Methode verwenden.
Syntax
element.addEventListener(event, function, useCapture);
Der erste Parameter ist der Typ des Ereignisses (wie „ click“ oder „ mousedown“ oder irgendein anderes HTML-DOM-Ereignis .)
Der zweite Parameter ist die Funktion, die wir aufrufen möchten, wenn das Ereignis eintritt.
Der dritte Parameter ist ein boolescher Wert, der angibt, ob Ereignis-Bubbling oder Ereigniserfassung verwendet werden soll. Dieser Parameter ist optional.
Beachten Sie, dass Sie das Präfix „on“ für das Ereignis nicht verwenden; Verwenden Sie „ click“ anstelle von „ onclick“.
Fügen Sie einem Element einen Event-Handler hinzu
Beispiel
Warnung "Hallo Welt!" wenn der Benutzer auf ein Element klickt:
element.addEventListener("click", function(){ alert("Hello World!"); });
Sie können auch auf eine externe "benannte" Funktion verweisen:
Beispiel
Warnung "Hallo Welt!" wenn der Benutzer auf ein Element klickt:
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
Fügen Sie dem gleichen Element viele Event-Handler hinzu
Mit addEventListener()dieser Methode können Sie viele Ereignisse zu demselben Element hinzufügen, ohne vorhandene Ereignisse zu überschreiben:
Beispiel
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
Sie können demselben Element Ereignisse unterschiedlichen Typs hinzufügen:
Beispiel
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
Fügen Sie dem Fensterobjekt einen Ereignishandler hinzu
Mit der addEventListener()Methode können Sie jedem HTML-DOM-Objekt wie HTML-Elementen, dem HTML-Dokument, dem Fensterobjekt oder anderen Objekten, die Ereignisse unterstützen, wie dem xmlHttpRequestObjekt, Ereignis-Listener hinzufügen.
Beispiel
Fügen Sie einen Ereignis-Listener hinzu, der ausgelöst wird, wenn ein Benutzer die Größe des Fensters ändert:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
Parameter übergeben
Verwenden Sie beim Übergeben von Parameterwerten eine "anonyme Funktion", die die angegebene Funktion mit den Parametern aufruft:
Beispiel
element.addEventListener("click", function(){ myFunction(p1, p2); });
Event Bubbling oder Event Capturing?
Es gibt zwei Arten der Ereignisweitergabe im HTML-DOM, Bubbling und Capturing.
Die Ereignisweitergabe ist eine Möglichkeit, die Elementreihenfolge zu definieren, wenn ein Ereignis auftritt. Wenn Sie ein <p>-Element in einem <div>-Element haben und der Benutzer auf das <p>-Element klickt, welches "Klick"-Ereignis sollte zuerst behandelt werden?
Beim Bubbling wird zuerst das Ereignis des innersten Elements behandelt und dann das äußere: Das Click-Ereignis des <p>-Elements wird zuerst behandelt, dann das Click-Ereignis des <div>-Elements.
Beim Erfassen wird zuerst das Ereignis des äußersten Elements behandelt und dann das innere: Das Klickereignis des <div>-Elements wird zuerst behandelt, dann das Klickereignis des <p>-Elements.
Mit der Methode addEventListener() können Sie den Verbreitungstyp angeben, indem Sie den Parameter "useCapture" verwenden:
addEventListener(event, function, useCapture);
Der Standardwert ist „false“, was die Bubbling-Propagation verwendet, wenn der Wert auf „true“ gesetzt ist, verwendet das Ereignis die Capturing-Propagation.
Beispiel
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Die Methode removeEventListener()
Die removeEventListener()Methode entfernt Ereignishandler, die mit der Methode addEventListener() angehängt wurden:
Beispiel
element.removeEventListener("mousemove", myFunction);
HTML-DOM-Ereignisobjektreferenz
Eine Liste aller HTML-DOM-Ereignisse finden Sie in unserer vollständigen HTML-DOM-Ereignisobjektreferenz .