Ereignis sprudeln oder Ereignisaufnahme in JavaScript
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":
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:
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:
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:
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.