div上的Javascript事件监听器调整大小不起作用答案

【问题标题】：Javascript eventlistener resize on div does not workdiv上的Javascript事件监听器调整大小不起作用
【发布时间】：2021-07-21 16:18:50
【问题描述】：

我尝试让事件监听器触发调整大小，但它什么也没做。

运行代码游乐场
拖动调整大小手柄
预期在 console.log 中输出一些内容

为什么什么都没有发生，我该如何解决？

/* Load event directly - FAIL */
document.querySelector("div").addEventListener("resize", () => {
  console.log("resize");
});

/* Wait until dom loads first - FAIL */
window.addEventListener("DOMContentLoaded", () => {
  document.querySelector("div").addEventListener("resize", () => {
    console.log("resize");
  });
});

div {
  width: 300px;
  height: 100px;
  background: #eee;
  resize: both;
  overflow: auto;
}

&lt;div&gt;&lt;/div&gt;

【问题讨论】：

这可能吗？ stackoverflow.com/questions/60436453/…

标签： javascript resize addeventlistener

【解决方案1】：

看Resize_Observer_API docs

还有我的小原型，就像你的例子：

html:

<div style="border: 1px solid #444;" id="textarea" contenteditable=""> some text</div> 
<div id="result"></div>

js:

function outputsize() {
   document.getElementById('result').innerHTML=`
   ${textarea.offsetWidth} ${textarea.offsetHeight}
   `
}
outputsize()

new ResizeObserver(outputsize).observe(textarea)

https://codepen.io/zaslavskij/pen/ZELZMYK

【讨论】：