JavaScript - 顶层window方法onresize() 互相覆盖的问题

刺骨的言语ヽ痛彻心扉 2021-09-18 14:00 365阅读 0赞

### 前言 ###

在单网页中使用同时使用window.onresize，发现后面onresize方法会把前面的 window.onresize 覆盖掉，有什么办法使所有组件的 window.onresize 都能执行互不影响？

### 原因 ###

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

### 实例 ###

### window.addEventListener() ###

声明：[https://blog.csdn.net/q6678188/article/details/51781478][https_blog.csdn.net_q6678188_article_details_51781478]

##### 原型 #####

public override function addEventListener(type:String, listener:Function, 
    useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void

##### 作用 #####

侦听事件并处理相应的函数。

##### 参数 #####

1、type:String 　　事件的类型（去掉前面的on）。

2、listener:Function 　　侦听到事件后处理事件的函数。 此函数必须接受 Event 对象作为其唯一的参数，并且不能返回任何结果，如以下示例所示： 访问修饰符 function 函数名(evt:Event):void

3、useCapture:Boolean (default = false) 　　这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序 为：捕获阶段（根节点到子节点检查是否调用了监听函数）→目标阶段（目标本身）→冒泡阶段（目标本身到根节点）。此处的参数确定侦听器是运行于捕获阶段、 目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。 如果useCapture 为 false，则侦听器只在目标或冒泡阶段处理事件。 要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture 设置为 true，第二次再将useCapture 设置为 false。

4、priority:int (default = 0) 　　事件侦听器的优先级。 优先级由一个带符号的 32 位整数指定。 数字越大，优先级越高。 优先级为 n 的所有侦听器会在优先级为 n -1 的侦听器之前得到处理。 如果两个或更多个侦听器共享相同的优先级，则按照它们的添加顺序进行处理。 默认优先级为 0。

5、useWeakReference:Boolean (default = false) 　　确定对侦听器的引用是强引用，还是弱引用。 强引用（默认值）可防止您的侦听器被当作垃圾回收。 弱引用则没有此作用。

[https_blog.csdn.net_q6678188_article_details_51781478]: https://blog.csdn.net/q6678188/article/details/51781478