資訊專欄INFORMATION COLUMN
摘要：構造函數，參數為回調函數構造函數為，它在監(jiān)聽到中的改變并且一系列改變結束后觸發(fā)回調函數。是要監(jiān)聽的元素，為監(jiān)聽選項對象，可選的選項如下所以監(jiān)聽元素寬高變化，就是監(jiān)聽屬性變化這樣當元素發(fā)生變化時，就會觸發(fā)構造函數中的函數。
一、js監(jiān)聽window變化的方法 1、onsize只能監(jiān)聽window對象的變化
(1)、 window對象原生、jQuery方法
//原生寫法
window.onsize = function(){
console.log("11");
}
//jquery寫法
$(window).resize(function(){
console.log("22");
})
//注意：瀏覽器窗口大小改變時，這段代碼會執(zhí)行多次，對性能影響大，容易造成瀏覽器假死。
(2)、實現(xiàn)不管窗口怎么改變，只在停止改變之后才執(zhí)行代碼
var resizeTimer = null;
$(window).resize(function(){
if(resizeTimer){
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function(){
console.log("窗口改變")
},100)
})
//通過使用定時器的方式來讓代碼延遲執(zhí)行，每次窗口改變的時候就清除事件，只有停下改變之后才會繼續(xù)再執(zhí)行，解決resize執(zhí)行多次的問題。
二、js監(jiān)聽div容器變化的方法 1、MutationObserver（1）、介紹： MutationObserver 可以用來監(jiān)聽整個DOM中的變化。
（2）、構造函數，參數為回調函數
構造函數為window.MutationObserver，它在監(jiān)聽到DOM中的改變并且一系列改變結束后觸發(fā)回調函數。他與事件不同的是：它在DOM變化時，會記錄每一個DOM的變化（為一個MutationRecord對象），到DOM變化結束時觸發(fā)回調函數。DOM變化可能是一系列的（比如同時改變寬和高），那么這一系列的變化就會產生一個隊列，這個隊列會作為參數傳遞給回調函數。
由于瀏覽器差異。一些版本的瀏覽器各自支持了構造函數，但是用法一致的。實例化一個觀察者，代碼如下：
let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; let observer = new MutationObserver(callback);
（3）、常用三個API接口
1??、observe(element,options) 配置MutationObserver在DOM更改匹配給定選項時，通過其回調函數開始接收通知。
element是要監(jiān)聽的DOM元素，options為監(jiān)聽選項對象，可選的選項如下：
所以監(jiān)聽元素寬高變化，就是監(jiān)聽style屬性變化
observer.observe(element,{attributes:true,attributeFilter:["style"],attributeOldValue:true});
//這樣當元素style發(fā)生變化時，就會觸發(fā)構造函數中的callback函數。即：
let observer = new MutationObserver(callback) ，觸發(fā)這里的callback。
2??、 disconnect()??阻止?MutationObserver?實例繼續(xù)接收的通知，直到再次調用其observe方法，該觀察者對象包含的回調函數都不會再被調用。
3??、 takeRecords()?從MutationObserver的通知隊列中刪除所有待處理的通知，并將它們返回到一個MutationRecord對象構成的新數組中。
2、vue示例改變大小試試觸發(fā)了{{firedNum}}次resize事件。
注意：這里記錄了舊的寬高數據來避免重復觸發(fā)回調函數，這樣做的原因在于寬高數據改變時，不一定是整數，而MutationRecord.recordOldValue中記錄的是取整后的數據，這樣就會導致在拖動改變DOM元素的寬高時，數值一直在整數和小數之間跳動，會多次觸發(fā)。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/105082.html
摘要：上網找了找，對于的事件的監(jiān)聽，實現(xiàn)方式有很多，比如基于的小插件通過元素進行監(jiān)聽來監(jiān)聽元素基于的周期性檢查雖然是實現(xiàn)了對元素寬高的監(jiān)聽，但看上去很瓜。 簡單點說，就是： 在被監(jiān)聽的 div 中添加 iframe 標簽，設置其高寬均為 100%； 在 iframe 的 resize 被觸發(fā)時，則表明 div 的大小正在改變！ 參考 Resize on div el...
摘要：上網找了找，對于的事件的監(jiān)聽，實現(xiàn)方式有很多，比如基于的小插件通過元素進行監(jiān)聽來監(jiān)聽元素基于的周期性檢查雖然是實現(xiàn)了對元素寬高的監(jiān)聽，但看上去很瓜。 簡單點說，就是： 在被監(jiān)聽的 div 中添加 iframe 標簽，設置其高寬均為 100%； 在 iframe 的 resize 被觸發(fā)時，則表明 div 的大小正在改變！ 參考 Resize on div el...
摘要：哈哈哈哈，以上純屬虛構，不過在最近項目中還真遇到過對容器監(jiān)聽高寬變化在使用或滾動插件，如果容器內部元素有高度變化要去及時更新外部包裹容器，即調用方法。處理很簡單，只需在動畫停止事件觸發(fā)時監(jiān)聽高寬變化即可。 前言 老鳥：怎樣去監(jiān)聽 DOM 元素的高度變化呢？菜鳥：哈哈哈哈哈，這都不知道哦，用 onresize 事件鴨！老鳥扶了扶眼睛，空氣安靜幾秒鐘，菜鳥才晃過神來。對鴨，普通 DOM 元...
閱讀 1751·2021-09-26 09:46
閱讀 3032·2021-09-22 15:55
閱讀 2620·2019-08-30 14:17
閱讀 3037·2019-08-26 11:59
閱讀 1819·2019-08-26 11:35
閱讀 3164·2019-08-26 10:45
閱讀 3162·2019-08-23 18:28
閱讀 1148·2019-08-23 18:21
