Wie prüfen, ob es EventListener schon gibt?

[Anne Kaffeekanne]

Hallo...

hab folgendes Problem :(

Habe einen EventListener der mit dem resize Event feuert. Würde nun gerne überprüfen, ob es diesen Listener bereits im DOM gibt, und wenn nicht, dann würde ich ihn gerne hinzufügen.

Dachte da etwa in die Richtung, den Listener in einer Variable zu speichern:

let listenerStorage = window.addEventListener('resize', function_n1);
// (...)
if (!listenerStorage) {
	listenerStorage = window.addEventListener('resize', function_n1);
}

..funktioniert nur leider nicht :(

Wie kann ich also überprüfen, ob es diesen resize Listener schon gibt, sodass ich ihn nicht x-Mal hinzufüge?

Dank euch recht!

Anne.

[JürgenB]

Hallo,

addEventListener hat keinen Rückgabewert. Aber du kannst dir ja merken, das der Eventlistener gesetzt wurde:

let resize_listener_added = false;

// (...)

window.addEventListener('resize', function_n1);
resize_listener_added = true;

// (...)

if (!resize_listener_added) {
	listenerStorage = window.addEventListener('resize', function_n1);
	resize_listener_added = true;
}

Gruß
Jürgen

Edit Rolf B: s/_set/_added/g

[Rolf B]

Hallo Anne,

nein, addEventListener gibt nichts zurück.

Bei einer guten Programmstrukturierung sollte man nicht in die Verlegenheit kommen. Da hat man einen Initialisierungsteil, wo man Eventhandler registriert, und gut ist. Wieso musst Du einen resize-Handler „bei Bedarf nachinstallieren“?

Aber von meinem Elfenbeinturm herunter übersehe ich vermutlich die schmutzigen Details im Sumpf der Realität.

Möglichkeit 1: Führe jede Registrierung so aus. Nicht wirklich schön:

window.removeEventListener('resize', function_n1);
window.addEventListener('resize', function_n1);

Setzt voraus, dass es genau eine Handler-Funktion gibt. Remove muss genau das gleiche Funktionsobjekt bekommen wie add, sonst passiert nichts.

Möglichkeit 2: Speichere dir in einer separaten booleschen Variablen, ob Du den Eventhandler schon registriert hast. Das kannst Du, wie Jürgen schrieb, in einer Variablen tun. Du könntest dafür auch den Umstand ausnutzen, dass Funktionen in JavaScript Objekte sind, denen man jederzeit Propertys ankleben kann.

function handleResizeEvent() {
   // do something
}
handleResizeEvent.registered = false;

// an anderer Stelle
if (!handleResizeEvent.registered) {
   window.addEventListener('resize', handleResizeEvent);
   handleResizeEvent.registered = true;
}

Auch hier brauchst Du eine klar definierte Handlerfunktion.

Darf ich fragen, was Du mit dem resize-Handler tun willst? Layout ist, wenn irgend möglich, die Aufgabe von CSS, und JavaScript nimmt man nur, wenn es mit CSS gar nicht geht. Die Performance von CSS Layout ist auch wesentlich besser, weil die Layout-Engine direkt in C++ oder ähnlichem geschrieben ist und auf interne Daten des Layout zugreifen kann, statt über das DOM API zu gehen.

Rolf