一:简介
之前做项目的时候要实现echarts图表随浏览器窗口大小变化而改变,echarts本身提供了一个resize()方法,然后我们需要用一个函数实现浏览器窗口监听,最初我选用的是window.onresize方法,当页面只有一个图表时可以实现,但当页面多个图表时window.onresize会被覆盖从而导致失效,最后我选用了window.addEventListener()方法解决了这个问题
二:window.onresize存在的问题
这是因为onresize本身就是一个回调,当发生改变时,前一个方法就会被覆盖
三:window.addEventListener()的运用
EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上,当该对象触发指定的事件时,指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element、Document 和 Window,也可以是任何支持事件的对象(比如 XMLHttpRequest)
语法:
addEventListener(event, function, useCapture)
- 参数event必填,表示监听的事件,例如 click, resize等,不加前缀on的事件。
- 参数 function必填,表示事件触发后调用的函数,可以是外部定义函数,也可以是匿名函数。不带参数。
- 参数 useCapture选填,填true或者false,用于描述事件是冒泡还是捕获触发,true表示捕获,默认false表示冒泡。
代码实现:
window.addEventListener('resize', this.screenAdapter)
screenAdapter(){
this.chartInstance.resize()
}
其中,screenAdapter即为resize事件触发后调用的函数。同时不要忘记使用window.removeEventListener来移除监听