Window: resize-Ereignis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das resize-Ereignis wird ausgelöst, wenn die Dokumentansicht (Fenster) in ihrer Größe verändert wird.

Dieses Ereignis kann nicht abgebrochen werden und propagiert nicht.

In einigen älteren Browsern war es möglich, resize-Ereignishandler für jedes HTML-Element zu registrieren. Es ist immer noch möglich, onresize-Attribute zu setzen oder addEventListener() zu verwenden, um einen Handler für jedes Element festzulegen. Allerdings werden resize-Ereignisse nur auf dem window-Objekt ausgelöst (d.h. zurückgegeben von document.defaultView). Nur Handler, die auf dem window-Objekt registriert sind, empfangen resize-Ereignisse.

Während das resize-Ereignis heutzutage nur für das Fenster ausgelöst wird, können Sie Resize-Benachrichtigungen für andere Elemente über die ResizeObserver-API erhalten.

Falls das resize-Ereignis zu häufig für Ihre Anwendung ausgelöst wird, lesen Sie Optimizing window.onresize, um zu steuern, nach welcher Zeitspanne das Ereignis ausgelöst wird.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

js
addEventListener("resize", (event) => { })

onresize = (event) => { }

Ereignistyp

Ein generisches Event.

Beispiele

Fenstergroßen-Logger

Das folgende Beispiel gibt die Fenstergröße jedes Mal an, wenn sie geändert wird.

HTML

html
<p>Resize the browser window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>

JavaScript

js
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

function reportWindowSize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

window.onresize = reportWindowSize;

Ergebnis

Hinweis: Die Beispielausgabe hier befindet sich in einem <iframe>, daher sind die angegebenen Breiten- und Höhenwerte für das <iframe>, nicht für das Fenster, in dem sich diese Seite befindet. Insbesondere wird es schwierig sein, die Fenstergröße so anzupassen, dass ein Unterschied in der angegebenen Höhe sichtbar wird.

Der Effekt lässt sich leichter erkennen, wenn Sie das Beispiel in einem eigenen Fenster anzeigen.

addEventListener-Äquivalent

Sie könnten den Ereignishandler auch mithilfe der addEventListener()-Methode einrichten:

js
window.addEventListener("resize", reportWindowSize);

Spezifikationen

Specification
CSSOM View Module
# eventdef-window-resize

Browser-Kompatibilität