JavaScript

9.6 Event-Bubbling

In HTML sind die verschiedenen Elemente ineinander verschachtelt. In JavaScript wird diese Verschachtelung durch das Document Object Model dargestellt, das Sie in Lerneinheit 7 kennen gelernt haben. Die Wurzel des in JavaScript verfügbaren Objektbaumes bildet das Objekt window, welches das aktuelle Browserfenster repräsentiert. Der Baum verzweigt bis zu einzelnen Bildern, Formularfeldern, Absätzen und so weiter. Welches dieser Objekte ist nun für ein aufgetretenes Ereignis zuständig? Was passiert, wenn mehrere Objekte den gleichen Event-Handler besitzen und deshalb auf das Ereignis reagieren könnten?

Die Lösung für dieses Problem ist das sogenannte Event-Bubbling. Das Ereignis wird immer zuerst im innersten Element bzw. im Objekt, das in der Hierarchie am weitesten von der Wurzel entfernt ist, ausgelöst. Hat dieses Objekt das Ereignis verarbeitet oder hat es keinen geeigneten Event-Handler, wird das Ereignis an das nächsthöhere Objekt weitergeleitet. Es steigt wie eine Blase (Bubble) auf bis zur Wurzel, dem Objekt window.

Wir möchten dies an folgendem Beispiel erläutern und demonstrieren. Klickt der Benutzer auf den Text, der nur zwischen den Tags <p> und </p> eingefasst ist, wird auch nur pClick() aufgerufen. Klickt der Benutzer aber auf den fetten Text, erhält er zuerst die Meldung von bClick() und dann anschließend die aus pClick().

<script type="text/javascript"> 
  function pClick() { 
    alert("Sie haben die Maustaste in <p> gedrückt"); 
  } 
  function bClick() { 
    alert("Sie haben die Maustaste in <b> gedrückt"); 
  } 
</script> 
 
<p onclick="pClick()"> 
  Im Browser wird ein Ereignis ausgelöst, 
  wenn Sie diesen Text anklicken.<br> 
  <b onClick="bClick()">Anklicken dieses Textes löst ein anderes Event aus </b> 
</p>

Dieses Bubbling der Ereignisse können Sie verhindern. Oft genügt es, wenn ein Ereignis einmal verarbeitet wird und nicht, wie im Beispiel, zweimal von verschiedenen Elementen/Objekten. Dazu setzen Sie die Eigenschaft cancelBubble des Event-Objekts auf true. Hier das Beispiel für den Internet Explorer:

<script type="text/javascript"> 
  function pClick() { 
    alert("Sie haben die Maustaste in <p> gedrückt"); 
  } 
  function bClick() { 
    alert("Sie haben die Maustaste in <b> gedrückt");
    event.cancelBubble = true; 
  } 
</script> 
 
<p onclick="pClick()"> 
  Im Browser wird ein Ereignis ausgelöst, 
  wenn Sie diesen Text anklicken.<br> 
  <b onClick="bClick()">Anklicken dieses Textes löst ein anderes Event aus </b> 
</p>

Nun wird das Aufrufen des Event-Handlers des p-Elements unterdrückt, wenn man auf den fetten Text klickt. In Netscape-Browsern muss dafür natürlich das Event-Objekt als Parameter übergeben werden:

<script type="text/javascript"> 
  function pClick() { 
    alert("Sie haben die Maustaste in <p> gedrückt"); 
  } 
  function bClick(e) { 
    alert("Sie haben die Maustaste in <b> gedrückt");
    e.cancelBubble = true; 
  } 
</script> 
 
<p onclick="pClick()"> 
  Im Browser wird ein Ereignis ausgelöst, 
  wenn Sie diesen Text anklicken.<br> 
  <b onClick="bClick(event)">Anklicken dieses Textes löst ein anderes Event aus </b> 
</p>

Kommentare (0)

Ihr Kommentar

Name