Fenster- und Dokument-Events

Fenster- und Dokument-Events reagieren auf die Seite selbst – zum Beispiel wenn sie geladen ist, gescrollt oder das Browserfenster vergrößert wird. Damit steuerst du Verhalten, das vom Viewport oder vom Ladezustand abhängt.

load

Das window-Objekt steht für das Browserfenster. Darüber greifst du auf Fenstergröße, Scrollposition und Events wie load, scroll und resize zu.

Das load-Event am window feuert erst, wenn die Seite komplett geladen ist: HTML, CSS, Bilder, Schriftarten und eingebettete Dateien. Vorher fehlen oft noch Ressourcen – z. B. hat ein Bild noch keine fertige Breite.

Typische Beispiele: Bildgröße auslesen, Lade-Animation ausblenden oder erst starten, wenn alles sichtbar ist.

1window.addEventListener("load", function() {
2    console.log("Seite inklusive Bilder ist geladen");
3});

1window.addEventListener("load", function() {
2    const bild = document.getElementById("hero");
3    console.log("Bildbreite:", bild.width);
4});

DOMContentLoaded

DOMContentLoaded am document feuert früher: sobald das HTML geparst ist. Bilder müssen noch nicht fertig geladen sein.

1document.addEventListener("DOMContentLoaded", function() {
2    console.log("HTML ist bereit – Scripts können starten");
3});

Unterschied zwischen load und DOMContentLoaded

DOMContentLoaded = HTML ist bereit. load = alles ist fertig (auch Bilder). Für DOM-Zugriffe reicht meist DOMContentLoaded – es ist schneller.

scroll

Das scroll-Event wird ausgelöst, wenn der Nutzer die Seite scrollt. Typisch: Scroll-Position prüfen oder Elemente ein-/ausblenden.

1window.addEventListener("scroll", function() {
2    console.log("Seite wurde gescrollt");
3});

Scrollposition mit scrollY

window.scrollY gibt an, wie weit die Seite vertikal gescrollt ist (in Pixeln von oben). Zusammen mit scrollerkennst du z. B., ob der Nutzer schon weit nach unten ist.

1window.addEventListener("scroll", function() {
2    console.log("Scrollposition:", window.scrollY);
3});

resize

resize feuert, wenn sich die Fenstergröße ändert – zum Beispiel beim Verkleinern des Browsers oder Drehen eines Handys.

1window.addEventListener("resize", function() {
2    console.log("Fenstergröße hat sich geändert");
3});

Fensterbreite mit innerWidth

Mit window.innerWidth liest du die aktuelle Fensterbreite in Pixeln. Oft kombiniert mit resize, um auf Breakpoints zu reagieren.

1window.addEventListener("resize", function() {
2    console.log("Breite:", window.innerWidth);
3});

Merksatz: Für DOM-Zugriff nutzt du meist DOMContentLoaded. Mit scroll, resize, scrollY und innerWidth reagierst du auf Viewport und Scrollverhalten.