Latest web development tutorials
×

JavaScript Kurs

JavaScript Kurs JavaScript Kurze Einführung JavaScript Verwendung JavaScript Export JavaScript Grammatik JavaScript Statements JavaScript Note JavaScript Variable JavaScript Datentypen JavaScript Objekte JavaScript Funktion JavaScript Anwendungsbereich JavaScript Ereignis JavaScript Schnur JavaScript Die Betreiber JavaScript vergleichen JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript Typumwandlung JavaScript Reguläre Ausdrücke JavaScript Fehler JavaScript Fehlerbeseitigung JavaScript Variable Lift JavaScript Strict-Modus JavaScript Missbrauch JavaScript Formularauthentifizierung JavaScript reservierte Schlüsselwörter JavaScript JSON JavaScript void JavaScript Code-Spezifikation

JS Funktion

JavaScript Funktionsdefinition JavaScript Funktionsargumente JavaScript Funktionsaufruf JavaScript Verschlüsse

JS HTML DOM

DOM Kurze Einführung DOM HTML DOM CSS DOM Ereignis DOM EventListener DOM Element

JS Erweiterte Tutorial

JavaScript Objekte JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp Objekte

JS Browser BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript Pop JavaScript Timed Ereignis JavaScript Cookies

JS Lagerhaus

JavaScript Lagerhaus JavaScript Test jQuery JavaScript Test Prototype

JS Beispiele

JavaScript Beispiele JavaScript Object-Instanz JavaScript Browser-Objektinstanz JavaScript HTML DOM Beispiele JavaScript Zusammenfassung

JS Referenzhandbuch

JavaScript Objekte HTML DOM Objekte

JavaScript HTML-DOM Eventlistener

addEventListener () -Methode

Beispiele

Hören Ereignisse ausgelöst, wenn der Benutzer auf die Schaltfläche klickt:

. Document.getElementById ( "myBtn") addEventListener ( "Klick", displayDate);

Versuchen »

addEventListener () -Methode wird verwendet, um einen Ereignishandler auf ein bestimmtes Element hinzuzufügen.

addEventListener () -Methode das Ereignishandler hinzuzufügen nicht die bestehende Event-Handler überschreiben.

Sie können mehrere Event-Handler ein Element hinzuzufügen.

zwei "Klick" Ereignis: Sie können mehr als eine von der gleichen Art von Event-Handler auf das gleiche Element, wie hinzuzufügen.

Sie können Objekte in jedem DOM Event-Listener hinzufügen, nicht nur HTML-Elemente. Wie zum Beispiel: Fensterobjekt.

addEventListener () -Methode können leichter Ereignis steuern (Blubbern und Capture).

Wenn Sie die Methode addEventListener (), HTML JavaScript-Tags von links zu schnitzen, besser lesbar, auch in Abwesenheit von Kontrolle HTML-Tags Event-Listener hinzufügen können.

Sie können die removeEventListener () -Methode verwenden, ein Ereignis-Listener zu entfernen.

Grammatik

Element .addEventListener (Ereignis, Funktion, useCapture );

Der erste Parameter ist die Art (wie "Klick" oder "mousedown-") Ereignis.

Das zweite Argument ist der Funktionsaufruf nach dem Ereignis ausgelöst wird.

Der dritte Parameter ist ein boolescher Wert, der verwendet wird, ein Ereignis sprudelnden oder Capture zu beschreiben. Dieser Parameter ist optional.

Note Hinweis: Die "on" Präfix nicht verwenden. Verwenden Sie zum Beispiel "Klick", anstelle von "Onclick".

Ursprüngliche Elemente hinzufügen, einen Event-Handler

Beispiele

Wenn der Benutzer klickt auf den Pop-up-Element, wenn die "Hallo Welt!":

Element .addEventListener ( "Klick", Funktion () {alert ( "Hallo Welt!");});

Versuchen »

Sie können den Namen der Funktion verwenden, um eine externe Funktion zu verweisen:

Beispiele

Wenn der Benutzer klickt auf den Pop-up-Element, wenn die "Hallo Welt!":

Element .addEventListener ( "Klick", myFunction );

Funktion myFunction () {
alert ( "Hallo Welt!");
}

Versuchen »

Fügen Sie mehrere Event-Handler auf das gleiche Element

addEventListener () -Methode können Sie mehrere Ereignisse auf die gleichen Elemente hinzuzufügen, und nicht überschrieben bestehenden Ereignisse:

Beispiele

Element .addEventListener ( "Klick", myFunction );
Element .addEventListener ( "Klick", mySecondFunction );

Versuchen »

Sie können in verschiedenen Arten von Ereignissen auf die gleichen Elemente hinzuzufügen:

Beispiele

Element .addEventListener ( "Mouseover", myFunction );
Element .addEventListener ( "Klick", mySecondFunction );
Element .addEventListener ( "mouseout", myThirdFunction );

Versuchen »

Fügen Sie einen Ereignishandler auf das Fensterobjekt

addEventListener () -Methode Sie Objekte im HTML-DOM-Ereignis-Listener hinzufügen können, Objekte HTML-DOM wie zum Beispiel: HTML-Elemente, HTML-Dokumente, Fenster-Objekt. Ereignisobjekte oder andere Ausgaben wie: XMLHttpRequest-Objekt.

Beispiele

Wenn der Benutzer setzt die Fenstergröße Ereignis-Listener hinzuzufügen:

window.addEventListener ( "Größe ändern", function () {
. Document.getElementById ( "Demo") innerHTML- = sometext;
});

Versuchen »

Übergeben von Parametern

Wenn Sie einen Parameterwert geben, verwenden Sie den Funktionsaufruf mit den Parametern "anonyme Funktion":

Beispiele

Element .addEventListener ( "Klick", Funktion () {myFunction (P1, P2);});

Versuchen »

Ereigniserfassung oder Ereignis sprudeln?

Die Veranstaltung Lieferung auf zwei Arten: Sprudeln und Capture.

Die Veranstaltung Lieferung Reihenfolge der Elemente Ereignis-Trigger definiert. Wenn Sie <p> Element in das <div> -Element, der Benutzer klickt <p> Element, welches Element der Veranstaltung "Klick" ausgelöst, es zu werden?

Sprudeln, wird das Ereignis ein internes Element ausgelöst wird, dann die äußeren Elemente auslösen, nämlich: ein Klick - Ereignis <p> Element zuerst ausgelöst wird, dann löst das Click - Ereignis <div> Element.

Bei der Erfassung, wird das Ereignis ein externes Element ausgelöst wird, dann wird das Ereignis interne Elemente ausgelöst, nämlich: <div> Element ein Click - Ereignis auszulösen, und dann ein Klick - Ereignis auslösen <p> Element.

addEventListener () -Methode angeben "useCapture" Parameter, um den Liefertyp einzustellen:

addEventListener (Ereignis, Funktion, useCapture) ;

Der Standardwert ist falsch, dass passieren sprudelt, wenn der Wert true ist, verwenden Sie das Ereignis Transfer zu erfassen.

Beispiele

Document.getElementById ( "myDiv") addEventListener ( "Klick", myFunction, true).

Versuchen »

removeEventListener () -Methode

removeEventListener () -Methode die Methode addEventListener () zu entfernen, Event-Handler hinzuzufügen:

Beispiele

Element .removeEventListener ( "mousemove-", myFunction );

Versuchen »

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browser die Methode Versionsnummer zu unterstützen.

Weg
addEventListener () 1.0 9.0 1.0 1.0 7.0
removeEventListener () 1.0 9.0 1.0 1.0 7.0

Hinweis: IE 8 und frühere Versionen von IE, Opera 7.0 und frühere Versionen unterstützen keine addEventListener () und removeEventListener () -Methode. Allerdings kann diese Art von Browser-Version verwendet werden detachEvent () -Methode einen Ereignishandler zu entfernen:

element.attachEvent (Ereignis, Funktion);
element.detachEvent (Ereignis, Funktion);

Beispiele

Cross-Browser-Lösung:

var x = document.getElementById ( "myBtn");
if (x.addEventListener) {// alle gängigen Browser, außer IE 8 und frühere Versionen
x.addEventListener ( "Klick", myFunction);
} Else if (x.attachEvent) {// IE 8 und frühere Versionen
x.attachEvent ( "Onclick", myFunction);
}

Versuchen »

HTML-DOM Event-Object Reference

Alle HTML - DOM - Ereignisse können Sie sich unsere komplette siehe HTML - DOM Event - Objekt Referenz .