Ereignisfluss: Sprudeln und Erfassen

Dies ist Beitrag Nr. 7 der Reihe „Frontend-Interviewfragen“. Wenn Sie Ihre Vorbereitung verbessern oder allgemein auf dem Laufenden bleiben möchten, sollten Sie über die Teilnahme am Frontend Camp nachdenken ?.

---

Ereignis-Bubbling und -Erfassung, beides sind Ausbreitungsmechanismen im DOM (Document Object Model). Beide Mechanismen sind einander entgegengesetzt.

Ereignis sprudelt

Beim Ereignis-Bubbling breitet sich das Ereignis nach dem Auslösen des Handlers für das Zielelement (event.target) nach oben (Blasen) zum Stammelement des Dokuments aus. Auf seinem Weg löst es alle Event-Handler der übergeordneten Elemente aus.

/*
<div>



<p>In the snippet above, when you click the button you'll see the following output in console:<br>
</p>

<pre class="brush:php;toolbar:false">"Button handler"
"Container handler"

Zuerst wird der Handler für die Schaltfläche aufgerufen und die Eigenschaft „event.target“ wird auf „button“ gesetzt, da sie das Ereignis initiiert hat. Wenn ein Ereignis auf dem Weg zum Stammelement ist, ruft es den Ereignishandler seines übergeordneten Elements auf.

Fast alle Ereignisse sprudeln, aber es gibt ein paar Ausnahmen wie Fokusereignisse, die nicht sprudeln.

Sie können die Blasenbildung stoppen, indem Sie die Methode stopPropagation() für das Ereignis aufrufen. Wenn der Ereignishandler der Schaltfläche im obigen Snippet die Weitergabe stoppt, wird der Ereignishandler des Containers nicht aufgerufen.

btn.addEventListener('click', function(event) {
  console.log('Button handler!');

  // ancestor elements won't receive the event
  event.stopPropagation();
});

Sie können auf das Element zugreifen, das das Ereignis ausgelöst hat, indem Sie auf die Eigenschaft target.event zugreifen. Außerdem kann auf das Element, dessen Handler ausgeführt wird, mit event.currentTarget.
zugegriffen werden

container.addEventListener('click', function(event) {
  console.log('Container handler!'); // 'Container handler!'
  console.log(event.target); // btn
  console.log(event.currentTarget); // container
  console.log(this); // container
});

Möchten Sie mehr über dieses Schlüsselwort erfahren? Ich habe einen Beitrag dazu geschrieben.

Ereigniserfassung

Wir haben bisher nur die Hälfte des Bildes gesehen. Wenn auf die Schaltfläche im obigen Snippet geklickt wird, ist es nicht das erste Element, das dieses Ereignis empfängt. ?

Der Ereignisablauf besteht aus drei Phasen:

1. Erfassungsphase: Das Ereignis fließt vom Stammelement zum Zielelement.
2. Zielphase: Das Ereignis wird auf dem Zielelement empfangen.
3. Bubbling-Phase: Das Ereignis beginnt, sich zurück zum Stammelement auszubreiten.

Standardmäßig werden alle Event-Handler nur während der Ziel- und Bubbling-Phase aufgerufen. Um Ereignishandler in der Erfassungsphase aufzurufen, übergeben Sie true als drittes Argument.

el.addEventListener('click', () => {}, true);
// or to be more explicit
el.addEventListener('click', () => {}, { capture: true });

Wenn Sie einen Handler in der Erfassungsphase verwenden, wird er in der Bubbling-Phase nicht aufgerufen.

Ähnlich wie beim Bubbling lässt es, wenn event.stopPropagation() während der Erfassungsphase aufgerufen wird, das Ereignis nicht weiter fließen, d. h. in diesem Fall im DOM hinunter.

In dem Snippet, das wir zuvor besprochen haben, wird der Handler der Schaltfläche nie aufgerufen, wenn der Container die Ausbreitung während der Erfassungsphase stoppt.

/*
<div>



<p>Aus diesem Grund sollten Sie immer einen guten Grund haben, event.stopPropagation() zu verwenden. Dies kann zu unerwarteten Problemen führen, die in einem komplexen oder tief verschachtelten DOM-Baum schwer zu debuggen sind.</p><p>Ereigniserfassung wird im Vergleich zu Bubbling selten verwendet. Bubbling hat viele Anwendungsfälle wie „Ereignisdelegation“ – ein wichtiges Leistungsmuster.</p>

<p>Dieser Beitrag legt den Grundstein für das nächste Thema – Event-Delegation. Stellen Sie sicher, dass Sie es gut verstehen. Haben Sie Zweifel? Hinterlassen Sie sie in den Kommentaren. ✌️</p>


<hr>

<h2>
  
  
  Zusammenfassung
</h2>

<ol>
<li>Der Ereignisfluss besteht aus drei Phasen: Erfassungs-, Ziel- und Bubbling-Phase.</li>
<li>In der Erfassungsphase fließt das Ereignis vom Stammelement zum Zielelement (event.target) ab.</li>
<li>In der Blasenphase fließt das Ereignis vom Zielelement zum Wurzelelement.</li>
<li>Standardmäßig werden alle Event-Handler nur während der Ziel- und Bubbling-Phase aufgerufen.</li>
<li>Durch Übergabe eines dritten Arguments in der Funktion addEventListener können Sie den Handler auf die Erfassungsphase festlegen.</li>
<li>Zu jedem Zeitpunkt im Ereignisfluss wird durch den Aufruf von event.stopPropagation() der weitere Fluss des Ereignisses gestoppt.</li>
</ol>


<hr>

<p>Gefällt Ihnen, was Sie gerade gelesen haben? ? Erwägen Sie, sich auf die Warteliste im Frontend Camp einzutragen.</p>

<p>Einige Reaktionen hinterlassen „?“ und Kommentare, damit dieser Beitrag anderen Entwicklern wie Ihnen hilft. ?</p>


          

            
  

            
        

Das obige ist der detaillierte Inhalt vonEreignisfluss: Sprudeln und Erfassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!