DOM -Ereignis -Listener -Methode in JavaScript

Sie können den Ereignishörer mit Hilfe der HTML -DOM -Elemente hinzufügen AddEventListener () Methode. Mit der Methode addEventListener () können Sie die Reaktion für das entsprechende Ereignis steuern. Das JavaScript ist aus dem HTML -Text isoliert, wenn Sie die Methode addEventListener () verwenden, so.

In dieser Beschreibung werden die Diskussionen der Diskussion Dom Event Hörer Methode in JavaScript. Wir werden die Verwendung der DOM -Event -Listener -Methode zum Hinzufügen von einzelnen und mehreren Handlern zu den HTML -Elementen erläutern. Darüber hinaus werden Beispiele im Zusammenhang mit Ereignissprudeln und Ereigniserfassungen demonstriert. So lass uns anfangen!

DOM -Ereignis -Listener -Methode in JavaScript

Als JavaScript -Programmierer können Sie die Methode Dom addEventListener () verwenden.

Es gibt einen anderen "An" JavaScript -Eigenschaft, die für denselben Zweck verwendet wird; Es ist jedoch im Vergleich zur Methode addEventListener () nicht viel nützlich.

Syntax der addEventListener () -Methode

Objekt.AddEventListener (Ereignis, Funktion, Usecapture);

Hier der erste Parameter, "Fall" wird hinzugefügt, um das Ereignis anzugeben, für das Sie den Event -Handler hinzufügen möchten. der zweite Parameter, "Funktion" ruft die Funktion auf, die ausgeführt wird, wenn das angegebene Ereignis auftritt. Der dritte Parameter ist optional; wo Sie entweder hinzufügen müssen"Ereignisaufnahme" oder "Ereignis sprudeln".

Beispiel 1: Verwenden Sie die DOM -Wege -Listener -Methode zum Hinzufügen eines Ereignishandlers in JavaScript

In diesem Beispiel werden Ihnen das Verfahren zum Hinzufügen einer DOM -Ereignis -Listener -Methode für das Mausereignis „Click“ in JavaScript angezeigt. Erstens werden wir eine Überschrift mit dem hinzufügen

Tag, ein Absatz mit dem

Tag und eine Schaltfläche mithilfe des Tags:

DOM -Ereignis -Listener -Methode in JavaScript

In diesem JavaScript -Programm wurde die Methode addEventListener () verwendet

Wir haben auch eine ID hinzugefügt "Knopf 1" für unser "Klick mich" Taste:

Klick mich

Die GetElementById -Methode wird aufgerufen, um die Taste zu finden und zu erhalten "Knopf 1" Ausweis. Danach die "AddEventListener ()" Methode fügt a hinzu "klicken" Ereignis, das die auslösen "DisplayDate ()" Methode:

Führen Sie das oben gegebene Programm in Ihrem bevorzugten Code-Editor oder einer Online-Codierungssandbox aus. Wir werden das JSBin jedoch für diesen Zweck verwenden:

Nachdem Sie die Ausgabe erhalten haben, klicken Sie auf die "Klick mich" Taste, um die aktuelle Uhrzeit und das aktuelle Datum zu überprüfen:

Beispiel 2: Verwenden Sie die DOM -Wege -Listener -Methode zum Hinzufügen mehrerer Ereignishandler in JavaScript

JavaScript bietet auch die Funktionalität, mehrere Ereignishandler für dasselbe Objekt hinzuzufügen. Um das Verfahren zu demonstrieren, haben wir das folgende JavaScript -Programm mit einer Überschrift, einem Absatz und einer Schaltfläche geschrieben "Knopf 1" Ausweis. Beachten Sie, dass wir mehrere Ereignishandler für die hinzufügen werden "Taste" HTML -Element:

Fügen Sie einen Event -Handler in JavaScript hinzu

In diesem JavaScript -Programm wurde die Methode addEventListener () verwendet

Klick mich

Im nächsten Schritt werden wir eine "A" Objekt, das die Taste findet und bekommt mit "Knopf 1" ID durch das Aufrufen des Dokuments.GetElementById () Methode:

Schlagen Sie die "Klick mich" Button, und Sie erhalten zwei Warnungen auf Ihrem Browser nacheinander:

Beispiel 3: Verwenden Sie die DOM -Ereignis -Listener -Methode zum Hinzufügen von Ereignishandler zum Fensterobjekt in JavaScript

Im folgenden Beispiel fügen wir die addEventListener () -Methode zur Methode hinzu "Fenster" Objekt. Die addEventListener () -Methode addEventListener () wird ausgelöst, wenn ein Benutzer das ausführt "Maus nach unten" Aktion:

JavaScript addEventListener ()

In diesem Beispiel wird die Methode addEventListener () im Fensterobjekt verwendet.

Wir werden auch eine bestehen "Fall" Objekt gegen die addEventListener () -Methode. Der "Fall" Das Objekt umfasst alle Informationen, die sich auf die beziehen Maus nach unten Fall:

Die Ausführung des oben gegebenen JavaScript-Programms zeigt die folgende Ausgabe an:

Drücken Sie nun die "links" Maustaste über dem ausgewählten Element, und Sie sehen den folgenden Alarm:

Ereignis in JavaScript sprudeln

In JavaScript ist Event Bubbling ein Ereignis, das sich vom Ziel oder den tiefsten Elementen zu seinen Eltern ausblut. Ereignisblasen wird in allen modernen Browsern als Standard -Ereignisflussmethode angesehen.

Beispiel: Ereignis sprudelt in JavaScript

Im folgenden Beispiel haben wir einen Titel mit dem Tag hinzugefügt, ein DIV -Element mit der ID "Parentelement" und sein verschachteltes Kinderknopfelement mit der ID "Kinderkind":

Kind

Nach der Zuweisung der erstellten HTML -Elemente mit der Verwendung der "dokumentieren.QuerySelector () ” Methode, wir werden beide Div einen Ereignishörer hinzufügen "Parentelement" und es ist verschachtelt "Kinderkind" Taste. Die Funktion in der übergeben "AddEventListener ()" Zeigt die hinzugefügte Zeichenfolge in der an "Konsole.Protokoll()" Methode:

Jetzt klicken wir auf die "Kind" Taste, die in der folgenden Ausgabe zu sehen ist:

Durch Klicken auf die "Kind" Taste, der übergeben "Funktion()" in der addEventListener () -Methode wird ausgeführt. Dann ist die "Onclick ()" Methode der "Div" Element wird aufgerufen. Das alles geschieht aufgrund der "Ereignis sprudeln":

Im oben genannten Beispiel, wenn wir auf das geklickt haben "Kind" Knopf, die "klicken" Das Ereignis wird von der Schaltfläche mit Ausweis übergeben "Kinderkind" und Ereignisflussregelung bewegt sich zum "dokumentieren" in der folgenden Reihenfolge:

Ereignisaufnahme in JavaScript

Der Prozess, bei dem ein Ereignis erfasst wird, wenn sein Kontrollfluss vom oberen Element zum Ziel oder dem äußersten Element als Ereigniserfassung bezeichnet wird. Obwohl moderne Browser nicht die Fähigkeit haben, eine Ereigniserfassung standardmäßig zu ermöglichen, können Sie diesen Vorgang über JavaScript Code ausführen.

Beispiel: Ereigniserfassung in JavaScript

In unserem JavaScript -Programm werden wir zunächst einen Titel und a hinzufügen "Div" Element mit ID "Parentelement" und sein Kinderelement mit "Kinderkind" Ausweis:

Kind

Als nächstes werden wir die aufrufen "dokumentieren.QuerySelector () ” Methode, um das Eltern- und Kinderelement zu erhalten:

Die folgende "Kind" Die Schaltfläche wird zuerst das zum übergeordnete Element hinzugefügte Ereignis aufrufen. Danach wird das an das Ereignisziel beigefügte Ereignis ausgeführt:

Im oben genannten Beispiel, wenn wir auf das geklickt haben "Kind" Knopf, die "klicken" Das Ereignis wird vom übergeordneten Element „Dokument“ an das angegebene Ereignisziel übergeben "Kinderkind" Taste:

Abschluss

Mit der Methode Dom addEventListener () können Sie dem Fensterobjekt und HTML -Elementen einen Ereignishörer hinzufügen. Ohne Überschreibung der vorhandenen Ereignishandler weist die JavaScript -Methode addEventListener () dem spezifischen Objekt einen Ereignishandler zu. Außerdem kann ein einzelnes Fensterobjekt mehrere Ereignishandler haben. In diesem Artikel wurde die DOM-Ereignis-Listener-Methode in JavaScript besprochen. Wir haben auch die Verwendung der DOM -Event -Listener -Methode zum Hinzufügen von einzelnen und mehreren Handlern zu den HTML -Elementen erläutert. Darüber hinaus werden auch Beispiele im Zusammenhang mit Ereignissprudeln und Ereigniserfassungen demonstriert.