nicht angemeldet
Rolf BHallo Matze,
mit addEventListener kannst Du für jedes Event beliebig viele EventListener registrieren. Ausgeführt werden sie in Reihenfolge der Registrierung. Also, ja, der war gut 😉
Eine DOMContentLoaded-Steuerung brauchst Du dann und nur dann, wenn dein Script ausgeführt wird, bevor die darin angesprochenen DOM-Elemente existieren. Also dann, wenn das Script im <head> oder zu Beginn des <body> läuft.
Wenn es Dir zu unübersichtlich ist, deinen ganzen Code in einen DOMContentLoaded-Handler zu packen, dann kannst Du den Code auch in eine eigene Funktion schreiben, oder mehrere Funktionen, und als DOMContentLoaded-Handler eine kleine Funktion einsetzen, die deine eigenen Funktionen aufruft.
Es gibt aber auch Alternativen:
- das Script am Ende des <body> einbinden (dann wird erst das DOM aufgebaut und danach das Script geladen) - der Browser wartet eh mit der ersten Layout-Runde, bis die synchronen Scripte fertig sind.
- Dem script-Element das Attribut defer geben - solche Scripte werden asynchron geladen. Just bevor DOMContentLoaded ausgelöst wird, ist der Synchronisierungspunkt. Der Browser wartet an dieser Stelle, bis alle mit defer geladenen Scripte bereit sind, führt sie DANN aus und signalisiert DANN DOMContentLoaded.
- Dem script-Element das Attribut
type="module"geben. Für solche Module ist das defer-Attribut implizit gesetzt. Damit ändert sich allerdings auch ein bisschen die Art, wie das Script ausgeführt wird; ECMAScript-Module laufen grundsätzlich im Strict Mode und die globalen Variablen, die man darin definiert, sind in ihrer Sichtbarkeit auf das Script begrenzt.
Das async-Attribut gibt es auch, aber async-Scripte starten, sobald sie geladen sind. Ob das DOM schon fertig ist, weiß man nicht. Und der Browser wartet auch nicht auf async-Scripte, bevor er die Seite anzeigt.
Rolf
sumpsi - posui - obstruxi