Window: resize-Ereignis
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das resize-Ereignis wird ausgelöst, wenn sich die Größe der Dokumentansicht (des Fensters) geändert hat.
Dieses Ereignis kann nicht abgebrochen werden und durchläuft keine Bubbling-Phase.
In einigen älteren Browsern war es möglich, resize-Ereignishandler für jedes HTML-Element zu registrieren.
Es ist weiterhin möglich, onresize-Attribute zu setzen (beachten Sie jedoch, dass dies gegebenenfalls andere mit onresize hinzugefügte Ereignis-Listener ersetzt) oder mit addEventListener() einen Handler für ein beliebiges Element festzulegen.
Allerdings werden resize-Ereignisse nur auf dem window-Objekt ausgelöst (also dem Objekt, das document.defaultView zurückgibt).
Nur Handler, die auf dem window-Objekt registriert sind, empfangen resize-Ereignisse.
Obwohl das resize-Ereignis heutzutage nur für das Fenster ausgelöst wird, können Sie mit der ResizeObserver-API Benachrichtigungen über Größenänderungen anderer Elemente erhalten.
Wenn das resize-Ereignis für Ihre Anwendung zu häufig ausgelöst wird, lesen Sie Optimizing window.onresize, um den Zeitpunkt der Ereignisauslösung zu steuern.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("resize", (event) => { })
Alternativ können Sie einen Wert der Ereignishandler-Eigenschaft der Schnittstelle zuweisen:
onresize = (event) => { }
Ereignistyp
Ein generisches Event.
Beispiele
Fenstergröße protokollieren
Das folgende Beispiel gibt die Fenstergröße bei jeder Größenänderung aus. Es verwendet die Ereignishandler-Eigenschaft onresize (beachten Sie jedoch, dass dies gegebenenfalls andere mit onresize hinzugefügte Ereignis-Listener ersetzt).
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
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 befindet sich hier in einem <iframe>. Die angegebenen Werte für Breite und Höhe beziehen sich daher auf das <iframe> und nicht auf das Fenster, in dem sich diese Seite befindet. Insbesondere ist es schwierig, die Fenstergröße so zu ändern, dass sich die angegebene Höhe sichtbar verändert.
Der Effekt ist leichter zu erkennen, wenn Sie das Beispiel in einem eigenen Fenster anzeigen.
Verwendung von addEventListener()
Sie können den Ereignishandler mit der Methode addEventListener() einrichten:
window.addEventListener("resize", reportWindowSize);
Spezifikationen
| Spezifikation |
|---|
| CSSOM View Module # eventdef-window-resize |