Mehrere EventListener DOMContentLoaded - Reihenfolge?

[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 ↩︎