Window: resize — Ereignis · JavaScript-Referenz

Signatur

window.addEventListener("resize", handler)

Beschreibung

Das resize-Ereignis feuert am window-Objekt, sobald sich die Größe der Dokumentansicht ändert. Die neuen Maße lassen sich über window.innerWidth und window.innerHeight (inklusive Scrollleiste) bzw. document.documentElement.clientWidth (ohne Scrollleiste) auslesen. Man kann sich mit addEventListener("resize", handler) registrieren oder die Eigenschaft window.onresize setzen.

Typische Einsatzgebiete sind das Neuberechnen von Layouts, das Anpassen von <canvas>-Auflösungen, das Umschalten zwischen mobiler und Desktop-Ansicht per JavaScript oder das Neupositionieren von Tooltips und Popovers.

Das Ereignis ist nicht abbrechbar und steigt nicht auf (bubbles: false). Es wird nur am window ausgelöst, nicht an einzelnen Elementen. Um die Größenänderung einzelner Elemente zu beobachten, ist ResizeObserver das passende Werkzeug. Für reine Breakpoint-Wechsel ist window.matchMedia() mit einem change-Listener oft effizienter.

Da resize während eines Zieh-Vorgangs sehr häufig feuern kann, sollten aufwendige Handler gedrosselt (throttle), entprellt (debounce) oder per requestAnimationFrame() gebündelt werden.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"resize"`.
$handler Pflicht	(event: UIEvent) => void		Callback, der ein `UIEvent` erhält. `event.target` ist das `window`-Objekt.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `{ passive: true }`, `{ once: true }` oder `{ signal }` zum späteren Entfernen per `AbortController`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein UIEvent (Eigenschaft bubbles ist false, cancelable ist false).

Beispiele

Fenstergröße live anzeigen

const ausgabe = document.createElement('p');
document.body.append(ausgabe);

const zeigeGroesse = () => {
  ausgabe.textContent = `Viewport: ${window.innerWidth} × ${window.innerHeight} px`;
};

window.addEventListener('resize', zeigeGroesse);
zeigeGroesse(); // Startwert setzen

Viewport: 1280 × 720 px

Entprellen (Debounce) für teure Layout-Berechnungen

const debounce = (fn, wartezeit = 200) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), wartezeit);
  };
};

const layoutNeuBerechnen = () => {
  console.log('Layout neu berechnet für Breite', window.innerWidth);
};

window.addEventListener('resize', debounce(layoutNeuBerechnen, 250));

Layout neu berechnet für Breite 1024

Canvas per requestAnimationFrame anpassen und Listener per AbortController entfernen

const canvas = document.createElement('canvas');
document.body.append(canvas);
const ctx = canvas.getContext('2d');
const controller = new AbortController();
let geplant = false;

const passeCanvasAn = () => {
  const dpr = window.devicePixelRatio || 1;
  canvas.width = window.innerWidth * dpr;
  canvas.height = window.innerHeight * dpr;
  canvas.style.width = `${window.innerWidth}px`;
  canvas.style.height = `${window.innerHeight}px`;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  ctx.fillStyle = 'teal';
  ctx.fillRect(20, 20, 100, 100);
  geplant = false;
};

window.addEventListener('resize', () => {
  if (!geplant) {
    geplant = true;
    requestAnimationFrame(passeCanvasAn);
  }
}, { signal: controller.signal });

passeCanvasAn();

// Später, z. B. beim Verlassen der Ansicht:
// controller.abort();

Alternative per on-Property und removeEventListener

// Variante 1: on-Property (überschreibt einen vorherigen Handler)
window.onresize = () => console.log('onresize:', window.innerWidth);

// Variante 2: benannter Handler, später entfernbar
const beiResize = () => console.log('Listener:', window.innerWidth);
window.addEventListener('resize', beiResize);

// Aufräumen
window.removeEventListener('resize', beiResize);
window.onresize = null;

onresize: 800 Listener: 800

// Wichtig · Fallstricke

Häufigkeit: Je nach Browser feuert resize während des Ziehens sehr oft oder erst am Ende. Aufwendige Handler immer drosseln, entprellen oder per requestAnimationFrame() bündeln, sonst drohen Ruckler durch erzwungene Layout-Neuberechnungen (Layout Thrashing).
Nur am Fenster: Ein resize-Listener an einem normalen Element (z. B. div) wird nie ausgelöst. Für Elemente ResizeObserver verwenden.
Kein Startereignis: Beim Laden der Seite wird kein resize ausgelöst – den Handler zusätzlich einmal manuell aufrufen.
Mobile Browser: Das Ein-/Ausblenden der Adressleiste oder der Bildschirmtastatur kann resize auslösen bzw. innerHeight verändern. Für die sichtbare Fläche ist window.visualViewport mit eigenem resize-Ereignis genauer.
Zoom: Browser-Zoom ändert die CSS-Pixelmaße und löst daher ebenfalls resize aus.
on-Property: window.onresize erlaubt nur einen Handler; eine erneute Zuweisung ersetzt den alten. addEventListener ist in Bibliotheken vorzuziehen.
Breakpoints: Wer nur wissen will, ob eine Media-Query zutrifft, nutzt besser matchMedia(...).addEventListener('change', ...) – das feuert nur beim tatsächlichen Wechsel.
In <iframe>-Elementen feuert das Ereignis am window des Frames, wenn sich die Frame-Größe ändert.

Siehe auch

Window.innerWidth Window.innerHeight Window.matchMedia() Window.requestAnimationFrame() EventTarget.addEventListener() PictureInPictureWindow: resize