在div上调整Javascript事件侦听器大小不起作用

Question

我试图让resize的eventlistener触发，但它什么也没做。

1. 运行代码游乐场
2. 拖动调整大小手柄
3. 应为在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;
}

<div></div>

Answer 1

查看Resize_Observer_API文档

这是我的小原型，就像你的例子：

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