面试官：哪些浏览器事件不会冒泡？

我们只需设置overflow:scroll;，当内层的长度超过外层时，元素上就会出现滚动条。这时候应该有两个滚动事件。我们分别为容器和外部添加滚动监视器：).addEventListener('scroll',function(e){console.log('outerscroll')},);这时候滚动内层，我们看到外层的事件监听不会被触发：但是如果设置为抓包监听呢？document.getElementById('container').addEventListener('scroll',function(e){console.log('containerscroll')},true);document.getElementById('outer').addEventListener('scroll',function(e){console.log('outerscroll')},true);通过这个例子我们可以得出结论，scroll不能触发冒泡，但是捕获事件可以正常触发，所以scroll必须在捕获阶段才能完成事件委托。注意：有一个类似滚轮事件的滚轮事件叫做滚轮可以触发冒泡（MDN-wheel_event），我们甚至可以通过额外注册滚轮来监听事件并防止滚轮冒泡，从而使滚轮事件失效，但是只要滚动条还在，scroll仍然可以在不使用滚轮的情况下控制滚动，还记得我们之前是如何让元素滚动的吗？只需设置overflow:scroll;，控制滚动应该使用CSS而不是JS事件。focus、blur、resize事件和scroll一样，不会触发冒泡，所以不能通过阻止冒泡来取消事件。它们更直观易懂，我就不多说了。mouseenter、mouseleavemouseover&mouseenter都是鼠标移到元素上时的事件，两者的区别在于后者不冒泡。假设为ul设置了mouseover事件，当鼠标经过ul时因为ul中有li元素，每次鼠标经过一个li元素会冒泡到ul上的mouseover，导致多次触发：document.getElementById('outer').addEventListener('mouseover',function(){console.log('鼠标进入外层');});document.getElementById('内层').addEventListener('mouseover',function(){console.log('鼠标进入内层');});这时需要在内层额外防止冒泡（e.stopPropagation()）可以解决多次触发的问题，但是鼠标从li移动到ul，还是会触发ul的监听事件。其实这是不符合常识的，因为此时鼠标还在ul中。相比之下，直接使用mouseenter就不会出现上述问题。同样，mouseout会冒泡，mouseleave不会。视频、图片、音频等媒体触发的媒体相关事件不会触发冒泡。和scroll事件一样，如果需要事件委托，必须在capture阶段进行处理。最后，所有现代JS框架都处理了事件系统。在很多情况下，开发人员可能会忽略一些事件委托机制。了解细节和不同事件之间的差异，可以有效避免实际开发中的陷阱。以上就是文章的全部内容，希望对大家有所帮助！觉得文章写得好，可以点赞收藏。也欢迎您关注。我会持续更新更多有用的前端知识和实用技巧。一日茶无味，愿与你共同成长~