> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baenninger.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Event Delegation

Bei der Event Delegation machen wir uns die Eigenschaften von [Event Propagation](/web/javascript/javascript-im-browser-dom-und-events/event-propagation/README) zu nutzen, genauer gesagt der [Bubbling Phase](./#bubbling-phase-1).

Event Delegation benutzen wir dann, wenn wir auf vielen Elementen den gleichen Event-Listener erstellen müssen.

<Steps>
  <Step title="Gemeinsames Parent-Element suchen">
    Zuerst sucht man das gemeinsame Parent-Element. Auf diesem erstellt man dann einen Event-Listener.
  </Step>

  <Step title="Matching Strategy erstellen">
    In der Callback-Funktion muss man dann eine Matching Strategy erstellen, damit dieser Event-Listener nur ausgeführt wird, wenn auch wirklich mit dem gewollten Element interagiert wird.
  </Step>
</Steps>

## Beispiel

```javascript theme={null}
document.querySelector('.nav__links').addEventListener('click', (e) => {
  e.preventDefault();

  if (e.target.classList.contains('nav__link')) {
    const id = e.target.getAttribute('href');
    document.querySelector(id).scrollIntoView({ behavior: 'smooth' });
  }
});
```