为何容器div的resize事件未触发？附示例链接

嘿，这个问题我太熟了！原生的普通HTML元素（比如你的.container div）本身并不支持resize事件——这个事件是专门给window对象设计的，所以你直接给div绑定resize监听器自然不会有任何反应。

正确的解决方案：使用ResizeObserver API #

如果你只想监听特定容器的尺寸变化，ResizeObserver就是为这个场景而生的！它是浏览器提供的标准API，专门用来监听元素的宽高变化，完全满足你的需求。

具体实现代码 #

<div class="container"></div>

<script>
// 获取容器元素
const container = document.querySelector(".container");

// 创建ResizeObserver实例
const resizeObserver = new ResizeObserver(entries => {
  // entries是被监听元素的数组，这里我们只关心第一个（也就是container）
  for (let entry of entries) {
    console.log("容器尺寸变化啦！");
    console.log(`新宽度: ${entry.contentRect.width}px`);
    console.log(`新高度: ${entry.contentRect.height}px`);
  }
});

// 开始监听容器的尺寸变化
resizeObserver.observe(container);

// 如果你之后想停止监听，可以调用这个方法
// resizeObserver.unobserve(container);
</script>

补充说明 #

• ResizeObserver会在元素的内容区域尺寸变化时触发回调，包括你通过开发者工具修改容器宽度的场景。
• 它支持监听多个元素，性能表现也很优秀，不会像一些基于定时器轮询的方案那样浪费资源。
• 现代主流浏览器（Chrome、Firefox、Edge、Safari 13.1+）都支持这个API，兼容性没问题。

内容的提问来源于stack exchange，提问作者sanjihan