Removing Event Listeners

EventListeners bleiben für alle Ewigkeiten im DOM. Wenn wir sie nicht mehr brauchen, sollten wir sie entfernen.

Die Syntax zum Entfernen eines EventListeners sieht so aus:

element.removeEventListener('event-name', callback);

Callbacks für EventListener, die wieder entfernt werden müssen, dürfen keine Arrow-Functions sein, wir brauchen eine Funktionsdeklaration.

Removing a click event listener

Bei Klick auf einen Button soll ein EventListener ein console.log ausgeben:

const button = document.querySelector('button');

button.addEventListener('click', e => {
  console.log('This button was clicked!');
});

Als erstes müssen wir eine benannte Referenz für die Callback-Funktion erstellen:

function buttonCallback() {
  console.log('This button was clicked!');
}

const button = document.querySelector('button');
button.addEventListener('click', buttonCallback);

Diese Referenz benutzen wir, wenn wir den EventListener entfernen:

button.removeEventListener('click', buttonCallback);

A listener that activates once

Wenn ein EventListener genau einmal aktiviert werden soll, kann er in der gleichen Funktion entfernt werden:

function listenOnce(e) {
  console.log('This button was clicked!');
  e.currentTarget.removeEventListener('click', listenOnce);
}

const button = document.querySelector('button');
button.addEventListener('click', listenOnce);

Exercise

An listener that listens for five clicks

Add an EventListener to a button. After five clicks, the EventListener should be removed.

const button = document.querySelector('.fiveClicks');
let click = 1;

function fiveClicks(e) {
  if (click < 6) {
    console.log(`The button was clicked ${click} times!`);
    click += 1;
  } else {
    e.currentTarget.removeEventListener('click', fiveClicks);
    console.log('The EventListener was removed!');
  }
}

button.addEventListener('click', fiveClicks);

// offizielle Lösung:
const btn = document.querySelector('.btn-one');

function clickFive(e) {
  const elem = e.currentTarget;
  const prevCount = parseInt(elem.dataset.count) || 0;
  const currentCount = prevCount + 1;
  elem.dataset.count = currentCount;

  console.log(`The button was clicked ${currentCount} times!`);

  if (currentCount === 5) {
    elem.removeEventListener('click', clickFive);
  };
};

btn.addEventListener('click', clickFive);