監聽window視窗變化的兩種方法

根據視窗變化，改變頁面展示需求還是很常見（如自適應、echarts自適應問題），以在vue中的使用舉例

一、方法介紹

方法一：使用window的onresize屬性 -- window.onresize = reportwindowsize

1、mounted註冊事件

mounted() , 300)}}

}

2、beforedestroy登出事件

beforedestroy()

方法二：將檢視事件resize註冊到window進行監聽 -- window.addeventlistener('resize', reportwindowsize);

1、mounted註冊事件

mounted()

2、beforedestroy登出事件

beforedestroy()

注：引數reportwindowsize表示的是函式的引用 

二、注意事項

1、window.onresize與window.removeeventlistener繫結相同的事件，都會觸發；

2、window.onresize 不能重複繫結事件，只有最後繫結的事件生效；

window.removeeventlistener('resize', reportwindowsize)可以重複繫結事件，當視窗改變後，所有繫結的事件都會觸發。

3、注意防抖

4、谷歌bug會觸發兩次視窗變化事件，用防抖可解決該問題

// 註冊事件 -- 防抖

window.onresize = () => , 300)}}
// 下面兩個事件都會觸發
window.addeventlistener('resize', this.testn)
window.addeventlistener('resize', this.testnn)

vue移除window視窗監聽事件兩種方法

例子 頁面視窗變化時，echarts繪製的檢視需要resize 這時需要監聽window，但是當元件消耗時也需要移除視窗監聽事件。涉及到的data資料和methods data data methods chartresize 500 第一種方法 在beforedestroy鉤子函式裡銷毀 moun...

Android 監聽wifi廣播的兩種方式

1.xml中宣告 2.中註冊 intentfilter filter new intentfilter filter.addaction wifimanager.network state changed action filter.addaction wifimanager.wifi state ...

OpenSheet兩種開啟視窗方式的區別

opensheet下面的兩種方式有什麼區別 1 方式一 opensheet w sheet1,w sheet1 w main 2 方式二 window lw win opensheet lw win,w sheet1 w main 第一種例項化了 w sheet1 在程式中按這種方法開啟了w she...