
优化 window.addEventListener 事件执行顺序
本文介绍如何在不修改代码顺序的前提下,提高 window.addEventListener 事件处理函数的优先级。关键在于利用事件的捕获阶段。
默认情况下,事件处理遵循冒泡机制,从内层元素向外层元素传播。为了改变执行顺序,我们可以利用捕获阶段,让事件处理函数在冒泡阶段之前执行。
以下示例展示了如何使用捕获阶段来提升事件优先级:
window.addEventListener("resize", () => console.log("默认优先级"));
window.addEventListener("resize", () => console.log("高优先级"), { capture: true });
通过设置 { capture: true },第二个事件监听器将在捕获阶段触发,优先于第一个监听器执行,从而实现优先级调整。 注意,这并非改变事件监听器在代码中的位置,而是利用事件机制本身的特性来控制执行顺序。











