fbpx

Javascript Event Delegation


Schreibe übersichtlicheren Code mit diesem einfachen Trick.

29.01.2022 | Steven Uster | Entwicklung

Ein Event auf einer Website sind Dinge die auf der Seite passieren. Dies können sichtbare Ereignisseder Nutzer hat auf ein Element geklicket – oder unsichtbare Ereignisseeine Variable wurde im Browserspeicher angelegt – sein.

In Javascript können solche Events mit einem Event Listener abgehört werden. Ein Event Listener kann entweder direkt im HTML Tag angegeben werden

<button onclick=“mein Javascript“>Klicke Hier!</button>

oder im Javascript

button.onclick = () => { mein Javascript } // oder

button.addEventListener("click", () => { mein Javascript })

Wofür brauche ich Event Delegation?

Jedem Element seinen eignen Event Listener zu geben ist absolut in Ordnung. Bei größeren Komponenten mit vielen interaktiven Elementen kann das jedoch schnell unübersichtlich werden.

Ein Beispiel für ein solches Element ist eine verschachtelte Liste, welche ein- und aufklappbar sein soll.

<ul>
  <li><span onclick="toggleList()">Layer 1 Element</span>
    <ul>
      <li><span onclick="toggleList()">Layer 2 Element</span>
        <ul>
          <li><span onclick="toggleList()">Layer 3 Element</span>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Es ist jedem sofort ersichtlich, dass eine solche Vergabe der Event Listener schnell unübersichtlich wird.

 

Prinzip der Event Delegation

Das Prinzip der Event Delegation ist es, anstatt jedem Element einzeln einen Listener zu geben wird nur einer dem Elternelement zugewiesen. Im Javascript muss dann überprüft werden worauf geklickt wurde.

Innerhalb des Event Listeners gibt es das Event Objekt, welches normalerweise als Parameter an eine ausgelagerte Funktion übergeben wird. In diesem Objekt ist unteranderem das Ziel gespeichert (event.target). Die Javascript Funktion muss nur noch prüfen, ob das Target die gewünschte Klasse oder Tag besitzt.

Im folgenden interaktiven Beispiel ist die verschachtelte Liste mit nur einem Listener nach dem Prinziep der Event Delegation umgesetzt:

See the Pen
Tree Diagramm mit einzelnen Event Listenern
by StevenUster (@stevenuster)
on CodePen.

Die zweite Variante bieten uns deutlich übersichtlicheren Code, egal wie viele Listen ineinander verschachtelt sind.

Dieser Trick lässt sich leicht auf viele andere Elemente und Interaktionen übertragen und ist nicht nur auf „klick“ Events beschränkt.