关于javascript:JavaScript-事件机制

点击、滚动、触摸、拖拽……这些用户与 web 页面交互的伎俩都能够称之为「事件」，理解 JavaScript 的事件机制，无论是对优化一些用户交互亦或是解决线上 BUG 都会有很大的帮忙。

言归正传，用户在交互过程中触发的「事件」能够分为以下这几种阶段👇

• 捕捉阶段：事件从 window 对象开始触发，自顶向下直至指标对象
• 指标阶段：事件在指标对象触发
• 冒泡阶段：事件从指标对象，首先作用于指标对象自身，自下而上直至最外层 HTML 元素

如何开启冒泡 & 捕捉？？

事件的触发阶段下面曾经提到过了，那么如何在理论的编码过程中别离应用冒泡 & 捕捉呢？实际上，addEventListener 默认提供的就是冒泡事件，假如你要开启捕捉，那么能够间接这样设置：

// 代码仅供参考
const el = document.querySelector('div');
el.addEventListener('click', function(e) {console.log('test');
}, true)

当然 addEventListener 还提供了一个更加粗疏的可选配置👇

踩踩坑

接下来咱们来看一个 demo 👇

HTML 代码 👇

<div class="container">
    <div class="content">
        <!-- 足够使 content 这个 div 呈现滚动条的文本 -->
    </div>
</div>

JavaScript 代码 👇

const el = document.querySelector('container');
el.addEventListener('scroll', function(e){console.log('scroll');
});

运行之后你会发现，无论如何滚动 content 里的文本，都没有 log 打印进去，那么 content 滚动的时候竟然没有冒泡？！！

事实上，的确存在一些没有「冒泡阶段」的事件，scroll 事件就是其中之一，「冒泡阶段」只能由 document 或 window 上应用，否则只能应用「捕捉阶段」。

如果你在 MDN 上查找文档就发现，其实并没有提到这点，并且还强调 scroll 事件是能够冒泡的👇

反而是提醒存在冒泡阶段，但如果切换到繁体字版本的话就难堪了😅

粗心：元素上不冒泡，然而会在 document 和 window 上进行冒泡。

留神这里提到的 default view 其实也就是 document.defaultView，返回值是 Window。

也就是说，对于 scroll 事件来说，它的冒泡是从 document 到 window 对象之间产生的。

总结

• 事件产生之后个别会有三个阶段，别离为「捕捉阶段」、「指标对象」阶段和「冒泡阶段」。但并不是所有事件都肯定会有「冒泡阶段」，比如说 scroll 事件或者其余媒体类型的事件
• MDN 文档并不是非常精确，在文档搜寻时最好比照一下不同语言版本的差别（也与翻译文档的人无关，可能夹带私货😄）

参考

Bubbling and capturing

scroll