Die addEventListener() Methode
Beispiel
Fügen Sie einen Ereignis-Listener, der ausgelöst wird, wenn ein Benutzer auf eine Schaltfläche klickt:
document.getElementById("myBtn").addEventListener("click", displayDate); Versuch es selber " Die addEventListener() Methode wird an der angegebenen Element einen Event - Handler.
Die addEventListener() Methode legt einen Event - Handler auf ein Element ohne Überspielen vorhandenen Event - Handler.
Sie können viele Event-Handler ein Element hinzuzufügen.
Sie können viele Event - Handler des gleichen Typs zu einem Element, das heißt zwei hinzufügen "click" auf "click" Ereignisse.
Sie können Ereignis-Listener zu jedem DOM-Objekt nicht nur HTML-Elemente hinzufügen. dh das Fensterobjekt.
Die addEventListener() Methode macht es leichter zu steuern , wie das Ereignis zu sprudelnden reagiert.
Bei Verwendung der addEventListener() Methode wird das JavaScript aus dem HTML - Markup getrennt, für eine bessere Lesbarkeit und ermöglicht es Ihnen Event - Listener auch hinzufügen , wenn Sie nicht das HTML - Markup zu steuern.
Sie können ganz einfach ein Ereignis - Listener entfernen , indem Sie mit removeEventListener() Methode.
Syntax
element .addEventListener( event, function, useCapture );Der erste Parameter ist die Art des Ereignisses (wie "click" oder "mousedown" ).
Der zweite Parameter ist die Funktion, die wir anrufen soll, wenn das Ereignis eintritt.
Der dritte Parameter ist ein boolescher Wert, der angibt, ob Ereignis Sprudeln oder Ereigniserfassung zu verwenden. Dieser Parameter ist optional.
Beachten Sie, dass Sie nicht über die Verwendung "on" Präfix für die Veranstaltung; verwenden "click" auf "onclick" "click" anstelle von "onclick" .
Fügen Sie einen Event-Handler auf ein Element
Beispiel
Alert "Hallo Welt!" wenn der Benutzer klickt auf ein Element:
element .addEventListener("click", function(){ alert("Hello World!"); }); Versuch es selber " Sie können auch auf einen externen "Namen" Funktion beziehen:
Beispiel
Alert "Hallo Welt!" wenn der Benutzer klickt auf ein Element:
element .addEventListener("click",
myFunction);
function myFunction() {
alert ("Hello World!");
} Versuch es selber " In Viele Event-Handler auf das gleiche Element
Die addEventListener() Methode ermöglicht es Ihnen , viele Ereignisse in das gleiche Element hinzuzufügen, ohne vorhandene Ereignisse überschreiben:
Beispiel
element .addEventListener("click", myFunction);
element .addEventListener("click", mySecondFunction);
Versuch es selber " Sie können verschiedene Ereignisse auf dasselbe Element hinzuzufügen:
Beispiel
element .addEventListener("mouseover", myFunction);
element .addEventListener("click", mySecondFunction);
element .addEventListener("mouseout", myThirdFunction); Versuch es selber " Fügen Sie einen Event-Handler auf das Fensterobjekt
Die addEventListener() Methode ermöglicht es Ihnen Event - Listener auf jedem beliebigen HTML - DOM - Objekt wie HTML - Elemente, die HTML - Dokument, das Fenster - Objekt oder andere Objekte hinzuzufügen , die Ereignisse, wie die Unterstützung von xmlHttpRequest - Objekt.
Beispiel
Fügen Sie einen Ereignis-Listener, der ausgelöst wird, wenn ein Benutzer das Fenster ändert die Größe:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext ;
});
Versuch es selber " Übergeben von Parametern
Wenn die Parameterwerte vorbei, eine "anonyme Funktion" verwenden, die die angegebene Funktion mit den Parametern aufruft:
Event-Bubbling oder Event Capturing?
Es gibt zwei Möglichkeiten der Ereignispropagierung im HTML-DOM, sprudeln und zu erfassen.
Ereignisausbreitung ist ein Weg, um das Element, um zu definieren, wann ein Ereignis eintritt. Wenn Sie ein <p> Element innerhalb eines <div> Element, und der Benutzer klickt auf den <p> Element, das Element der "click" Ereignis sollte zuerst behandelt werden?
In sprudelnden Veranstaltung die innerste Element wird zuerst und dann die äußere behandelt: die <p> Click - Ereignis des Elements zuerst behandelt wird, dann ist das <div> Click - Ereignis des Elements.
Bei Erfassung Veranstaltung der äußersten Element wird zuerst behandelt und dann die innere: das <div> Element des Click - Ereignis zuerst behandelt werden, dann die <p> Click - Ereignis des Elements.
Mit der addEventListener() Methode können Sie die Ausbreitungstyp angeben , indem die Verwendung von "useCapture" Parameter:
addEventListener( event , function , useCapture );Der Standardwert ist falsch, was die sprudelnde Vermehrung verwenden wird, wenn der Wert auf true gesetzt ist, wird das Ereignis die Erfassung Ausbreitung.
Beispiel
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Versuch es selber " Die removeEventListener() Methode
Die removeEventListener() Methode entfernt Event - Handler , die mit dem beigefügten wurden addEventListener() Methode:
Browser-Unterstützung
Die Zahlen in der Tabelle gibt die erste Browser-Version, die diese Methoden voll unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
| removeEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Hinweis: Die addEventListener() und removeEventListener() Methoden in IE nicht unterstützt werden 8 und frühere Versionen und Opera 6.0 und frühere Versionen. Doch für diese speziellen Browser - Versionen, können Sie die Verwendung attachEvent() Methode , um eine Event - Handler an das Element zu befestigen, und die detachEvent() Methode , um es zu entfernen:
element. attachEvent (event, function);
element. detachEvent (event,
function); Beispiel
Cross-Browser-Lösung:
var x = document.getElementById("myBtn");
if (x.addEventListener) {
// For all major browsers, except IE 8 and earlier
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
// For IE 8 and earlier versions
x.attachEvent("onclick", myFunction);
}
Versuch es selber " HTML-DOM Event-Object Reference
Eine Liste aller Ereignisse HTML - DOM, einen Blick auf unsere komplette HTML - DOM Event - Objekt Referenz .