Ihr Browser ist veraltet
Um sicher im Internet zu surfen und moderne Websites richtig darzustellen, empfehlen wir Ihnen ein Update.
Hier auf Updates prüfen

15.07.2022

Passive Eventlistener

Passive Eventlistener

In diesem Blogbeitrag wollen wir herausfinden, was passive Event Listener sind und wie wir sie bei der Perfomanceoptimierung unserer Webseite einsetzen können.

Was ist ein Event Listener?

Mit der addEventListener()-Methode fügen wir einem festgelegten Element Event Handler hinzu. Daraufhin führt der Event Handler eine Aktion aus, die bei Benutzereingaben, Benutzeraktionen oder Browseraktionen stattfindet. Es können Events sein, wie ´Laden abgeschlossen´, Klick auf ein Element oder das Laden eines Videos.

AddEventListener() behandelt Events für alle DOM-Objekte, für window, document oder individuelle Elemente der Webseite. Ein Element kann mehrere Event Handler bekommen. Diese können sich nicht überschreiben und sie können vom gleichen Typ sein, z. B. ´Click´-Events.

Syntax:

element.addEventListener(type, listener, options)

element = das ausgewählte Element

type = der zu verwendete Event Handler

listener = Funktion, die ausgeführt werden soll

options = zusätzliche Optionen (müssen nicht definiert werden)

Asyncronität

addEventListener ist asynchron: Wir rufen den Event Listener auf, bevor das Ereignis stattfindet, damit er Aktionen in Gang setzt, sobald das Ereignis erkannt wird. Bis es soweit ist, arbeitet der Browser die Seite ab und wartet nicht auf das Eintreten des Events. Das ist das Asynchrone an der Eventsteuerung: Während das Script auf das Laden eines Bildes wartet, kann es weitere Anweisungen wie z.B. Berechnungen durchführen.

Das onload-Problem

addEventListener kann Handler erst ausführen, wenn das Tag des Elements geladen wurde. Das heißt, zuerst müssen alle Elemente der Seite geladen werden (Markup, Style Sheets, Bilder und Plugins). Der Event Listener muss innerhalb einer Funktion aufgerufen werden, die von einem window.onload-Event angestoßen wurde.

Wird ein Ereignis-Handler registriert, bevor der Browser das HTML-Element geladen hat, kommt es zu einem JavaScript-Fehler: Das Objekt ist unbekannt.

Das Warten auf das Laden des vollständigen Dokuments führt zu einer Verzögerung bis zum Skript-Aufruf.

Verzögerung beim Scrollen

Ein weiteres Problem, das insbesondere bei Geräten mit Touchscreen auftreten kann, ist eine Verzögerung beim Scrollen. Das passiert, wenn auf einer Seite Touch- und Scroll-Event-Listener hinzugefügt sind.

Sie könnten zum Beispiel eingesetzt werden, um zu prüfen, ob eine bestimmte Strecke auf der Seite gescrollt wurde, um daraufhin ein bestimmtes Element einzublenden.

Der Browser wartet, bis sie ausgeführt wurden und führt erst dann das Scrollen fort. Dadurch wird das Scrollen der Seite verlangsamt oder gerät ins Stocken. Um dies zu umgehen, werden passive Event Listener eingesetzt.

Besser scrollen mit passiven Event Listenern

Bei den nicht passiven Event Listenern weiß der Browser nicht, ob sie den Bildlauf verhindern. Deshalb wartet er auf die Ausführung, bis die Seite sich weiterbewegt. Der passive Event Listener gibt dem Browser zu verstehen, dass er den Bildlauf nicht stören wird.

Syntax:

element.addEventListener(type, listener, {passive: true})

Beispiel:

document.addEventListener(´touchstart´, onTouchStart, {passive: true});

Er ist kompatibel mit den meisten Browsern. Kompatibilität kann auf caniuse.com geprüft werden:

In allen Browsern, außer Safari und Internet Explorer, ist der Default: {passive: false}. In Safari und Internet Explorer ist der Deafult true für Wheel- , Mousewheel- , Touchstart- und Touchmove-Events.

Für ältere Browser gibt es eine Feature Detection:

// Test via a getter in the options object to see if the passive property is accessed

var supportsPassive = false;

try {

var opts = Object.defineProperty({}, ´passive´, {

get: function() {

supportsPassive = true;

}

});

window.addEventListener(´testPassive´, null, opts);

window.removeEventListener(´testPassive´, null, opts);

} catch (e) {}

// Use our detect´s results. passive applied if supported, capture will be false either way.

elem.addEventListener(´touchstart´, fn, supportsPassive ? { passive: true } : false);

Enorme Performanceoptimiertung

Unsere Schlussfolgerung ist, dass mit einer sehr einfachen Funktion, die Performance einer Webseite enorm verbessert werden kann.