Event Sprudeln und Erfassen – Lernen Sie, als wären Sie 5

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 an einem Element auftritt, beispielsweise an einer Schaltfläche in einem Div, geschieht das Ereignis nicht nur an 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)

• Event Sprudeln

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

Ereignis sprudelt

Ereignis-Bubbling bedeutet, dass, wenn ein Ereignis auf einem Element auftritt, zunächst der Ereignishandler für dieses Element ausgelöst wird. Dann 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.

<div id="parent" style="padding: 20px; background-color: lightblue;">
  Parent Div
  <button id="child">Click Me!</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    alert('Parent Div Clicked!');
  });

  document.getElementById('child').addEventListener('click', function(event) {
    alert('Button Clicked!');
    // event.stopPropagation(); // If you want to stop bubbling, uncomment this line
  });
</script>

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.

<div id="parent" style="padding: 20px; background-color: lightgreen;">
  Parent Div
  <button id="child">Click Me!</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    alert('Parent Div Clicked!');
  }, true); // 'true' makes this event handler run during the capturing phase

  document.getElementById('child').addEventListener('click', function() {
    alert('Button Clicked!');
  });
</script>

Wenn Sie in diesem Fall auf die Schaltfläche klicken, wird die Meldung „Parent Div Clicked!“ 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 das übergeordnete Div erfasst (durchdringt) und dann die Schaltfläche erreicht.

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

Jedes Ereignis durchläuft 3 Phasen

Selbstverständlich 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, wird dieser nur in der Bubbling-Phase auf das Ereignis warten (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 immer noch alle Phasen (Erfassung, Ziel und Bubbling), aber der Listener wird während der Erfassungsphase ausgelöst, bevor das Ereignis das Zielelement erreicht.

Geht das Ereignis vom Einfangen zum Sprudeln, wenn Sie „true“ verwenden? Nein, das Ereignis bewegt sich 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.

Zusammenfassung:

• 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).

• The event still goes through all phases (capturing, target, and bubbling), but your listener decides in which phase to act.

Das obige ist der detaillierte Inhalt vonEvent Sprudeln und Erfassen – Lernen Sie, als wären Sie 5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!