[筆記] 監聽 div 元素的寬高度變化

章節連結

對於監聽瀏覽器的視窗大小,可以透過 window.addEventListener(‘resize’, cb) 來實現,不過有時我們會有監聽父層 div 的需求,但此時的 window 並不一定會跟著變化。近期在整合 Vue Grid 的套件的時候,遇上了此一狀況。網路上流傳著一份由 taozh1982@gmail.com 所貢獻的程式碼,藉此來運用一下。
javascript es6 logo


程式碼

主要實現的原理為:在目標的 Div 中新增一個 <object> 的物件,然後監聽這個物件的 contentDocument.defaultView 的 resize 事件即可。不過在頁面切換或是該 <div> 被銷毀時,需要讓監聽器一併被 remove,以免影響效能。


參考資料

1. 开发TIPS:JS如何监听框架的resize

按讚加入粉絲團

延伸閱讀