网站不能写入php文件,怎么注册wordpress,做改网站,微信小程序如何做一、前言
在前端开发中#xff0c;事件驱动 是实现用户交互的核心机制。当我们点击按钮、输入文本或滚动页面时#xff0c;浏览器会触发相应的事件。而这些事件是如何在 DOM 树中传播的#xff1f;为什么有时候点击子元素也会触发父元素的事件#xff1f;
这就涉及到了 J…一、前言
在前端开发中事件驱动 是实现用户交互的核心机制。当我们点击按钮、输入文本或滚动页面时浏览器会触发相应的事件。而这些事件是如何在 DOM 树中传播的为什么有时候点击子元素也会触发父元素的事件
这就涉及到了 JavaScript 中一个非常重要的概念DOM 事件流Event Flow。
本文将带你深入了解
什么是 DOM 事件流事件传播的三个阶段捕获、目标、冒泡如何监听不同阶段的事件阻止事件传播的方法实际开发中的常见使用场景
通过这篇文章你将掌握 JavaScript 中事件传播的底层机制并能灵活运用到项目开发中。 二、什么是 DOM 事件流
在 DOM 中当一个事件发生时如 click它并不是只作用于触发它的那个元素而是会在整个 DOM 树上进行传播。这种传播过程就被称为 事件流Event Flow。 事件传播的三个阶段
捕获阶段Capture Phase事件从最外层的 window 对象开始逐步向下传递到目标元素目标阶段Target Phase事件到达触发事件的目标元素冒泡阶段Bubble Phase事件从目标元素开始逐级向上冒泡回传到最外层对象。 简单记忆 “由外向内 → 到达目标 → 由内向外” 三、事件传播流程图解
window↓ ←← 捕获阶段
document↓
html↓
body↓
targetElement ←← 目标阶段↓
body ↑↑ ↖
html ↖↑ 冒泡阶段
document↑
window 四、如何监听不同阶段的事件
在 JavaScript 中我们可以通过 addEventListener() 方法来监听事件并通过第三个参数控制监听发生在哪个阶段。
element.addEventListener(click, handler, useCapture)
参数含义element要绑定事件的 DOM 元素click事件类型handler事件处理函数useCapture是否在捕获阶段监听true/false
默认值为 false即在 冒泡阶段 监听事件。
✅ 示例演示事件传播的三个阶段
div idouter外层 divdiv idinner内层 div/div
/divscript
const outer document.getElementById(outer)
const inner document.getElementById(inner)// 捕获阶段监听
outer.addEventListener(click, () {console.log(外层 div - 捕获阶段)
}, true)// 冒泡阶段监听
outer.addEventListener(click, () {console.log(外层 div - 冒泡阶段)
}, false)// 目标阶段监听
inner.addEventListener(click, () {console.log(内层 div - 目标阶段)
})
/script 输出结果顺序
外层 div - 捕获阶段
内层 div - 目标阶段
外层 div - 冒泡阶段 五、阻止事件传播
有时我们不希望事件继续传播下去比如点击某个元素后不想触发父元素的事件这时我们可以使用以下方法阻止事件传播。
✅ 使用 event.stopPropagation()
inner.addEventListener(click, function (e) {console.log(内层 div 被点击)e.stopPropagation()
}) 效果
如果在捕获阶段调用后续的捕获和目标阶段不会执行如果在冒泡阶段调用后续的冒泡阶段不会执行不会阻止该元素上的其他监听器执行。
✅ 使用 event.stopImmediatePropagation()
如果你希望彻底阻止该事件的所有后续监听器执行包括当前元素的其它监听器可以使用
inner.addEventListener(click, function (e) {console.log(第一个监听器)e.stopImmediatePropagation()
})inner.addEventListener(click, function () {console.log(第二个监听器) // 不会执行
}) 六、阻止默认行为
有些事件会有默认行为比如 a 标签点击跳转、表单提交刷新页面等。我们可以通过 preventDefault() 来阻止这些默认行为。
const link document.querySelector(a)link.addEventListener(click, function (e) {e.preventDefault()alert(链接被点击但没有跳转)
}) 注意
e.preventDefault() 不会影响事件传播如果你想同时阻止传播和默认行为需要两个方法一起使用。 七、事件委托Event Delegation
事件委托是基于事件冒泡机制的一种优化手段适用于动态添加或大量子元素的情况。
✅ 示例给列表项统一绑定点击事件
ul idlistli列表项 1/lili列表项 2/lili列表项 3/li
/ulscript
document.getElementById(list).addEventListener(click, function (e) {if (e.target.tagName LI) {console.log(你点击了:, e.target.textContent)}
})
/script 优点
减少监听器数量动态新增元素也能响应事件提升性能尤其适用于大型列表或表格。 八、事件传播的实际应用场景
场景描述表单验证在冒泡阶段统一处理错误提示弹窗组件点击遮罩关闭弹窗使用冒泡导航栏高亮点击子菜单更新父导航状态表格排序点击列头触发排序逻辑阻止重复点击使用 stopPropagation 或 once: true防止误操作使用 preventDefault 阻止默认行为 九、总结对比表
特性描述事件传播阶段捕获阶段 → 目标阶段 → 冒泡阶段默认监听阶段冒泡阶段useCapture false添加监听器addEventListener(type, handler, useCapture)阻止传播event.stopPropagation()阻止默认行为event.preventDefault()阻止所有监听器event.stopImmediatePropagation()推荐程度✅ 所有开发者必须掌握 十、结语
感谢您的阅读如果你有任何疑问或想要分享的经验请在评论区留言交流
