你知道哪些浏览器事件不会冒泡吗？
回答这个问题之前，我们首先要具备DOM事件流捕获与冒泡的知识，这里只讲JS中如何设置这两种事件监听，例如对body注册点击事件：
代码语言：javascript复制document.body.addEventListener('click', e => {
console.log('触发捕获阶段');
}, true)
document.body.addEventListener('click', e => {
console.log('触发冒泡阶段');
}, false)具体区别在第三个参数，w3c规定了true表示捕获阶段触发，false表示冒泡阶段触发，默认false。
在JS中通常利用冒泡来进行事件委托，但并不是所有事件都会冒泡。下面我们看看哪些事件是不能冒泡的，又有哪些相关应用场景。
scroll、focus、blur、resize假设有如下一段html结构
代码语言：html复制
代码语言：javascript复制document.getElementById('container').addEventListener('scroll',
function (e) {
console.log('container scroll')
},
);
document.getElementById('outer').addEventListener('scroll',
function (e) {
console.log('outer scroll')
},
);此时滚动内层，我们看到并不会触发外层的事件监听：
2022-08-26 10.43.48.gif而如果设置成捕获监听呢？
代码语言：javascript复制document.getElementById('container').addEventListener('scroll',
function (e) {
console.log('container scroll')
},
true
);
document.getElementById('outer').addEventListener('scroll',
function (e) {
console.log('outer scroll')
},
true
);2022-08-26 10.46.21.gif通过这个例子我们可以得出结论，scroll无法触发冒泡，而捕获事件可以正常触发，所以scroll必须在捕获阶段才能完成事件委托。
注意：有个类似滚动事件的叫滚轮事件wheel是可以触发冒泡的（ MDN - wheel_event ），我们甚至可以通过额外注册 wheel 监听事件并阻止其冒泡从而让 scroll 事件失效，不过只要滚动条还在 scroll 还是可以不通过滚轮来控制滚动的，所以还记得前面我们怎么让元素滚动起来的吗？就是设置了 overflow: scroll;，所以控制滚动应该使用 CSS 而不是 JS 事件。
focus、blur、resize 这几个事件和 scroll 道理是一样的，都不会触发冒泡，所以事件也都不能通过阻止冒泡取消，它们理解起来比较直观，就不多做阐述了。
mouseenter、mouseleavemouseover & mouseenter 均为鼠标移动到元素上的事件，两者区别在于后者不会冒泡。
代码语言：html复制
代码语言：javascript复制document.getElementById('outer').addEventListener('mouseover',
function() {console.log('鼠标进入了外层');}
);
document.getElementById('inner').addEventListener('mouseover',
function() {console.log('鼠标进入了内层');}
);2022-08-26 11.07.19.gif这时就需要在内层额外阻止冒泡（e.stopPropagation()）才能解决多次触发的问题，不过鼠标从 li 移出到 ul 上还是触发了 ul 的监听事件，其实这并不符合常理，因为此时鼠标还是在 ul 内的。相比之下直接使用 mouseenter 就不会出现以上这些问题了。
2022-08-26 11.06.17.gif同样的，mouseout会冒泡，而mouseleave则不会冒泡。
Media由视频、图像、音频等媒体触发的相关事件，都不会触发冒泡，和 scroll 事件同理，如果需要进行事件委托都必须在捕获阶段去处理。
结尾现代JS框架均对事件体系做了相关处理，很多时候开发者可能会忽略事件委托的一些机制，了解其中细节与不同事件之间的差异，可以有效避免实际开发中出现的坑。
以上就是文章的全部内容，希望对你有所帮助！如果觉得文章写的不错，可以点赞收藏，也欢迎关注，我会持续更新更多前端有用的知识与实用技巧，我是茶无味de一天，希望与你共同成长~