Komm schon, „Lerne, als wärst du 5“ ist nur eine Phrase – ich erzähle hier keine Spielzeuggeschichte! Aber ich verspreche, wenn Sie es von Anfang bis Ende sorgfältig durchlesen, wird alles einen Sinn ergeben.

Ereignis-Bubbling und -Erfassung sind zwei Phasen, wie sich Ereignisse durch das DOM (Document Object Model) ausbreiten (oder bewegen), wenn ein Ereignis in JavaScript ausgelöst wird. Diese Aussage erfordert nun, das Konzept der Ereignisausbreitung zu klären.

Ereignisausbreitung

Wenn ein Ereignis auf einem Element auftritt, beispielsweise auf einer Schaltfläche in einem Div, geschieht das Ereignis nicht nur auf dieser Schaltfläche. Das Ereignis wandert durch das DOM in einem Prozess, der als Ereignisausbreitung bekannt ist. Dieser Prozess erfolgt in zwei Hauptphasen:

• Ereigniserfassung (auch „Trickling“ genannt)

• Blubberndes Ereignis

Ich hoffe, Sie haben die Idee verstanden. Lassen Sie uns beides anhand von Beispielen verstehen.

Ereignis sprudelt

Event-Bubbling bedeutet, dass, wenn ein Event auf einem Element auftritt, es zuerst den Event-Handler für dieses Element auslöst. Anschließend bewegt es sich im DOM-Baum nach oben, um die Ereignishandler seiner übergeordneten Elemente auszulösen, und so weiter, bis es das Dokument oder die Wurzel des DOM-Baums erreicht.

  Parent Div
  Click Me!

Beispielerklärung: Wenn Sie auf die Schaltfläche klicken, wird die Meldung „Schaltfläche angeklickt!“ angezeigt. Die Warnung wird zuerst angezeigt, da das Ereignis auf der Schaltfläche ausgelöst wird. Danach „sprudelt“ das Ereignis zum übergeordneten Div und Sie sehen die Meldung „Übergeordnetes Div angeklickt!“. Alarm. Dies liegt daran, dass das Ereignis an der Schaltfläche beginnt und dann bis zu seinem übergeordneten Div reicht. Daher wird dieser Ausbreitungsprozess „Event Bubbling“ genannt.

Ereigniserfassung

Ereigniserfassung ist das Gegenteil von Bubbling. Das Ereignis beginnt oben auf der Webseite (beginnend mit dem Dokument) und bewegt sich nach unten in Richtung des Elements, mit dem Sie interagiert haben. Dies bedeutet, dass die Ereignishandler für übergeordnete Elemente zuerst ausgelöst werden und das Ereignis nach unten zu dem untergeordneten Element verschoben wird, auf das Sie geklickt oder mit dem Sie interagiert haben.

  Parent Div
  Click Me!

Wenn Sie in diesem Fall auf die Schaltfläche klicken, wird die Meldung „Übergeordnetes Div angeklickt!“ angezeigt. Die Warnung wird zuerst angezeigt. Dann erscheint die Meldung „Schaltfläche angeklickt!“ Die Warnung wird angezeigt, da das Ereignis auf der Dokumentebene beginnt, zuerst bis zum übergeordneten Div erfasst (durchsickert) und dann die Schaltfläche erreicht.

Der Wert true des dritten Arguments von addEventListener bestimmt die Erfassungsphase.

Jedes Ereignis durchläuft 3 Phasen

Natürlich durchläuft jede Veranstaltung alle drei Phasen:

• Erfassungsphase: Das Ereignis beginnt oben (Dokument) und wandert nach unten zum Ziel.

• Zielphase: Das Ereignis erreicht das Element, mit dem Sie interagiert haben (das Ziel).

• Bubbling-Phase: Nach Erreichen des Ziels sprudelt das Ereignis wieder durch die übergeordneten Elemente nach oben.

Also ja, ein Ereignis durchläuft natürlich alle drei Phasen, aber JavaScript gibt Ihnen die Kontrolle darüber, in welcher Phase Ihr Ereignis-Listener agieren wird.

Auch wenn Ereignisse alle drei Phasen durchlaufen, sind die Ereignis-Listener von JavaScript standardmäßig an die Bubbling-Phase angehängt. Das heißt, wenn Sie einen Ereignis-Listener hinzufügen, ohne etwas anzugeben, lauscht dieser nur in der Bubbling-Phase auf das Ereignis (nachdem das Ereignis das Ziel erreicht hat und mit der Aufwärtsbewegung beginnt).

Wenn Sie „true“ als drittes Argument übergeben, weisen Sie JavaScript an, während der Erfassungsphase (während es durch das DOM wandert) auf das Ereignis zu warten. Das Ereignis durchläuft weiterhin alle Phasen (Erfassung, Ziel und Bubbling), aber der Listener wird während der Erfassungsphase ausgelöst, bevor das Ereignis das Zielelement erreicht.

immer sowohl durch Einfangen als auch durch Sprudeln. Wenn Sie den Wert „true“ bestehen, verhindern Sie nicht die Blasenphase. Sie fordern den Zuhörer lediglich auf, während der Aufnahme zu antworten. Das Ereignis wird von der Erfassung bis zum Ziel und dem anschließenden Sprudeln wie gewohnt fortgesetzt.

:

• Alle Ereignisse durchlaufen natürlich die Erfassungs-, Ziel- und Sprudelphase

  .

• Standardmäßig arbeiten Ereignis-Listener während der Bubbling-Phase

  (nachdem das Ereignis das Ziel erreicht und sich nach oben bewegt).

Wenn Sie „true“ übergeben, weisen Sie den Ereignis-Listener an,
• während der Erfassungsphase

  auszulösen (während sich das Ereignis nach unten bewegt).

Das Ereignis durchläuft immer noch alle Phasen (Erfassen, Zielen und Sprudeln), aber Ihr Zuhörer entscheidet, in welcher Phase er handeln soll.