Browserereignisse sind ein Schlüsselaspekt der Interaktion von Benutzern mit Webseiten. Sie ermöglichen es Ihnen, auf verschiedene Benutzeraktionen wie Klicks, Schweben, Laden einer Seite usw. zu reagieren. Um jedoch vollständig zu verstehen, wie Browserereignisse funktionieren, müssen Sie ihren Lebenszyklus und die Anzahl der Phasen verstehen, durch die das Ereignis läuft.
Der Lebenszyklus eines Browserereignisses besteht normalerweise aus drei Hauptphasen: Erfassen, Target und Bubbling. Wenn ein Ereignis auftritt, muss es diese Phasen durchlaufen, um vollständig verarbeitet zu werden. In jeder Phase werden Ereignishandler in einer bestimmten Reihenfolge aufgerufen, um Ihnen die Möglichkeit zu geben, etwas über das Ereignis zu erfahren und damit zu interagieren.
Die Erfassungsphase beginnt am obersten Element in der DOM-Hierarchie und bewegt sich im Baum bis zum tiefsten verschachtelten Element. In dieser Phase kann ein Ereignis auf einem der Elemente des Baums abgefangen werden. Danach tritt die Zielphase ein, wenn das Ereignis ein Element erreicht, das direkt mit dem Ereignis verbunden ist.
Nach dem Durchlaufen der Zielphase beginnt die Aufstiegsphase, in der sich das Ereignis in der DOM-Hierarchie bis zum Stammelement des Dokuments bewegt. Das Erfassen und Aufsteigen ermöglicht es Ihnen, komplexe Ereignisverarbeitungslogik zu implementieren und Elemente auf der Seite zu manipulieren, während das Ereignis verschiedene Ebenen der DOM-Verschachtelung durchläuft.
Lebenszyklus eines Browserereignisses
Es gibt vier Hauptphasen im Lebenszyklus eines Browserereignisses: Erfassen (capture), Ziel (target), Bubbling (Bubbling) und Ereignisverarbeitung.
Während der Erfassungsphase beginnt sich das Ereignis vom obersten Element der übergeordneten Struktur zum Zielelement auszubreiten. Zu diesem Zeitpunkt können Ereignishandler für jedes Element aufgerufen werden, indem sie sich in der Elementstruktur nach unten bewegen.
Die Zielphase tritt ein, wenn das Ereignis das Zielelement erreicht, auf dem es ausgelöst wurde. Hier werden die Handler aufgerufen, die diesem Ereignis zugeordnet sind. Diese Phase ist der Höhepunkt des Lebenszyklus eines Ereignisses.
Die Aufstiegsphase beginnt, nachdem die Zielhandler ausgeführt wurden, und das Ereignis wird vom Zielelement auf das oberste Element der übergeordneten Struktur umkehren. Ereignishandler für jedes Element tauchen in der Elementstruktur auf, bis das Stammelement erreicht ist oder die Methode stopPropagation() aufgerufen wird.
In der Endphase der Ereignisverarbeitung werden alle verbleibenden Handler aufgerufen, die in früheren Phasen nicht aufgerufen wurden. Dies sind normalerweise globale Ereignishandler oder Handler, die vom Browser selbst installiert werden.
| Phase | Die Beschreibung |
| Erfassen (Capture) | Verteilt das Ereignis vom obersten Element auf das Zielelement. |
| Ziel (Target) | Ruft die Handler auf, die dem Zielelement zugeordnet sind. |
| Aufsteigen (Bubbling) | Umkehrt das Ereignis vom Zielelement zum oberen Element. |
| Ereignisbehandlung | Ruft die verbleibenden Ereignishandler auf. |
Durch das Verständnis des Lebenszyklus eines Browserereignisses können Entwickler die Ereignisverarbeitung in einer Webanwendung genau steuern und verwalten, ihre Leistung optimieren und mögliche Probleme im Zusammenhang mit der Reihenfolge der Ausführung von Ereignishandlern auf verschiedenen Seitenelementen vermeiden.
Phasen des Lebenszyklus
Der Lebenszyklus eines Browserereignisses besteht aus drei Phasen: Erfassen, Zielen und Verteilen. Jede dieser Phasen hat ihre eigenen Besonderheiten und wird in einer bestimmten Reihenfolge ausgeführt, sodass Entwickler Ereignisse und Codeausführung verwalten können.
- Erfassungsphase: In dieser Phase erfasst der Browser das Ereignis und bestimmt, an welchem Element es aufgetreten ist. Der Browser beginnt am obersten Element und geht in der DOM-Hierarchie nach unten, um jedes Element auf Ereignishandler zu überprüfen.
- Zielphase: Nachdem das Element identifiziert wurde, an dem das Ereignis stattgefunden hat, wechselt der Browser zur Zielphase. In dieser Phase erreicht das Ereignis das Zielelement und der diesem Element zugeordnete Ereignishandler wird ausgelöst. Wenn das Zielelement keinen Handler hat, geht das Ereignis in die nächste Phase über.
- Die Ausbreitungsphase: Wenn das Ereignis nicht auf dem Zielelement verarbeitet wurde, geht es in die Ausbreitungsphase über. In dieser Phase beginnt das Ereignis einen aufsteigenden Pfad in der DOM-Hierarchie, indem Ereignishandler für jedes zwischenzeitliche Element ausgeführt werden. Dieser Vorgang wird als Ereignisaufkommen bezeichnet.
Die Kenntnis der Lebenszyklusphasen eines Browserereignisses hilft Entwicklern, Ereignisse richtig zu verwalten und effizientere Webanwendungen zu erstellen. Wenn Sie mit Ereignissen arbeiten, müssen Sie die Reihenfolge der Phasen berücksichtigen und geeignete Handler für verschiedene Situationen verwenden.
Initialisierungsphase
Während der Initialisierungsphase überprüft der Browser die DOM-Struktur (Document Object Model) und bestimmt, welche Elemente am Ereignis beteiligt sind. Der Browser überprüft dann jedes teilnehmende Element und legt Parameter wie target (Zielelement), type (Ereignistyp) und event listeners (Ereignishandler) fest.
Außerdem berechnet der Browser während der Initialisierungsphase die Ereigniskoordinaten relativ zum Fenster oder Element und definiert andere Ereigniseigenschaften, die für die Verarbeitung des Ereignisses wichtig sein können.
Die Initialisierungsphase ist ein wichtiger Schritt, da hier der Browser alle erforderlichen Parameter für die ordnungsgemäße Verarbeitung des Ereignisses einstellt. Wenn die Initialisierungsphase übersprungen oder nicht ordnungsgemäß ausgeführt wird, können bei der Verarbeitung von Ereignissen verschiedene Fehler oder falsche Ergebnisse auftreten.
Erfassungsphase
Während der Erfassungsphase können Methoden verwendet werden addEventListener() oder attachEvent(), um Ereignishandler an DOM-Elemente zu binden. Dadurch wird ein Handler, der in der Erfassungsphase gebunden ist, früher ausgelöst als die Handler in den nächsten Phasen.
Die Erfassungsphase ist nützlich, wenn Sie verschachtelte Elemente beeinflussen müssen, bevor das Ereignis ihre eigenen Ereignishandler erreicht. Wenn Sie beispielsweise auf eine verschachtelte Schaltfläche innerhalb eines Containers klicken, können Sie die Erfassungsphase verwenden, um das Ereignis zuerst auf dem Container selbst und dann auf der Schaltfläche zu verarbeiten.
Abfangphase
In der Abfangphase werden Ereignishandler in umgekehrter Reihenfolge in der Elementhierarchie aufgerufen. Dies bedeutet, dass der Ereignishandler für das übergeordnete Element vor dem Ereignishandler für das untergeordnete Element aufgerufen wird. Diese Struktur ermöglicht es Ihnen, ein Ereignis auf oberster Ebene frühzeitig abzufangen und entsprechende Maßnahmen zu ergreifen, bevor das Ereignis das Zielelement erreicht.
Während der Abfangphase können Ereignishandler die event-Methoden verwenden.stopPropagation() und event.preventDefault() , um die Weiterverbreitung des Ereignisses zu stoppen oder sein Standardverhalten aufzuheben. Dadurch können Sie die Ereignisverarbeitung auf verschiedenen Ebenen steuern und unerwünschte Aktionen verhindern.
Es ist jedoch erwähnenswert, dass die Abfangphase nicht immer in der Praxis der Website-Entwicklung verwendet wird. In den meisten Fällen arbeiten Entwickler mit der Bubble-Phase, die unmittelbar nach der Abfangphase folgt und normalerweise zur Behandlung von Ereignissen auf der unteren Ebene der Elementhierarchie verwendet wird.
Insgesamt ist die Abfangphase ein wichtiger Schritt im Lebenszyklus eines Browserereignisses, das die Möglichkeit bietet, Ereignisse auf verschiedenen Ebenen der Elementhierarchie zu überwachen und zu verarbeiten und unerwünschte Aktionen zu verhindern.
Die Behandlungsphase
Die Bearbeitungsphase besteht aus drei Stufen:
1. Erfassungsphase (Capture)
An dieser Stelle beginnt das Ereignis seine Reise vom Stammelement und bewegt sich in der DOM-Hierarchie des Baums nach unten und bewegt sich von übergeordneten Elementen zu untergeordneten Elementen. Während der Erfassung kann das Ereignis bei jedem Element abgefangen und verarbeitet werden, beginnend mit dem Stammelement. Dies ermöglicht eine allgemeinere und allgemeinere Ereignisbehandlung.
2. Zielphase
Nachdem ein Ereignis das Zielelement erreicht hat (das Element, auf dem das Ereignis ausgelöst wurde), durchläuft es die Zielphase. In dieser Phase werden die Handler, die an das Zielelement gebunden sind, ausgeführt. Dadurch können Sie das Verhalten eines Elements als Reaktion auf ein Ereignis anpassen.
3. Aufstiegsphase (Bubble)
Nach der Zielphase beginnt das Ereignis, sich von den untergeordneten Elementen zu den übergeordneten Elementen in der DOM-Hierarchie des Baums wieder nach oben zu bewegen. Während des Auftritts können Ereignisse bei jedem Element abgefangen und verarbeitet werden, soweit dies erforderlich ist. Dadurch können Sie hierarchische Strukturen für die Ereignisbehandlung erstellen und Aktionen auf übergeordneter Elementebene ausführen.
Durch die Verwendung von Verarbeitungsphasen können Sie die Ereignisbehandlung effizient verwalten und die erforderlichen Aktionen in verschiedenen Phasen des Browserereignislebenszyklus durchführen.
Die Ausbreitungsphase
In dieser Phase beginnt sich das Ereignis vom obersten Element des Dokuments (normalerweise ist es ein Element ) zum untersten Element (normalerweise ist es ein Element ) in der Reihenfolge der Verschachtelung auszubreiten. Das heißt, das Ereignis durchläuft jedes Element im Dokument, bis es das Zielelement erreicht, auf dem es aufgetreten ist.
Während dieser Phase können Sie Methoden wie z. B. e.stopPropagation() und e.stopImmediatePropagation() verwenden, um die weitere Ausbreitung des Ereignisses zu stoppen oder zu verhindern, dass andere Ereignishandler für das aktuelle Element aufgerufen werden.
Die Ausbreitungsphase wird auch als "Abfangphase" oder "Eintauchphase" bezeichnet. In dieser Phase werden Handler, die mit der addEventListener() -Methode mit dem useCapture-Parameter true hinzugefügt werden, auf jedem Dokumentelement auf dem Verteilungspfad des Ereignisses aufgerufen.
In der folgenden Tabelle sind die wichtigsten Methoden aufgeführt, die Sie während der Verteilungsphase verwenden können:
| Methode | Die Beschreibung |
|---|---|
| e.stopPropagation() | Stoppt die weitere Ausbreitung des Ereignisses |
| e.stopImmediatePropagation() | Stoppt die weitere Verteilung des Ereignisses und verhindert, dass andere Ereignishandler für das aktuelle Element aufgerufen werden |
Zielphase
Wenn ein Ereignis eintritt, durchläuft der Browser die DOM-Struktur vom Stammelement zum Zielelement, um zu bestimmen, welches Element das Ereignis ausgelöst hat. Dies geschieht durch einen Mechanismus zum Aufsteigen und Erfassen von Ereignissen.
In der Zielphase wird das Ereignis zuerst auf dem Zielelement selbst verarbeitet, dann zu seinen übergeordneten Elementen verschoben und weiter zum Stammelement hinaufgestuft.
In dieser Phase können Sie Methoden verwenden, die einem Zielelement zugeordnet sind, z. B. das Ändern seiner Eigenschaften oder das Anwenden von Stilen. Sie können das Ereignis auch in anderen Phasen ändern oder verhindern, dass es weiter verarbeitet wird.
Die Zielphase ist sehr wichtig, da Sie das Element, das das Ereignis ausgelöst hat, identifizieren und bearbeiten und dessen Verhalten und Interaktion mit dem Benutzer steuern können.
Wiedergabe-Phase
In dieser Phase beginnt das Ereignis mit dem Element, an dem es aufgetreten ist, und öffnet sich dann im DOM-Baum nach oben und beeinflusst jedes Element in seinem Pfad.
Während dieser Phase können Sie die event-Methoden verwenden.stopPropagation() und event.preventDefault(), um zu verhindern, dass das Ereignis weiter auftaucht und die Standardaktion des Ereignisses rückgängig gemacht wird.
Die Wiedergabephase ist nützlich, wenn Sie ein Ereignis behandeln möchten, wenn es ein bestimmtes Element erreicht, und verhindern möchten, dass es auftaucht oder eine Standardaktion ausführt.
