192 VIEWS

It’s #FrontendFriday – Bubbling im Web

27.03.2020

It’s FrontendFriday und passend dazu wird heute über Bubbling im Web gebloggt.

Was ist Bubbling überhaupt?

Bubbling beschreibt eine Phase in der Event Propagation in JavaScript. Dabei folgt das Bubbling dem Prinzip:

When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.

Quelle: https://javascript.info/bubbling-and-capturing

Wie sieht das ganze in der Praxis aus? Anhand von zwei unterschiedlichen Beispielen

Ein Praxisbeispiel zur Veranschaulichung findet sich hier: Praxisbeispiel Bubbling

Der obige Programmcode enthält zwei unterschiedliche DIV-Container mit jeweils zwei Child Elementen. Auf dem einen Parent DIV-Container liegt ein „onmouseenter“ auf dem anderen ein „onmouseover“.

onmouseoveronmouseenter
Bubbles:janein

Was ist nun der konkrete Unterschied?

onmouseover

  • Dadurch, dass onmouseover bubbled wird bei jedem Überschreiten der Maus eines Child Elements das Event durch alle Parent Elemente weitergereicht und ausgeführt. Fahren wir also mit der Maus einmal von unten nach oben über den gesamten Parent Container, wird insgesamt 3x (Span, P & DIV) das Event ausgeführt.

 

onmouseenter

  • Das Event bubbled nicht und führt deshalb das Event nur auf genau dem definierten Element aus. Fahren wir also mit der Maus einmal von unten nach oben über den gesamten Parent Container, wird das Event nur 1x (DIV) ausgeführt.

 

Fazit

Beim Einsatz von JavaScript Events sollte genau überlegt werden, welches Event verwendet werden soll. In der Praxis kann der falsche Einsatz von Events durch die Event Propagation sich negativ auf die Performanz der Anwendung auswirken.

Eine Übersicht zu JavaScript Events und Bubbles findet sich hier: JavaScript Events

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*Pflichtfelder

*

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.