Event Bubbling und Event Capturing in Javascript erklärt: Wie verwenden?
Veröffentlicht: 2020-03-26Inhaltsverzeichnis
Einführung
Zwei sehr gebräuchliche Terminologien, die für den Ereignisfluss in JavaScript verwendet werden, sind Event Bubbling und Event Capturing .
Dies sind zwei wichtige Möglichkeiten, wie ein Ereignis in der HTML-DOM-API weitergegeben wird, wenn beide Elemente ein Handle für ein Ereignis registrieren und das Ereignis in einem Element auftritt, das in einem anderen Element verschachtelt ist. Die Reihenfolge, in der ein Ereignis von den Elementen empfangen wird, wird durch die Art der Ereignisausbreitung bestimmt. Lesen Sie weiter, um mehr über die Verwendung von Event Bubbling und Event Capturing in JavaScript zu erfahren und warum diese bei der Entwicklung von Webseiten erforderlich sind.
Die zentralen Thesen
- Erläuterung der Begriffe Ereignis, Ereignisablauf, Ereignishandler und Ereignis-Listener
- Ereignisblasen und Ereigniserfassung in JavaScript
- Dienstprogramm für Event Bubbling und Event Capturing in JavaScript
Ereignisse und Ereignisablauf
Die Interaktion von HTML-Webseiten mit JavaScript wird durch Ereignisse vermittelt, die auftreten, wenn die Seite durch den Benutzer oder den Browser manipuliert wird. Das Laden einer Seite, das Klicken des Benutzers auf eine Schaltfläche, das Schließen eines Fensters sind Beispiele für Ereignisse.
Die Reihenfolge, in der die Ereignisse auf der Webseite empfangen werden, wird als Ereignisfluss bezeichnet. Der Prozess des Ereignisflusses wird in 3 Schritten abgeschlossen – Ereigniserfassung (Abfangen des Ereignisses), Ereignis-Targeting (Ziel erhält das Ereignis) und Ereignis-Bubbling (Reaktion auf das Ereignis).
Event-Handler und Event-Listener in JavaScript
Event Handler ist ein JavaScript-Code, der in die HTML-Tags statt in die <script>-Tags geschrieben wird. Ereignishandler führen JavaScript aus, wenn ein Ereignis eintritt, z. B. das Drücken einer Schaltfläche. Die grundlegende Syntax lautet: name_of_handler=“JavaScript-Code hier“
<a href="https://www.google.com" onClick="alert('hello!")">Google</a>
Eine Prozedur, die auf das Eintreten eines Ereignisses wartet, ist ein Ereignis-Listener. JavaScript hat eine eingebaute Funktion, addEventListener(), die das abzuhörende Ereignis empfängt und ein zweites Argument aufruft, wenn das genannte Ereignis ausgelöst wird. Die Syntax lautet: element.addEventListener(event, listener);
Ereignissprudeln in JavaScript
Event Bubbling ist eine gängige Terminologie, die bei der Entwicklung einer Webseite oder einer Webanwendung mit JavaScript vorkommt. Event Bubbling ist eine Stufe im Prozess des Ereignisflusses, wenn das Ereignis am spezifischsten Element oder am tiefsten verschachtelten Knoten im DOM beginnt und anschließend nach oben zum Knoten fließt, der am wenigsten spezifisch ist, d. h. das Dokument.
Quelle
<!DOCTYPE HTML>
<html>
<Kopf>
<title>……</title>
</head>
<Körper>
<div id="demo"> Hier drücken.</div>
</body>
</html>
Beim Anklicken des Elements <div> findet das Ereignis 'click' in folgender Reihenfolge statt:
- <div>
- <Körper>
- <html>
- Dokumentieren
Das Ereignis 'click' löst das Element <div> aus. Jeder Knoten wird anschließend entlang des DOM-Baums nach oben abgefeuert, bis das Objektdokument erreicht ist.
Lesen Sie: Full-Stack-Projektideen und -themen
Ereigniserfassung in JavaScript
Ereigniserfassung ist ein alternatives Modell im Ereignisablauf, das zuerst von Netscape Browser eingeführt wurde. Wie von diesem Modell angegeben, wird ein Ereignis zuerst von dem am wenigsten spezifischen Knoten empfangen, und der spezifischste Knoten oder das am tiefsten verschachtelte Element empfängt das Ereignis zuletzt. Bei diesem Modell wird ein Ereignis abgefangen, bevor es das eigentliche Ziel erreicht. Im Gegensatz zu Event Bubbling fehlt modernen Browsern jedoch die Unterstützung für dieses Modell, sodass Event Capturing nur unter bestimmten Umständen verwendet werden kann.
Quelle
Bezugnehmend auf das im vorherigen Abschnitt angegebene Beispiel löst das Klicken auf das Element <div> das Ereignis „click“ in der folgenden Reihenfolge aus:
- Dokumentieren
- <Körper>
- <html>
- <div>
Was passiert in der Ereigniserfassungsphase?
In der Event-Capturing-Phase werden die Capturer-Listener aufgerufen, deren Wert als „true“ registriert ist. Es ist folgendermaßen geschrieben:
el.addEventListener('Click', Listener, true)
Hier wird ein Ereignis erfasst, weil der Wert des Listeners als „true“ registriert ist. Falls kein Wert vorhanden ist, ist der Standardwert „false“ mit dem Ergebnis, dass das Ereignis nicht erfasst wird. Daher werden in dieser Phase nur Ereignisse mit echtem Wert aufgerufen und erfasst. In der anschließenden Target-Phase werden alle registrierten Listener aufgerufen, unabhängig davon, ob ihr Wert als true oder false registriert ist.
DOM-Ereignisablauf in JavaScript
Das DOM Level 2 spezifiziert drei Stufen des Modells des Ereignisflusses:
- Ereigniserfassungsphase
- Am Ziel
- Event Sprudelnde Phase
Quelle
Besteht die Möglichkeit, das Ereignis abzufangen, erfolgt zuerst die Ereigniserfassung. Darauf folgt das eigentliche Ziel, das das Ereignis erhält. Schließlich findet in der Ereignis-Bubbling-Phase die endgültige Reaktion auf das Ereignis statt. Bezugnehmend auf das im vorherigen Abschnitt angegebene Beispiel löst das Klicken auf das Element <div> das Ereignis „click“ in der im obigen Diagramm dargestellten Reihenfolge aus.
Lesen Sie: Full-Stack-Entwicklergehalt in Indien
Dienstprogramm für Event Bubbling und Event Capturing in JavaScript
In der Event-Bubbling-Phase werden nur die Events mit dem Flag-Wert „false“ (Non-Capturers) aufgerufen. Event Bubbling und Event Capturing sind wichtige Aspekte von DOM.
el.addEventListener('Click', listener, false) // Listener erfasst nicht
el.addEventListener('Click', listener) // Listener erfasst nicht
Der obige Code veranschaulicht, wie die Sprudel- und die Erfassungsphase funktionieren. Nicht jedes Ereignis erreicht das Ziel. Einige Ereignisse werden nicht hochgesprudelt und enden nach der Zielphase. Das Bubbling-Ereignis ist nicht auf alle Arten von Ereignissen anwendbar, und der Listener sollte die boolesche Eigenschaft „.bubble“ des Objekts des Ereignisses haben, neben einigen anderen Eigenschaften wie – e.target (um auf das Ziel des Ereignisses zu verweisen) und e.eventPhase (aktuelle Listener registrieren sich in diesem Modus).
Fazit
Der Ereignisfluss in JavaScript hat drei wichtige Phasen – die Ereigniserfassungsphase, die Zielphase und die Ereignis-Bubbling-Phase. Event Capturing ist der erste Schritt, bei dem die Ereignisse bei Bedarf abgefangen werden. Danach erreicht das Ereignis das eigentliche Ziel und die letzte Phase sprudelt, wenn die endgültige Reaktion auf ein Ereignis stattfindet. Somit kann zutreffend geschlussfolgert werden, dass Event Bubbling und Event Capturing in JavaScript die Grundlagen sind, auf denen Event-Handler und Event-Delegierung angewiesen sind.
Wenn Sie mehr über Full-Stack erfahren möchten, sehen Sie sich das PG-Diplom in Full-Stack-Softwareentwicklung von upGrad & IIIT-B an, das für Berufstätige konzipiert ist und mehr als 500 Stunden strenges Training, mehr als 9 Projekte und Aufgaben, IIIT- B Alumni-Status, praktische Schlusssteinprojekte und Arbeitsunterstützung bei Top-Unternehmen.