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 |
浏览器兼容性
加载中…