鍍金池/ 問答/HTML/ 為什么在div上注冊onresize完全沒有效果？

為什么在div上注冊onresize完全沒有效果？

看規(guī)范似乎大多數(shù)常規(guī)元素都支持 onresize 事件，但實際上在 Chrome 瀏覽器中開發(fā)應用時發(fā)現(xiàn)，除了 window，在別的元素上注冊該事件都是不會觸發(fā)的，無論是拖動 textarea，還是在 contentEditable 的 div 中鍵入，亦或改變窗口尺寸使得元素變窄等，當然也包括使用腳本直接更改尺寸。

由于 HTML5 Mutation Observer 也不支持監(jiān)測 clientHeight 等屬性，那么是不是除了 requestAnimationFrame 不斷地進行 DOM 訪問逐一比對，就沒有辦法實現(xiàn)這一功能了？

回答
編輯回答
忠妾

  1. 可以綁定onresize的標簽 body

  2. 可以綁定onresize的對象 window

  3. 只有一個起作用,后定義覆蓋前定義的

實現(xiàn)其他元素綁定onresize的原理

  1. 在元素綁定resize對象時，記錄元素的width和height

  2. 使用requestAnimationFrame、setTimeout、setInterval，每隔一段時間查詢其width和height，如果和記錄的width和height不一樣，運行回調(diào)函數(shù)并更新記錄中的width為height

如果在使用jq的情況下很少的代碼可以實現(xiàn)，但如果是原生js，考慮兼容性等問題，代碼比較冗長。

剛剛簡單測了一下，用target后，改變元素大小，不觸發(fā)onresize。

2017年3月9日 05:10
編輯回答
心上人

看mdn上

Target defaultView (window)

不知道意思是不是只支持綁定window，別的事件大多是Target Element

2018年3月1日 18:51