在前端开发中，DOM addEventListener 是一个非常常用的方法，它可以用来监听一个元素上的事件并执行对应的处理函数。在事件流中，事件的传递顺序分为冒泡和捕获两种模式。而在 ES12 中，为 DOM addEventListener 增加了一个新的捕获默认模式，使得开发人员在处理事件时更加灵活方便。
捕获默认模式
在过去的 DOM 事件流中，有两种传播方式，即冒泡和捕获，它们的执行顺序分别是从目标元素向上依次递归触发事件处理程序，或从文档根节点到目标元素逐层执行事件处理程序。而ES12为 addEventListener 方法增加了一个新的 capture 参数，允许开发人员直接在捕获阶段处理事件。
增加 capture
在原有的 addEventListener 方法中，我们可以监听元素上的事件，并通过 useCapture 参数来选择一开始是以冒泡还是捕获的方式执行事件处理程序，如下所示：
btn.addEventListener("click", handleClick, useCapture)但这个 useCapture 参数在现有场景下并不太好用，因为它只是决定了事件监听的传播方式，并不能直接在捕获阶段执行事件处理程序。所以，ES12 新增加了一个新的 capture 参数，允许开发人员直接指定事件监听在捕获阶段是否执行。
btn.addEventListener("click", handleClick, {capture: true})当 capture 为 true 时，事件在捕获阶段处理，否则在冒泡阶段处理。
示例代码
<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>-- -------------------- ---- ------- ----- ----- - -------------------------------- ----- ----- - -------------------------------- ------------------------------- ----------------- - -------- ---- -- ------------------------------- ----------------- - -------- ---- -- -------- ----------------------- - ------------------ ------- - -------- ----------------------- - ------------------ ------- -
在上面的例子中，当我们点击 inner 元素时，捕获模式下先执行 handleOuterClick，后执行 handleInnerClick；在冒泡模式下，则先执行 handleInnerClick，后执行 handleOuterClick。
总结
ES12 新增加的捕获默认模式为我们提供了更加灵活、方便的事件监听方式，在某些场景下可以大大简化代码的复杂度。当然，在实际开发过程中，还需要结合具体情况来选择合适的事件监听方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c984285ad90b6d04173bdd