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

Question

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

运行代码游乐场
拖动调整大小手柄
预计会在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 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

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

Javascript eventlistener resize on div does not work

javascript

resize

addeventlistener