It’s #FrontendFriday – Bubbling im Web
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
<html>
<body>
<div onmouseenter="myEnterFunction()">
<p>onmouseenter: <br> <span id="enter-id">Mouse over me!</span></p>
</div>
<div onmouseover="myOverFunction()">
<p>onmouseover: <br> <span id="over-id">Mouse over me!</span></p>
</div>
<script>
var x = 0;
var y = 0;
function myEnterFunction() {
document.getElementById("enter-id").innerHTML = x+=1;
}
function myOverFunction() {
document.getElementById("over-id").innerHTML = y+=1;
}
</script>
</body>
</html>
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“.
| onmouseover | onmouseenter | |
| Bubbles: | ja | nein |
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.
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
Vielen Dank für den Artikel, Maximilian.
Das hat uns im Projekt geholfen ein Performance-Problem zu lösen. Es war allerdings sehr schwer zu erkennen, dass es daran liegt, so dass wir nur im Ausschlussverfahren darauf gekommen sind und zuvor etliches anderes ausprobieren mussten. Gibt es eine Möglichkeit, das irgendwie in der Entwicklerkonsole zu sehen, dass Event Bubbling die Ursache für Performance-Probleme ist? Außerdem schreibst du es sollte genau überlegt werden, welches Event verwendet werden soll. Nur was ist, was tun, wenn ich ein Event benötige, das Event Bubbling auslöst? Wie kann ich das verhindern? Und unter welchen Umständen macht Event Bubbling überhaupt Sinn?
Viele Grüße, Matthias