一、背景
在做浏览器窗口监听时我们该选用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来移除监听。代码如下：
网友评论