Mehrere EventListener DOMContentLoaded - Reihenfolge?

[Linuchs]

Moin,

ich füge meinen Webseiten externe js-Dateien zu. Mehrere können

window.addEventListener('DOMContentLoaded', function () {
...
});

enthalten, z.B.

• Seitenzahl hinzufügen
• Audios (mp3) auf halbe Lautstärke stellen und mit EventListener versehen
• von A4 auf A3 umformatieren

Nun habe ich festgestellt, wenn die Audis Eventlistener bekommen und danach im DOM verschoben werden, hängen die Listener nicht mehr dran.

Also muss ich eine Reihenfolge beim Aufruf der js-Dateien einhalten?

Wie ist denn die Regel, wenn ein 'DOMContentLoaded' läuft, müssen die anderen 'DOMContentLoaded' warten? Und wie ist es, wenn die zweite js-Datei eher geladen wird als die erste?

Ich hoffe, mich verständlich ausgedrückt zu haben.

Gruß, Linuchs

[Gunnar Bittersmann]

@@Linuchs

Nun habe ich festgestellt, wenn die Audis Eventlistener bekommen und danach im DOM verschoben werden, hängen die Listener nicht mehr dran.

Ach ja? Ich hab in meinem Beispiel einen Button mit Eventlistener, den ich im DOM verschiebe. Und der Listener hängt erwartungsgemäß immer noch dran.

Ich hoffe, mich verständlich ausgedrückt zu haben.

Nein, leider wieder nicht. Warum überrascht mich das nicht?

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Linuchs,

grundsätzlich sollten DOMContentLoaded Handler in der Reihenfolge ihrer Registrierung ausgeführt werden. Wenn Du also 3 Scripte im Head hast, von denen jedes einen DOMContentLoaded Handler registriert, sollten diese Handler in der Reihenfolge laufen, in der auch die Scripte im Head stehen.

Wie ist denn die Regel, wenn ein 'DOMContentLoaded' läuft, müssen die anderen 'DOMContentLoaded' warten?

JavaScript ist single-threaded. Zwei Funktionen können nicht gleichzeitig laufen (ja, ich weiß, es gibt Worker. Aber die können keine Events vom Window-Scope behandeln).

Nun habe ich festgestellt, wenn die Audis Eventlistener bekommen und danach im DOM verschoben werden, hängen die Listener nicht mehr dran.

Dazu kann ich an meinem aktuellen Aufenthaltsort keine Experimente machen. Aber was hat das mit DOMContentLoaded Listenern am window-Objekt zu tun? Bist Du sicher, dass da nicht etwas anderes querschießt? Gibt's Fehlermeldungen in der Browserkonsole? Hast Du die Audis überhaupt gefunden, um zu registrieren? Hast Du das gedebuggt?

Quid semper…^[1]

An Stelle von DOMContentLoaded Events kannst Du auch

• die Scripte mit der Option defer laden.
• die Scripte als type="module" schreiben - ECMAScript-Module laden automatisch als defer. Das hat allerdings noch ein paar Konsequenzen mehr und will gut überlegt sein (automatisch im strict-mode und alle Variablen und Funktionen sind lokal im Script, sofern nicht exportiert)

Beide Typen von Scripten werden im Hintergrund geladen, während das DOM geparsed wird. Wenn das DOM fertig ist, wird abgewartet, bis alle defer-Scripte da sind, und dann werden sie in der Reihenfolge, in der sie im HTML standen, ausgeführt. Danach wird DOMContentLoaded ausgelöst.

Falls Du script-Elemente dynamisch einfügst, mag das wieder anders aussehen. Damit kenne ich mich nicht hinreichend aus.

Wenn Du eine priorisierte Reihenfolge von DOMContentLoaded Listenern erreichen willst, die von der Ladereihenfolge der Scripte unabhängig ist, musst Du Dir einen Manager dafür schreiben. D.h. ein einziger Handler, und eine Prioritätsliste mit den übrigen Handlern. Jeder, der im DOMContentLoaded Event etwas tun will, registriert sich dann mit seiner Priorität beim DOMContentLoaded-Manager. Aber das sollte wohl nur in Ausnahmefällen nötig sein.

Rolf

---

1. What Ever ↩︎