事件流包含捕获、目标和冒泡三个阶段，事件从window开始向下传播至目标元素再向上冒泡；2. 可通过addEventListener的第三个参数指定在捕获或冒泡阶段监听事件；3. 使用event.stopPropagation()阻止事件传播，stopImmediatePropagation() additionally阻止同元素其他监听器执行；4. 事件委托利用冒泡机制将事件绑定到父元素处理子元素事件，减少内存占用并支持动态添加的元素；5. 需通过e.target准确判断事件源，并注意并非所有事件都冒泡，如focus、blur需用focusin/focusout替代。掌握这些机制可提升代码性能与维护性。
在 JavaScript 中，DOM 事件是用户与网页交互的核心机制。理解事件流和事件委托，有助于写出更高效、可维护的事件处理代码。
事件流：事件的传播过程
当用户触发一个 DOM 事件（如点击按钮），该事件并不会只作用于目标元素，而是在 DOM 树中经历三个阶段的传播过程：
捕获阶段（Capture Phase）：事件从 window 开始，逐级向下传递，经过 document、html、body，直到目标元素的父节点为止。这个阶段主要用于监听外层元素对内部事件的预处理。 目标阶段（Target Phase）：事件到达绑定事件的目标元素本身，此时事件被真正触发。 冒泡阶段（Bubbling Phase）：事件从目标元素开始，逐级向上传播回 window，路径与捕获相反。大多数事件默认在此阶段被处理。
可以通过 addEventListener 的第三个参数控制事件监听的阶段：
element.addEventListener(‘click’, handler, true); // 捕获阶段监听
element.addEventListener(‘click’, handler, false); // 冒泡阶段监听（默认）
阻止事件传播
有时不希望事件继续传播，可以使用以下方法：
立即学习“Java免费学习笔记（深入）”；
event.stopPropagation()：阻止事件继续在 DOM 树中传播，但不影响当前元素其他监听器的执行。 event.stopImmediatePropagation()：除了阻止传播，还阻止当前元素上其他同类型事件监听器的执行。
例如，点击子元素时，如果不希望触发父级的 click 事件，可在子元素事件处理器中调用 stopPropagation。
事件委托：利用事件冒泡优化性能
事件委托是一种利用事件冒泡机制，将事件监听器绑定到父元素来处理子元素事件的技术。它特别适用于动态内容或大量子元素的场景。
比如有一个无序列表 ul，包含多个 li 项，未来可能动态添加新的 li。如果为每个 li 单独绑定事件，不仅繁琐，新增元素还需重新绑定。
使用事件委托，只需为 ul 绑定一次事件：
const list = document.querySelector(‘ul’);
list.addEventListener(‘click’, function(e) {
if (e.target.tagName === ‘LI’) {
console.log(‘Clicked on:’, e.target.textContent);
}
});
这样，无论 li 是何时添加的，点击都会通过冒泡被 ul 捕获并正确处理。
事件委托的优势与注意事项
减少内存占用：避免为多个元素重复绑定事件监听器。 支持动态元素：无需为新插入的 DOM 节点重新绑定事件。 注意事件源判断：必须通过 e.target 准确识别实际触发事件的元素，防止误处理。 并非所有事件都冒泡：如 focus、blur 等不冒泡，可用 focusin/focusout 替代。
基本上就这些。掌握事件流和事件委托，能让你的事件处理逻辑更清晰、性能更优。关键是理解冒泡机制，并善用 e.target 进行事件代理判断。
以上就是JavaScript DOM 事件：事件流与事件委托机制的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1533600.html
微信扫一扫 
支付宝扫一扫 
