JavaScript中的resize事件
|
freeflydom
2026年10月8日 16:35
本文热度 129
|
resize 事件在文档视图（窗口）调整大小时触发。
这个事件不可取消，不会冒泡。
在一些早期的浏览器中，可以在任何 HTML 元素上注册 resize 事件处理器。现在仍然可以设置 onresize 属性或使用 addEventListener() 在任何元素上设置一个处理器。然而，resize 事件只在 window 对象（即由 document.defaultView 返回）上触发。只有在 window 对象上注册的处理器才能接收 resize 事件。
虽然现在 resize 事件只针对窗口触发，但你可以使用 ResizeObserver API 获得其他元素的尺寸调整通知。
如果对你的应用程序来说，调整大小事件被触发了太多次，请参阅优化 window.onresize 来控制事件触发的时间。
语法
在像 addEventListener() 这样的方法中使用事件名称，或者设置事件处理器属性。
addEventListener("resize", (event) => {});
onresize = (event) => {};
窗口大小记录器
以下示例报告了每次改变窗口大小时，窗口的尺寸。
HTML
<p>缩放浏览器窗口以触发 <code>resize</code> 事件</p>
<p>窗口高度：<span id="height"></span></p>
<p>窗口宽度：<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;
addEventListener 等价形式
你也可以使用 addEventListener() 方法设定事件处理器：
window.addEventListener("resize", reportWindowSize);
该文章在 2026/10/8 16:35:55 编辑过
400 186 1886
