JavaScript/DOM/Event/bubbles
Aus SELFHTML-Wiki
< JavaScript | DOM | Event
Die Eigenschaft event.bubbles gibt einen Booleschen Wert zurück, der anzeigt, ob ein Ereignis auch für Eltern-Elemente gilt und dementsprechend im Elementenbaum aufsteigt (Bubbling).
Syntax
bool = event.bubbles
Anwendungsbeispiel
Beispiel
ansehen …
function init() {
var button = document.getElementById('button');
button.addEventListener('click', auswerten);
}
function auswerten(event) {
var bool = event.bubbles;
document.getElementById('ausgabe').textContent = bool;
}
verschachtelte DOM-Elemente
DOM-Elemente können ineinander verschachtelt sein. Ein im Eltern-Element integrierter Event-Handler kann trotzdem z. B. durch einen Klick auf ein Kind-Element ausgelöst werden. Diesen Vorgang nennt man Event-Bubbling, da das Ereignis vom Kind-Element bis zum eigentlich angesprochenen Eltern-Element aufsteigt.
Beispiel
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p onclick="alert('Event-Handler funktioniert!')">
Klicken Sie hier auf den <em>markierten Text</em> und nicht den normalen Absatz.
</p>
</body>
</html>
Den Urspung des ausgelösten Event-Handlers können Sie mit event.target ermitteln.
Weblinks
- W3C: bubbles
- MDN: Event.bubbles
- molily: Arbeiten mit dem Event-Objekt - Der Event-Fluss: Bubbling (von Matthias Schäfer)
- methode-web.de: javascript-event-bubbling
