JavaScript事件模型包括三个阶段：事件捕获，目标阶段和事件冒泡。了解这些阶段是编写高效前端代码的重要组成部分。
事件捕获
事件捕获是指自上而下地查找DOM树来确定触发事件的最外层元素。事件从window对象开始在DOM树中向下传递，直到触发事件的目标元素被找到。如果通知到达目标元素后还有父元素，则继续进行事件冒泡。
---------------------------------- ---------- - -------------------- -- ------
在上面的代码中，第三个参数为true表示事件捕获阶段被开启。当你单击页面上的任何元素时，会按以下顺序打印两条消息：
- 捕获阶段
- 冒泡阶段
事件冒泡
事件冒泡是指从触发事件的元素开始，向上冒泡直到window对象。这意味着如果您通过单击子元素触发事件，则该事件将向上传播到其父元素，祖先元素，直到它到达window对象或停止传播。
---------------------------------- ---------- - -------------------- ---
在上面的代码中，第三个参数被省略，默认为false，表示事件冒泡阶段被开启。当您单击页面上的任何元素时，将按以下顺序打印两条消息：
- 冒泡阶段
- 捕获阶段
阻止事件冒泡和默认行为
操作事件对象可以防止事件的默认行为并停止事件的传播。在处理程序内调用event.stopPropagation()以阻止事件冒泡。要防止事件的默认行为，请使用event.preventDefault()。
---------------------------------------------------------- --------------- - ------------------------ ------------------ ------- ---------- --- ---------------------------------------------------------- ---------- - ------------------ ------- ---------- ---
在上面的代码中，当您单击.inner元素时，它会打印Inner element clicked而不会冒泡到.outer元素。
总结
事件捕获和事件冒泡是DOM事件模型中的两个重要概念。通过理解它们如何工作，您可以编写更高效的前端代码并避免常见问题。对于需要处理多个事件的复杂应用程序，深入了解这些概念尤其重要。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/1943