国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js監(jiān)聽div元素的寬高變化

lansheng228 / 1104人閱讀

摘要：構(gòu)造函數(shù)，參數(shù)為回調(diào)函數(shù)構(gòu)造函數(shù)為，它在監(jiān)聽到中的改變并且一系列改變結(jié)束后觸發(fā)回調(diào)函數(shù)。是要監(jiān)聽的元素，為監(jiān)聽選項(xiàng)對(duì)象，可選的選項(xiàng)如下所以監(jiān)聽元素寬高變化，就是監(jiān)聽屬性變化這樣當(dāng)元素發(fā)生變化時(shí)，就會(huì)觸發(fā)構(gòu)造函數(shù)中的函數(shù)。

一、js監(jiān)聽window變化的方法 1、onsize只能監(jiān)聽window對(duì)象的變化

(1)、 window對(duì)象原生、jQuery方法

//原生寫法
window.onsize = function(){
    console.log("11");
}

//jquery寫法
$(window).resize(function(){
    console.log("22");
})

//注意：瀏覽器窗口大小改變時(shí)，這段代碼會(huì)執(zhí)行多次，對(duì)性能影響大，容易造成瀏覽器假死。

(2)、實(shí)現(xiàn)不管窗口怎么改變，只在停止改變之后才執(zhí)行代碼

var resizeTimer = null;

$(window).resize(function(){
    if(resizeTimer){
        clearTimeout(resizeTimer);
    }
    resizeTimer = setTimeout(function(){
        console.log("窗口改變")
    },100)
})

//通過使用定時(shí)器的方式來讓代碼延遲執(zhí)行，每次窗口改變的時(shí)候就清除事件，只有停下改變之后才會(huì)繼續(xù)再執(zhí)行，解決resize執(zhí)行多次的問題。

二、js監(jiān)聽div容器變化的方法 1、MutationObserver

（1）、介紹： MutationObserver 可以用來監(jiān)聽整個(gè)DOM中的變化。

（2）、構(gòu)造函數(shù)，參數(shù)為回調(diào)函數(shù)

構(gòu)造函數(shù)為window.MutationObserver，它在監(jiān)聽到DOM中的改變并且一系列改變結(jié)束后觸發(fā)回調(diào)函數(shù)。他與事件不同的是：它在DOM變化時(shí)，會(huì)記錄每一個(gè)DOM的變化（為一個(gè)MutationRecord對(duì)象），到DOM變化結(jié)束時(shí)觸發(fā)回調(diào)函數(shù)。DOM變化可能是一系列的（比如同時(shí)改變寬和高），那么這一系列的變化就會(huì)產(chǎn)生一個(gè)隊(duì)列，這個(gè)隊(duì)列會(huì)作為參數(shù)傳遞給回調(diào)函數(shù)。

由于瀏覽器差異。一些版本的瀏覽器各自支持了構(gòu)造函數(shù)，但是用法一致的。實(shí)例化一個(gè)觀察者，代碼如下：

let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
let observer = new MutationObserver(callback);

（3）、常用三個(gè)API接口

1??、observe(element,options) 配置MutationObserver在DOM更改匹配給定選項(xiàng)時(shí)，通過其回調(diào)函數(shù)開始接收通知。
element是要監(jiān)聽的DOM元素，options為監(jiān)聽選項(xiàng)對(duì)象，可選的選項(xiàng)如下：

所以監(jiān)聽元素寬高變化，就是監(jiān)聽style屬性變化

observer.observe(element,{attributes:true,attributeFilter:["style"],attributeOldValue:true});

//這樣當(dāng)元素style發(fā)生變化時(shí)，就會(huì)觸發(fā)構(gòu)造函數(shù)中的callback函數(shù)。即：

let observer = new MutationObserver(callback) ，觸發(fā)這里的callback。

2??、 disconnect()??阻止?MutationObserver?實(shí)例繼續(xù)接收的通知，直到再次調(diào)用其observe方法，該觀察者對(duì)象包含的回調(diào)函數(shù)都不會(huì)再被調(diào)用。

3??、 takeRecords()?從MutationObserver的通知隊(duì)列中刪除所有待處理的通知，并將它們返回到一個(gè)MutationRecord對(duì)象構(gòu)成的新數(shù)組中。

2、vue示例

注意：這里記錄了舊的寬高數(shù)據(jù)來避免重復(fù)觸發(fā)回調(diào)函數(shù)，這樣做的原因在于寬高數(shù)據(jù)改變時(shí)，不一定是整數(shù)，而MutationRecord.recordOldValue中記錄的是取整后的數(shù)據(jù)，這樣就會(huì)導(dǎo)致在拖動(dòng)改變DOM元素的寬高時(shí)，數(shù)值一直在整數(shù)和小數(shù)之間跳動(dòng)，會(huì)多次觸發(fā)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/105082.html

相關(guān)文章

  • 監(jiān)聽div的resize

    摘要：上網(wǎng)找了找，對(duì)于的事件的監(jiān)聽，實(shí)現(xiàn)方式有很多，比如基于的小插件通過元素進(jìn)行監(jiān)聽來監(jiān)聽元素基于的周期性檢查雖然是實(shí)現(xiàn)了對(duì)元素寬高的監(jiān)聽，但看上去很瓜。 簡單點(diǎn)說，就是： 在被監(jiān)聽的 div 中添加 iframe 標(biāo)簽，設(shè)置其高寬均為 100%； 在 iframe 的 resize 被觸發(fā)時(shí)，則表明 div 的大小正在改變！ 參考 Resize on div el...

    TNFE 評(píng)論0 收藏0

  • 監(jiān)聽div的resize

    摘要：上網(wǎng)找了找，對(duì)于的事件的監(jiān)聽，實(shí)現(xiàn)方式有很多，比如基于的小插件通過元素進(jìn)行監(jiān)聽來監(jiān)聽元素基于的周期性檢查雖然是實(shí)現(xiàn)了對(duì)元素寬高的監(jiān)聽，但看上去很瓜。 簡單點(diǎn)說，就是： 在被監(jiān)聽的 div 中添加 iframe 標(biāo)簽，設(shè)置其高寬均為 100%； 在 iframe 的 resize 被觸發(fā)時(shí)，則表明 div 的大小正在改變！ 參考 Resize on div el...

    legendaryedu 評(píng)論0 收藏0

  • 如何優(yōu)雅監(jiān)聽容器高度變化

    摘要：哈哈哈哈，以上純屬虛構(gòu)，不過在最近項(xiàng)目中還真遇到過對(duì)容器監(jiān)聽高寬變化在使用或滾動(dòng)插件，如果容器內(nèi)部元素有高度變化要去及時(shí)更新外部包裹容器，即調(diào)用方法。處理很簡單，只需在動(dòng)畫停止事件觸發(fā)時(shí)監(jiān)聽高寬變化即可。 前言 老鳥：怎樣去監(jiān)聽 DOM 元素的高度變化呢？菜鳥：哈哈哈哈哈，這都不知道哦，用 onresize 事件鴨！老鳥扶了扶眼睛，空氣安靜幾秒鐘，菜鳥才晃過神來。對(duì)鴨，普通 DOM 元...

    hizengzeng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

lansheng228

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<