JavaScript: Bubbling

[dedlfix]

Tach!

Hättet Ihr eine Idee für ein praktisches Anwendungsbeispiel (evtl. ein Formular / Quiz) für event.bubbles, event.cancelable und stopProgagation bzw. für bubbling- und Capturing-phase?

Man möchte nicht tausend Event-Handler registrieren, wenn man tausend Elemente mit Events in einem Bereich hat, die alle prinzipiell dasselbe machen sollen. Stattdessen registriert man nur einen Eventhandler in einem gemeinsamen übergeordneten Element. In dem kann man dann auch prüfen, ob eines der gewünschten Elemente das Ereignis ausgelöst hat. Beispielsweise den Event-Handler in einer table mit Datensätzen ansiedeln und dann prüfen, ob es einer der "Bearbeiten"-Buttons war.

<table id="records">
  <tr>
    <td>42</td>
    <td>content</td>
    <td>
      <button type="button" data-id="42">Bearbeiten</button>
    </td>
  </tr>
  <!-- weitere tr nach demselben Schema -->
</table>

document.getElementById('records').addEventListener('click', function (event) {
  // wenn keine anderen Buttons in der Tabelle sind,
  // ansonsten muss man genauer prüfen.
  if (event.target.nodeName == 'button') {
    console.log('Datensatz %s wurde zum Bearbeiten ausgewählt', event.target.dataset.id);
  }
});

dedlfix.