Window: resize 事件
當文件檢視（視窗）的大小發生變化時，會觸發 resize 事件。
此事件不可取消，也不會冒泡。
在某些早期瀏覽器中，可以將 resize 事件監聽器註冊到任何 HTML 元素上。仍然可以使用 onresize 屬性或 addEventListener() 方法將監聽器設定到任何元素上。但是，resize 事件僅在 window 物件上觸發（即由 document.defaultView 返回）。只有在 window 物件上註冊的監聽器才會接收 resize 事件。
雖然如今 resize 事件僅在視窗大小變化時觸發，但您可以使用 ResizeObserver API 來獲取其他元素的尺寸變化通知。
如果您的應用程式觸發了過多的 resize 事件，請參閱 Optimizing window.onresize 來控制事件觸發的延遲時間。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("resize", (event) => { })
onresize = (event) => { }
事件型別
一個通用的 Event。
示例
視窗大小記錄器
以下示例會在視窗每次調整大小時報告其大小。
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;
結果
注意：此處示例的輸出位於一個 <iframe> 中，因此報告的寬度和高度值是 <iframe> 的尺寸，而不是當前頁面的視窗尺寸。特別是，您很難透過調整視窗大小來看到報告高度的變化。
如果您 在自己的視窗中檢視此示例，效果會更明顯。
addEventListener 等效
您可以使用 addEventListener() 方法來設定事件監聽器。
js
window.addEventListener("resize", reportWindowSize);
規範
| 規範 |
|---|
| CSSOM 檢視模組 # eventdef-window-resize |
瀏覽器相容性
載入中…