Ein Event auf einer Website sind Dinge die auf der Seite passieren. Dies können sichtbare Ereignisse – der Nutzer hat auf ein Element geklicket – oder unsichtbare Ereignisse – eine 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
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.