JavaScript verwenden von EventListener

In diesem Beitrag beschäftigen wir uns mit dem Thema EventListener. Dabei geht es darum Events via. EventListener abzufangen und bestimmte Aktionen auszuführen.

Das ist gerade für die dynamische Programmierung im Browser zwingend notwendig um Aktionen ohne ein Neuladen der Seite ausführen zu können.

Ein EventListener Verwenden in JavaScript

Um ein EventListener zu verwenden, brauchen wir drei verschiedene Komponenten. Wir brauchen ein Event auf das wir hören wollen. Wir brauchen ein Element an diesem das Event ausgeführt werden soll und zu guter Letzt brauchen wir eine Funktion, die nun ausgeführt werden soll.

Als erstes kleines Beispiel fügen wir einem div ein Listener zum Klicken hinzu und ändern dann die Farbe des Elements bei jedem Klick.

Als Erstes selektieren wir unser Element, in dem Fall mittels QuerySelector. Anschließend prüfen wir, ob unser Element vorhanden ist, falls nicht, wird der Listener nicht registriert, da das zu Fehlern führen würde. Anschließend rufen wir die Methode addEventListener auf und registrieren das Event Click. Nun folgt eine Arrow Function (ES6 Syntax) dort definieren wir die Funktionalität, die bei einem Klick ausgeführt werden soll.

Du kannst die Funktion auch auslagern und diese dort nur als Parameter übergeben, das ist gerade dann sinnvoll, wenn du die Funktion an mehreren Stellen benötigst wird oder das Event wieder entfernen willst bei bestimmten Situationen.

Die Variable e ist immer das Event Objekt, dieses hat verschiedene Eigenschaften. Diese Variable mit dem Namen e zu bezeichnen kann man inzwischen schon als Standard ansehen. Die Eigenschaft target enthält immer das aktuelle Element, das angeklickt wurde. Vorsicht wenn das Element noch ein Kind-Elemente hat, ist das Target je nach Situation auch mal das Kind-Element, weshalb du dort noch anders vorgehen solltest. Mehr dazu später unter Event Bubbeling und Event Capture.

let div = document.querySelector('#clickListener');

if(div){
    div.addEventListener('click',e => {
        let target = e.target;

        if(target.style.backgroundColor == "rgb(27, 31, 33)"){
            target.style.backgroundColor = "rgb(239, 65, 54)";
        }else{
            target.style.backgroundColor = "rgb(27, 31, 33)";
        }
    });
}

Events nur einmalig ausführen

Um Events nur einmalig auszuführen, kannst du die once Option verwenden. Dann wird die Funktion nur einmal aufgerufen.

div.addEventListener('click', e => {
    /* ... */
},{once: true});

Events von einem Element entfernen

Manchmal willst du das Event nicht nur auf eine einmalige Ausführung begrenzen, sondern auch auf eine bestimmte Anzahl an Verwendungen oder es an einem bestimmten Punkt wieder zu deaktivieren. Die Methode removeEventListener kann dir dabei helfen. Wichtig ist, du musst hier die Funktion auslagern und auch die Option Parameter wie once oder capture exakt gleich setzen, sonst kann das zu Schwierigkeiten beim Entfernen des Events führen. Beachte, dass die Browser hier unterschiedlich in der Interpretation sein können deshalb ist es am besten die gleichen Eigenschaften wie beim Hinzufügen des Events zu verwenden.

Einmal eine Version des ersten Beispiels angepasst, für den neuen Use Case zeigt, dass auch ein removeEventListener möglich ist. Dabei ist zu beachten, es verhält sich jetzt so als wäre die Option once gesetzt. Da der clickHandler ausgeführt wird, wird am Ende der Listener wieder entfernt.

let div = document.querySelector('#clickListener');

if (div) {
    div.addEventListener('click',_clickHandler);
}

function _clickHandler(e){
    let target = e.target;

    if (target.style.backgroundColor == "rgb(27, 31, 33)") {
        target.style.backgroundColor = "rgb(239, 65, 54)";
    } else {
        target.style.backgroundColor = "rgb(27, 31, 33)";
    }

    target.removeEventListener('click',_clickHandler);
}

Ein weiterer Vorteil, dadurch das du die Funktion nun ausgelagert hast, ist, dass du die Funktion für andere Aktionen erneut verwenden kannst.

Was ist der Unterschied zwischen Event Bubbeling und Event Catpure ?

Der Unterschied zwischen der Capture und der Bubbel Methode ist, dass bei der Bubbel Methode erst das Event des geklickten Elements ausgelöst wird. Bei der Capture Methode wird als erstes Event das äußerste Event ausgelöst und dann zum innersten vorgearbeitet.

In der Beispielgrafik wurde das grüne Element angeklickt und es wurde für jedes der Elemente sowohl Capture als auch das Standard “Bubbel” Event registriert. Wodurch du nun erkennen kannst, in welcher Rangfolge die Elemente ausgelöst werden.

Für eine Capture Event muss zusätzlich dieses als Option angegeben werden, diese kann so aussehen:

zero.addEventListener('click',e => {
    appendText('1. ebene 0 - red - capture');
  },{capture: true});

Das besondere ist e.target, das zeigt immer auf das direktangeklickte Element, auch wenn ein äußeres Event ausgelöst wird. Dadurch ist bei allen sechs Events das gleiche Element das Target. Deshalb muss du immer darauf achten, wann du welches Event auslösen willst.

Das bedeutet, selbst wenn das grüne Element kein Event hat, aber das rote und orange, dann wird 1. , 2. , 5. und 6. ausgelöst. Aber das Target bleibt das grüne Element. Dadurch solltest du, wenn du mit dem Target Attribute Arbeiten willst, immer prüfen welches Element genau angeklickt wurde.

Wenn du zum Beispiel den Fall hast, dass du nur bis zum grünen Capture Event die Events ablaufen willst, dann kannst du die Methode e.stopPropagation(); verwenden. Damit werden keine nachfolgende Events, seien es Capture oder Bubbel Events, ausgeführt.

Ein interaktives Beispiel wo du auch selber einmal am Code ausprobieren kannst, was stopPropagation so bewirkt, findest du auf CodePen.

Interaktives Beispiel auf CodePen 

let a = document.querySelector('a');

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

        if(e.target.tagName != "A"){
            target = e.target.closest('a');
        }else{
            target = e.target;
        }

        target // Element a
    })
}

Ausführen von Standard Events des Browsers verhindern

Neben den Events die über EventListener registriert werden können gibt es noch Standard Events wie zum Beispiel das Form Submit oder das Anklicken von einem Link.

Manchmal ist es notwendig, dass man diese Events nicht verwenden will bzw. ein eigenes Event zum Beispiel auf einen Link legen. Um die Standardevents des Browsers nun zu verhindern, kannst du e.preventDefault() verwenden.

Noch einmal ein Beispiel wo der selektierte Link nicht geöffnet wird, durch die Verwendung von preventDefault.

let a = document.querySelector('a');

if(a){
    a.addEventListener('click',e => {
        e.preventDefault();
        alert('Der Link wird nicht geöffnet');
    });
}

Ich persönlich habe diesen Fall zum Beispiel auch häufig bei Formularen um das Versenden zu verhindern und erst einmal eine Validierung mittels JavaScript vorher auszuführen.

Interessante JavaScript Events, die du kennen solltest!

Es gibt einige Events in JavaScript, die du verwenden kannst, hier eine kleine Übersicht von Events, die ich regelmäßig benötige.

Alle Events hier aufzulisten hätte den Rahmen etwas gesprengt. Eine komplette und aktuelle Auflistung findest du in der Dokumentation von Mozzila.

Fazit

Es gibt noch viele weitere interessante Events, die du verwenden kannst, um deine Webseite interaktiver zu gestalten. Hier habe ich dir Einblicke gegeben, wie du die verschiedenen Funktionalitäten der Methode addEventListener verwenden kannst, um eine besondere Webseite zu erstellen.