Dasresize-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 oderaddEventListener() zu verwenden, um einen Handler für jedes Element festzulegen. Allerdings werdenresize-Ereignisse nur auf demwindow-Objekt ausgelöst (d.h. zurückgegeben vondocument.defaultView). Nur Handler, die auf demwindow-Objekt registriert sind, empfangenresize-Ereignisse.

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

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

Syntax

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

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

Ereignistyp

Ein generischesEvent.

Beispiele

Fenstergroßen-Logger

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

HTML

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

JavaScript

const heightOutput = document.querySelector("#height");const widthOutput = document.querySelector("#width");function reportWindowSize() {  heightOutput.textContent = window.innerHeight;  widthOutput.textContent = window.innerWidth;}window.onresize = reportWindowSize;

Ergebnis

addEventListener-Äquivalent

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

window.addEventListener("resize", reportWindowSize);

Spezifikationen

Browser-Kompatibilität