Wenn man über JavaScript- Kernkonzepte spricht und mit der UI-Entwicklung arbeitet, ist „ Event Propagation “ eines der wichtigsten Themen.

In diesem Artikel gehen wir auf das Konzept der Ereignisverbreitung ein – Bubbling , Capture und Delegation .

Nehmen wir eine einfache Benutzeroberfläche an, in der wir ein DIV haben , in diesem „DIV“ gibt es ein „ FORM “ und in diesem Formular ist auch ein „ BUTTON “ vorhanden.

Schreiben wir nun einen einfachen JavaScript-Code, der allen drei Tags, also div, form und button, EVENT LISTENERS hinzufügt.

1. BUBBLING : Wie der Name schon sagt,bewegen sich Ereignisse wie Blasen von unten nach oben . Gemäß dem obigen JS-Code wird beim Klicken auf ein beliebiges Element dessen tagName als Warnung angezeigt.

Wie Sie nun sehen können, ist der Ablauf in der Warnung wie folgt: BUTTON -> FORM -> DIV

2. ERFASSEN (oder TRICKLING): Da wir alles von oben nach unten erfassen, wird das Ereignis, wie der Name schon sagt, von oben nach unten ausgelöst

JS-CODE für TRICKLING:

eventCapturingByRounit (codepen.io)

stopPropagation()-METHODE

Angenommen, wir möchten weder das Bubbling noch das Trickling ausführen, das heißt, wir möchten, dass beim Klicken auf die Schaltfläche nur das Ereignis „onClick Button“ ausgelöst wird.

VERANSTALTUNGSDELEGATION:-

Durch das Erfassen und Bubbling können wir eines der leistungsstärksten Ereignisbehandlungsmuster namens Ereignisdelegation implementieren .

Die Idee ist, dass wir, wenn viele Elemente auf ähnliche Weise behandelt werden, statt jedem von ihnen einen Handler zuzuweisen, einen einzelnen Handler für ihren gemeinsamen Vorfahren verwenden.

eventDelegation von Rounit Sinha (codepen.io)

Beispiel: Angenommen, es gibt eine E-Comm-App, in der verschiedene Kategorien vorhanden sind, z. B. MOBIL, KOPFHÖRER usw. (wie im Code gezeigt).

Jetzt müssen wir nicht allen vorhandenen Kategorien Ereignis-Listener hinzufügen. Wir können Ereignis-Listener nur zum übergeordneten Div hinzufügen, das hier zur Klasse „Produkte“ gehört.

Und da der Tag-Name für alle Kategorien nun „span“ ist, haben wir nur diejenigen mit dem Tag-Namen „span“ gefiltert und jetzt wird nur auf den Pfadnamen der Kategorien getriggert, bei denen der Tag-Name ausgewählt ist.

Lesen Sie mehr unter Event-Delegation (javascript.info)