JavaScript/DOM/Event/bubbles

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Event
Wechseln zu: Navigation, Suche

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