React 兄弟组件同时使用onresize时，监听事件覆盖

最近遇到了一个需求，当浏览器窗口大小发生变化时，导航栏组件和content组件对于浏览器窗口进行适配。开发中发现window.onresize在多个组件中同时使用只有一个生效的问题。

问题分析

单页面应用使用多个window.onresize事件时，最后一个window.onresize事件会覆盖掉之前的onresize监听事件。本来想通过在导航栏组件中调用content中自适应窗口大小的方法，后来换个思路想了一下，如果再加入新的组件，那么这个方法就会越来越复杂，冗余。最好还是能够让各组件中的window.onresize都能够被触发，且互不影响。

window.onresize = function () {//被覆盖不执行
        console.log(第一次监听);
    }
    window.onresize = function () {//执行
        console.log(第二次监听);
    }

解决办法

DOM顶层事件绑定多次会导致事件被覆盖，可以用**addEventListener()**方法添加事件监听，这样就可以避免多次使用后面覆盖前面的情况。

• addEventListener监听事件可以在单页面应用中多次使用，多个组件可以同时使用且互不影响。

<script>
    window.addEventListener('resize',function () {
        //当浏览器窗口大小发生变化时，触发的function
    })
</script>

总结

以后遇到问题还是要多方面思考一下，换个方向也许会有更好的解决方法呢~