JavaScript事件流包含捕获（从window到目标）和冒泡（从目标到document）两个阶段；事件委托是利用冒泡特性在父元素统一监听子元素事件的优化策略。
JavaScript事件冒泡和捕获是DOM事件传播的两个核心阶段，共同构成完整的事件流；事件委托则是基于冒泡机制的实用优化策略，不是独立机制，而是对冒泡特性的巧妙运用。
当点击一个嵌套结构中的子元素（比如按钮），事件会先在该元素上触发，然后依次向上传播到父元素、祖父元素，直至document。这是默认行为，无需额外配置。
<div id="outer"><div id="inner"><button>点我</button></div></div>，点击按钮后，执行顺序为：button → inner → outer → body → html → documente.stopPropagation()中途阻止继续冒泡，但不影响当前元素上已绑定的其他监听器与冒泡相反，捕获阶段从window开始，经过document、html、body，逐层向下到达目标元素。它发生在冒泡之前，属于事件流的“第一站”。
addEventListener第三个参数传true或{ capture: true }
利用冒泡原理，把事件监听绑定在父容器上，通过e.target识别真正被点击的子元素，避免为每个子项单独绑定事件。
立即学习“Java免费学习笔记（深入）”；
const list = document.getElementById('myList');list.addEventListener('click', function(e) { if (e.target.tagName === 'LI') { console.log('点击了列表项：', e.target.textContent); }});pointer-events: none会中断）实际开发中，多数交互逻辑依赖冒泡，捕获仅在特定预处理场景下启用；事件委托应成为处理重复子元素事件的首选方案。
e.stopImmediatePropagation()——它会跳过同阶段其余监听器，调试时容易遗漏e.target而非this，因为this指向绑定事件的父元素，而e.target才是真实触发者以上就是javascript的事件冒泡和捕获机制是什么_如何正确使用事件委托的详细内容，更多请关注php中文网其它相关文章！
java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
745
收藏
取消收藏
