Grundlegendes zur Ereignisausbreitung in JavaScript

Ereignisse in JavaScript verhalten sich wie Benachrichtigungen, dass eine Benutzerinteraktion oder eine andere Aktion stattgefunden hat. Wenn Sie beispielsweise auf eine Formularschaltfläche klicken, generiert Ihr Browser ein Ereignis, um anzuzeigen, dass dies passiert ist. Auch das Eingeben in ein Suchfeld löst Ereignisse aus und so funktioniert die automatische Vorschlagsfunktion online oft.

In JavaScript werden Ereignisse, die eine Benutzerinteraktion beinhalten, normalerweise gegen bestimmte Elemente ausgelöst. Wenn Sie beispielsweise auf eine Schaltfläche klicken, wird ein Ereignis für diese Schaltfläche ausgelöst. Aber Ereignisse breiten sich auch aus: Sie werden gegen andere Elemente in der Dokumenthierarchie ausgelöst.

Lesen Sie weiter, um alles über die Ereignisausbreitung und die beiden verfügbaren Arten zu erfahren.

Was ist Ereignisbehandlung in JavaScript?

Sie können JavaScript-Code verwenden, um Ereignisse abzufangen und darauf zu reagieren, die eine Webseite auslöst. Sie können dies tun, um das Standardverhalten zu überschreiben oder Maßnahmen zu ergreifen, wenn kein Standard vorhanden ist. Ein gängiges Beispiel ist die Formularvalidierung. Die Ereignisbehandlung ermöglicht es Ihnen, den normalen Prozess der Formularübermittlung zu unterbrechen.

Betrachten Sie dieses Beispiel:

Klick mich

Der obige Code hat ein Button-Element mit einer ID namens button. Es verfügt über einen Klickereignis-Listener, der eine Warnung mit der Nachricht anzeigt Hallo Welt.

Was ist Ereignisausbreitung?

Ereignisausbreitung beschreibt die Reihenfolge, in der die Ereignisse durch die DOM-Baum wenn der Webbrowser sie auslöst.

Angenommen, in einem div-Tag befindet sich ein form-Tag, und beide haben onclick-Ereignis-Listener. Event Propagation beschreibt, wie ein Ereignis-Listener nach dem anderen ausgelöst werden kann.

Es gibt zwei Arten der Vermehrung:

1. Event-Bubbling, bei dem Ereignisse vom Kind zum Elternteil nach oben sprudeln.
2. Ereigniserfassung, bei der Ereignisse von den Eltern zum Kind nach unten wandern.

Was ist Event-Bubbling in JavaScript?

Event-Bubbling bedeutet, dass die Richtung der Ereignisausbreitung vom untergeordneten Element zu seinem übergeordneten Element verläuft.

Betrachten Sie das folgende Beispiel. Es hat drei verschachtelte Elemente: div, form und button. Jedes Element hat a klicken Ereignis-Listener. Der Browser zeigt ein Alarm mit einer Nachricht, wenn Sie auf jedes Element klicken.

Standardmäßig ist die Reihenfolge, in der der Webbrowser Warnungen anzeigt, Schaltfläche, Formular, dann div. Die Ereignisse sprudeln von Kind zu Elternteil.

 div


 bilden 



 Taste

Was ist Ereigniserfassung?

Bei der Ereigniserfassung ist die Ausbreitungsreihenfolge das Gegenteil von Sprudeln. Ansonsten ist das Konzept identisch. Der einzige Unterschied zum Erfassen besteht darin, dass Ereignisse von Eltern zu Kind stattfinden. Im Gegensatz zum vorherigen Beispiel zeigt der Browser bei der Ereigniserfassung Warnungen in dieser Reihenfolge an: div, Formular und Schaltfläche.

Um die Ereigniserfassung zu erreichen, müssen Sie nur eine Änderung am Code vornehmen. Der zweite Parameter von addEventListener() definiert die Art der Verbreitung. Es ist standardmäßig false, um das Sprudeln darzustellen. Um die Ereigniserfassung zu aktivieren, müssen Sie den zweiten Parameter auf true setzen.

 div.addEventListener("click", ()=>{
 alert("div")
 }, wahr);
 form.addEventListener("click", ()=>{
 alert("Formular")
 }, wahr);
 button.addEventListener("click", ()=>{
 alarm("button")
 }, wahr);

Wie können Sie die Ausbreitung von Ereignissen verhindern?

Sie können die Verbreitung von Ereignissen unterbrechen, indem Sie die stopPropagation() Methode. Der addEventListener() -Methode akzeptiert einen Ereignisnamen und eine Handlerfunktion. Der Handler nimmt als Parameter ein Ereignisobjekt. Dieses Objekt enthält alle Informationen zum Ereignis.

Wenn Sie die aufrufen stopPropagation() -Methode wird das Ereignis an diesem Punkt nicht mehr weitergegeben. Zum Beispiel, wenn Sie. verwenden stopPropagation() Auf dem Formularelement hören die Ereignisse auf, bis zum div zu sprudeln. Wenn Sie auf die Schaltfläche klicken, werden Ereignisse für die Schaltfläche und das Formular angezeigt, jedoch nicht für das div.

form.addEventListener("click", (e)=>{
e.stopPropagation();
 alert("Formular");
});

Verwandt: Der ultimative JavaScript-Spickzettel

JavaScript hat viel Power unter der Haube

Die Ereignisbehandlung von JavaScript ist leistungsstark, vergleichbar mit vielen ausgewachsenen Oberflächensprachen. Wenn Sie interaktive Webanwendungen entwickeln, ist dies ein wichtiger Bestandteil Ihrer Toolbox. Aber es gibt noch viele andere fortgeschrittene Themen, die es zu begreifen gilt. Für professionelle JavaScript-Entwickler gibt es viel zu lernen!

Wenn Sie lernen möchten, JavaScript wie ein Profi zu programmieren, lesen Sie unseren Leitfaden für clevere Liner und bereiten Sie sich darauf vor, in Ihrem nächsten Interview zu begeistern.

11 JavaScript-Einzeiler, die Sie kennen sollten

Mit dieser großen Auswahl an JavaScript-Einzeilern können Sie mit nur wenig Code viel erreichen.

Weiter lesen

Über den Autor