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

Posted 2022-09-26

你知道哪些浏览器事件不会冒泡吗？

回答这个问题之前，我们首先要具备DOM事件流捕获与冒泡的知识，这里只讲JS中如何设置这两种事件监听，例如对body注册点击事件：

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结构

<ul id="container">
    <ul id="outer">
        <div id="inner"></div>
    </ul>
</ul>

我们只需设置​​overflow: scroll;​​​，当内层长度超出外层时元素就会出现滚动条，此时应有两个滚动事件，我们分别为 ​​container​​​ 和 ​​outer​​​ 添加 ​​scroll​​ 监听：

document.getElementById(container).addEventListener(scroll,
    function (e) 
        console.log(container scroll)
    ,
);

document.getElementById(outer).addEventListener(scroll,
    function (e) 
        console.log(outer scroll)
    ,
);

此时滚动内层，我们看到并不会触发外层的事件监听：

而如果设置成捕获监听呢？

document.getElementById(container).addEventListener(scroll,
    function (e) 
        console.log(container scroll)
    ,
    true
);

document.getElementById(outer).addEventListener(scroll,
    function (e) 
        console.log(outer scroll)
    ,
    true

通过这个例子我们可以得出结论，​​scroll​​​无法触发冒泡，而捕获事件可以正常触发，所以​​scroll​​必须在捕获阶段才能完成事件委托。

注意：有个类似滚动事件的叫滚轮事件​​wheel​​​是可以触发冒泡的（ MDN - wheel_event ​），我们甚至可以通过额外注册 ​​wheel​​​ 监听事件并阻止其冒泡从而让 ​​scroll​​​ 事件失效，不过只要滚动条还在 ​​scroll​​​ 还是可以不通过滚轮来控制滚动的，所以还记得前面我们怎么让元素滚动起来的吗？就是设置了 ​​overflow: scroll;​​，所以控制滚动应该使用 CSS 而不是 JS 事件。

​​focus​​​、​​blur​​​、​​resize​​​ 这几个事件和 ​​scroll​​ 道理是一样的，都不会触发冒泡，所以事件也都不能通过阻止冒泡取消，它们理解起来比较直观，就不多做阐述了。

mouseenter、mouseleave

​​mouseover​​​ & ​​mouseenter​​ 均为鼠标移动到元素上的事件，两者区别在于后者不会冒泡。

<ul id="outer">
    <li id="inner"></li>
</ul>

假设给 ​​ul​​​ 设置了 ​​mouseover​​​ 事件，在鼠标经过 ​​ul​​​ 时因为 ​​ul​​​ 中还有 ​​li​​​ 元素，鼠标每经过一个 ​​li​​​ 元素就会冒泡到 ​​ul​​​ 上的 ​​mouseover​​，造成多次触发：

document.getElementById(outer).addEventListener(mouseover,
    function() console.log(鼠标进入了外层);
);
document.getElementById(inner).addEventListener(mouseover,
    function() console.log(鼠标进入了内层);
);

这时就需要在内层额外阻止冒泡（​​e.stopPropagation()​​​）才能解决多次触发的问题，不过鼠标从 ​​li​​​ 移出到 ​​ul​​​ 上还是触发了 ​​ul​​​ 的监听事件，其实这并不符合常理，因为此时鼠标还是在 ​​ul​​​ 内的。相比之下直接使用 ​​mouseenter​​ 就不会出现以上这些问题了。

同样的，​​mouseout​​​会冒泡，而​​mouseleave​​则不会冒泡。

Media

由视频、图像、音频等媒体触发的相关事件，都不会触发冒泡，和 ​​scroll​​​ 事件同理，如果需要进行事件委托都必须在​​捕获阶段​​去处理。

总结

现代JS框架均对事件体系做了相关处理，很多时候开发者可能会忽略事件委托的一些机制，了解其中细节与不同事件之间的差异，可以有效避免实际开发中出现的坑，如果看完觉得对你有所帮助，不妨点个赞再走吧~