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

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

回答这个问题之前，我们首先要具备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​

​ 就不会出现以上这些问题了。

Media

总结