Ereignis sprudeln oder Ereignisaufnahme in JavaScript

Wenn ein Ereignis auftritt, bestimmt die Ereignisausbreitung die Elementreihenfolge für die Ausführung der Ereignisse. Im HTML -Dokumentobjektmodell (DOM) gibt es zwei Methoden zur Ausbreitung von Ereignissen: Ereignisblasen und Ereigniserfassung. Beim Bubeln wird das Ereignis zuerst mit dem innersten oder dem untergeordneten Element verarbeitet. Im Gegensatz dazu wird bei der Ereigniserfassung ein Ereignis, das dem Element des äußersten oder übergeordneten Elements verbunden ist.

In diesem Bericht werden JavaScript-Ereignis erörtert, das Ereignis sprudelt und Ereigniserfassungen erfasst. Darüber hinaus werden die Beispiele im Zusammenhang mit Ereignissprudeln und Ereigniserfassungen in diesem Artikel demonstriert. So lass uns anfangen!

Ereignis in JavaScript sprudeln

In JavaScript ist Event Bubbling ein Ereignis, das sich vom Ziel oder den innersten 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 dem Abholen der erstellten HTML -Elemente mit den "dokumentieren.QuerySelector () ” Methode, wir werden dem Div einen Ereignishörer hinzufügen "Parentelement" und seine verschachtelte Taste "Kinderkind". Die Funktion in der übergeben "AddEventListener ()" Zeigt die hinzugefügte Zeichenfolge in der an "Konsole.Protokoll()" 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:

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. Es geschieht wegen 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:

So stoppen Sie das Ereignis, in JavaScript zu sprudeln

Verwendung der "Fall.StopPropagation () ” Methode können Sie das Ereignis problemlos in Ihrem JavaScript -Programm einstellen und die Veranstaltung beendet, die von unten nach oben reist.

Beispiel: Stop Event sprudelt in JavaScript

Im folgenden Beispiel werden wir das hinzufügen "Fall.StopPropagation () ” Methode zur "Onclick ()" Ereignis der erstellten Schaltfläche mit Ausweis "Kinderkind". Infolgedessen wird der JavaScript -Interpreter das Ereignis nicht an das äußerste „Dokument“ -Element übergeben:

Kind

Wenn Sie auf die hervorgehobene Schaltfläche klicken, wird nur ausgedruckt "Klicken Sie auf Kind" Und dann veraltet es das Ereignis daran, zu sprudeln:

Ereignisaufnahme in JavaScript

Der Prozess, bei dem ein Ereignis erfasst wird, wenn sein Kontrollfluss vom oberen Element zum Zielelement bewegt 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 Ziel 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:

So stoppen Sie das Ereignis in JavaScript

Um das Ereignis zu verhindern, können Sie die nutzen "Fall.StopPropagation () ” Methode. Der Unterschied zwischen der Beendigung des Ereignisses und Ereignissprudeln besteht darin, dass wir beim Sprudeln des Ereignisses das „Ereignis angehängt haben.StopPropagation () ”Methode mit dem Ereignis, das sich auf das untergeordnete Element bezieht, während bei der Ereigniserfassung das Ereignis.StopPropagation () -Methode wird im übergeordneten Ereignis hinzugefügt.

Führen Sie das folgende Beispiel aus, um zu wissen, wie Sie das Ereignis mit dem JavaScript-Code einstellen können:

Kind

Die angegebene Ausgabe bedeutet, dass die Erfassung des Ereignisses nach Ausführung des mit dem übergeordneten Element zugeordneten Ereignisses gestoppt wird:

Hier ist die volle Sicht auf den Ereignisfluss, wobei das Ereignis sprudelnde Phasen erfasst und erfasst:

Abschluss

In JavaScript sind Ereignisblasen und Ereigniserfassungen die wichtigsten Konzepte in Bezug auf die Ereignisausbreitung. In HTML DOM bezieht sich das Ereignisförderung auf die Verbreitung von Ereignissen von Vorfahren zu ihrem Kind. Im Ereignis sprudeln sich der Ereigniskontrollfluss von den Kinderelementen zu den Vorfahren. In diesem Artikel wurde über JavaScript-Ereignis gesprochen, das erblasen und die Ereignis erfassen. Darüber hinaus werden in diesem Artikel auch die Beispiele im Zusammenhang mit Ereignissprudeln und Ereigniserfassungen demonstriert.