最近在学习javascript中遇到了一些困难，比如冒泡和捕获，很多次被提到，但又不知究竟应用在何处。找到了一些好文章解惑，在这里分享给大家。

添加事件的js方法也很多，有直接加到页面结构上的，有使用一些js事件监听的方法，由于各个浏览器对事件冒泡事件监听的机制不同

事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别，有需要的朋友可以参考一下

本文详解Button悬停动画中因SVG图标触发mouseout事件而导致的闪烁/中断问题，核心解决方案是为SVG元素设置pointer-events:none，确保鼠标事件正确委托给父按钮容器。

事件委托是利用事件冒泡机制在父元素统一监听子元素事件，避免为每个子元素重复绑定，提升性能并支持动态元素；应优先用closest()精准匹配目标，避免绑定到document/body，且focus/blur等不冒泡事件需特殊处理。

CSSGrid容器overflow:auto滚动异常的根本原因是尺寸约束不清或子项行为失控；需明确容器宽高（如max-height）、避免fr单位隐式拉伸、设置子项min-width/min-height:0，并隔离滚动职责。

原生JavaScript实现稳定拖拽需用setPointerCapture锁定指针事件流，配合pointermove坐标归一化和pointerup释放捕获，同时禁用默认行为、设置CSS隔离及处理多点触控。

事件流分为捕获、目标、冒泡三阶段，addEventListener的useCapture参数决定监听阶段，stopPropagation()中断整个事件流而非仅冒泡。

本文介绍在Web音频播放器中，让只读进度条（）与可拖拽滑块（）在播放过程中保持位置同步，同时不阻塞用户手动拖动操作的核心技巧。

下拉菜单点击后瞬间展开又关闭，根本原因是默认跳转行为触发页面重载，导致状态丢失；同时父容器缺少position:relative致使绝对定位的菜单脱离预期布局流。

本文详解如何利用CSS实现“悬停一个元素隐藏它同时显示并激活另一个元素（含可点击链接）”，重点解决因层叠顺序、事件穿透和动画残留导致的点击失效问题。

事件传播分捕获（外内）和冒泡（内外）两阶段；stopPropagation()中断传播路径，preventDefault()取消默认行为，二者功能独立。