window.onresize与window.addEventListener(‘resize‘,...)来做浏览器窗口的缩放监听

一、背景

在做浏览器窗口监听时我们该选用window.onresize还是window.addEventListener('resize',...)呢？之前遇到过这样一种情况，在一个vue项目的navBar部份使用了window.onresize做了监听控制，当窗口缩放到一定大小以下时菜单只显示图标隐藏文字，后面由于在做表格时也需要去做监听以实现自适应策略，在实现的过程中，再次使用了window.onresize了，使用过程中发现其中一个window.onresize在使用中会被覆盖。

二、window.onresize为什么在重复使用过程中会被覆盖？

这是因为onresize本身就是一个回调，当你改变的时候，前一个就会被覆盖。

三、window.addEventListener的运用

在window.onresize会发生冲突，但是又不得不实现多个浏览器窗口监听的情况下，我们该如何做呢？这个时候我们不妨试试addEventListener来添加监听resize的事件，将能避免onresize的覆盖问题，并能实现对窗口的监听操作。

3.1 addEventListener()添加事件监听
addEventListener(event, function, useCapture)
（1）参数event必填，表示监听的事件，例如 click, resize等，不加前缀on的事件。
（2）参数 function必填，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。不带参数。
（3）参数 useCapture选填，填true或者false，用于描述事件是冒泡还是捕获触发，true表示捕获，默认false表示冒泡。
3.2 使用注意事项：
（1）如果function参数传的是匿名函数,没办法用removeEventListener来移除监听。代码如下：

mounted(){
    window.addEventListener('resize',()=>{
        console.log('处理窗口缩放时要处理的逻辑操作！');
    });
},

（2）如果function参数传的不是匿名函数,可以使用removeEventListener来移除监听。

methods: {
    listenResizeFn(){
        console.log('处理窗口缩放时要处理的逻辑操作！');
    }
},
mounted(){
    // 添加监听事件listenResizeFn
    window.addEventListener('resize',this.listenResizeFn);  
},
beforeDestroy() {
    // 移除绑定的listenResizeFn事件监听
    window.removeEventListener("resize",this.listenResizeFn);
}