java窗口大小变化监听_监听window窗口变化的两种方法

根据窗口变化，改变页面展示需求还是很常见(如图片自适应、echarts自适应问题)，以在vue中的使用举例

一、方法介绍

方法一：使用window的onresize属性 -- window.onresize = reportWindowSize

1、mounted注册事件

mounted() {

// 注册事件 -- 防抖

window.onresize = () => {

if (!this.bAntiShike) {

this.bAntiShike = true

setTimeout(() => {

this.getWidth()

this.bAntiShike = false

}, 300)

}

}

}

2、beforeDestroy注销事件

beforeDestroy() {

// 事件注销

window.onresize = null

}

方法二：将视图事件resize注册到window进行监听 -- window.addEventListener('resize', reportWindowSize);

1、mounted注册事件

mounted() {

// 注册事件 --onWindowResize中做防抖处理，同window.onresize

window.addEventListener('resize', this.onWindowResize)

}

2、beforeDestroy注销事件

beforeDestroy() {

// 事件注销

window.removeEventListener('resize', this.onWindowResize)

}

注：参数reportWindowSize表示的是函数的引用

二、注意事项

1、window.onresize与window.removeEventListener绑定相同的事件，都会触发；

2、window.onresize 不能重复绑定事件，只有最后绑定的事件生效；

window.removeEventListener('resize', reportWindowSize)可以重复绑定事件，当窗口改变后，所有绑定的事件都会触发。

3、注意防抖

4、谷歌bug会触发两次窗口变化事件，用防抖可解决该问题

// 注册事件 -- 防抖

window.onresize = () => {

if (!this.bAntiShike) {

this.bAntiShike = true

setTimeout(() => {

this.resizeHandler()

this.bAntiShike = false

}, 300)

}

}

// 下面两个事件都会触发

window.addEventListener('resize', this.testN)

window.addEventListener('resize', this.testNN)