Listening to events

Events in JavaScript sagen uns, dass etwas passiert ist. Wenn der User irgendwohin klickt, wird ein click Event gefeuert. Wenn der User eine Taste auf der Tastatur drückt, werden die keydown und keyup (und auch keypressed) Events gefeuert. Auf MDN gibt’s eine Liste der verfügbaren Events.

Listening for events

Wenn ein User ein Element anklickt, aber keiner sieht oder hört es – wurde dann ein Event gefeuert oder nicht? Genau dafür brauchen wir einen Event Listener. Event Listener sind die Alarmanlage für User-Interaktionen. Wir können jedem Element im DOM einen Event Listener mitgeben.

• event-name ist der Name des Events, nach dem gelauscht wird (click, keydown, …)
• e ist der Platzhalter (parameter) für das Event, das der ausführenden Funktion als Argument übergeben wird (siehe unten: event object)
• die ausführende Funktion nennen wir event-handler

// Event listener with an anonymous function
Element.addEventListener('event-name', function (e) {});

// Event listener with an arrow function
Element.addEventListener('event-name', (e) => {});
Element.addEventListener('event-name', e => {});

Listening for a click

Wir fügen nun einem Button einen EventListener hinzu. Dafür müssen wir zuerst den Button auswählen. Der Button soll auf das Klick-Event hören und der Event Handler soll in der Konsole eine Erfolgsmeldung ausgeben. So wissen wir, dass der EventListener funktioniert.

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

button.addEventListener('click', e => {
  console.log('Der Button wurde geklickt!');
});

The event object

Alle EventListener Callback-Funktionen akzeptieren ein Argument. Dieses Argument ist das Event Objekt. Meistens wird es mit e oder ev oder ähnlichem abgekürzt.

Events in DevTools

Firefox markiert alle Element, die mit einem Event belegt sind, mit einem event Icon. Wenn man draufklickt, werden weitere Informationen dazu angezeigt. Chrome ist etwas sperriger. Hier öffnet man die Konsole und tippt getEventListeners(element) ein, wobei element natürlich das Element ist, das man untersuchen möchte.
Man kann auch das Element direkt anklicken und getEventListeners($0) eintippen und so auf das Element zugreifen.

The listening element

Angenommen, wir wollen mit dem Klick auf einen Button diesen blau färben:

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

button.addEventListener('click', e => {
  button.style.color = 'steelblue';
});

Der Button ist nun unser listening element.

Was würde nun passieren, wenn wir eine separate Callback-Funktion schreiben?

function changeButtonColor(e) {
  button.style.color = "steelblue";
}

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

Funktioniert das auch noch? Ja, weil button vor Aufruf der Funktion changeButtonColor deklariert wird. Falls die Konstante button aber umbenannt wird, funktioniert der Code nicht mehr, weil das listening element in der Funktion anders bezeichnet wird. Wir müssten auch dieses umbenennen.

function changeButtonColor(e) {
  button.style.color = "steelblue";
}

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

Wie kommt also das listening element in die Callback-Funktion, ohne die Variable button zu verwenden? Dafür gibt es zwei Wege:

• das this Keyword
• Event.currentTarget

The this keyword

this ist ein Keyword in JavaScript. Seine Bedeutung wechselt je nachdem, wie eine Funktion aufgerufen wird. Es bezieht sich auf das listening element, wenn eine normale Funktion als Callback für einen EventListener verwendet wird.

const button = document.querySelector('button');
button.addEventListener('click', function (e) {
  console.log(this);
});

// das funktioniert NICHT mit einer arrow function:
button.addEventListener('click', e => {
  console.log(this);
});

Event.currentTarget

Alle EventListener Callbacks akzeptieren ein Argument: dieses Argument ist das event object, das üblicherweise mit e oder event (oder oder …) abgekürzt wird.

button.addEventListener('click', e => {
  console.log(e.currentTarget);
});

Note

In der Konsole erhalten wir sowohl Informationen über das Event selbst als auch über das Ziel des Events:

button.addEventListener('click', e => {
  // Informationen über das Event:
  console.log(e);

  // Informationen über das Event Object:
  console.log(e.currentTarget);
});

Die Callback-Funktion können wir also auch auf diese Weise schreiben:

function changeColor(e) {
  e.currentTarget.style.color = 'steelblue';
}

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

Default behaviours

Manche HTML-Elemente triggern standardmäßig gewisse Events, ohne dass ein EventListener angebracht werden muss:

• Links: Der Browser leitet auf die Seite weiter, die im href Attribut hinterlegt wurde.
• Checkbox: Wenn eine Checkbox geklickt wird, setzt der Browser ein Häkchen (oder entfernt es wieder)
• Absendebutton in einem Formular: Wenn ein Button innerhalb eines Formulars geklickt wird, triggert der Browser das Submit-Event und leitet auf die Seite weiter, die im action Attribut hinterlegt wurde.

Preventing default actions

Manchmal wollen wir so eine Standardfunktion unterbinden. Das geht mit der preventDefault() Methode des Event-Objekts:

Element.addEventListener('click', e => {
  e.preventDefault();

  // der Browser setzt automatisch die defaultPrevent Eigenschaft auf true:
  console.log(e.defaultPrevented); // true
});