Event delegation

Aktuell haben wir auf jedem Dot einen EventListener. Bei drei Dots ist das ja noch ok, bei 100 nicht mehr, und außerdem ist es nicht elegant. Mit Event Delegation können wir auf einen EventListener reduzieren.

Using the event delegation pattern

Statt auf alle Dots zu lauschen, legen wir einen EventListener auf das umgebende Element, also den nächstmöglichen Vorfahr. Das ist in dem Fall .carousel-dots.

const dotsContainer = carousel.querySelector('.carousel-dots');

dotsContainer.addEventListener('click', e => {
  // do sth.
});

Daraus ergibt sich ein kleines Problem: der Event wird auch dann getriggert, wenn wir schlampig sind und zwischen die Dots klicken. Wir müssen also sicherstellen, dass ein Dot geklickt wurde. Das erreichen wir mit closest oder matches.

dotsContainer.addEventListener('click', e => {
  const dot = event.target.closest('button');
  if (dot) {
    // do sth.
  }
});

Der Rest bleibt wie gehabt.