Window：resize 事件

当文档视图（窗口）大小发生改变时，就会触发 resize 事件。

此事件不可取消，也不冒泡。

在一些早期浏览器中，可以在任何 HTML 元素上注册 resize 事件处理程序。仍然可以设置 onresize 属性或使用 addEventListener() 在任何元素上设置处理程序。但是，resize 事件只会在 window 对象（即由 document.defaultView 返回）上触发。仅在 window 对象上注册的处理程序会收到 resize 事件。

虽然 resize 事件现在只对窗口触发，但可以使用 ResizeObserver API 获取其他元素的大小调整通知。

如果 resize 事件对您的应用程序来说触发次数太多，请参阅优化 window.onresize 以控制事件触发的间隔时间。

语法

在诸如 addEventListener() 之类的函数中使用事件名，或设置事件处理程序属性。

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

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() 方法来设置事件处理程序

window.addEventListener("resize", reportWindowSize);

规范

规范
CSSOM View Module # eventdef-window-resize

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。