Hexo

前言

要学习事件的基础内容，请看先本人的这篇基础文章：

知识难度不大，只是大家需要系统地学习。

知识点主要包括以下几个方面：

面试不会直接问你，DOM有几个级别。但会在题目中体现：“请用DOM2 ….”。

面试官如果问你“DOM事件模型”，你不一定知道怎么回事。其实说的就是捕获和冒泡。

DOM事件流，指的是事件传递的三个阶段。

讲的是事件的传递顺序。参数为false（默认）、参数为true，各自代表事件在什么阶段触发。

能回答出来的人，寥寥无几。也许有些人可以说出一大半，但是一字不落的人，极少。

DOM事件的知识点，一方面包括事件的流程；另一方面就是：怎么去注册事件，也就是监听用户的交互行为。第三点：在响应时，Event对象是非常重要的。

一般人可以讲出事件和注册事件，但是如果让你讲自定义事件，能知道的人，就更少了。

业务中经常用到。

下面分别讲解。

DOM事件的级别，准确来说，是DOM标准定义的级别。包括：

DOM0的写法：

1
2
3

element.onclick = function () {

}

上面的代码是在 js 中的写法；如果要在html中写，写法是：在onclick属性中，加 js 语句。

DOM2的写法：

1
2
3

element.addEventListener('click', function () {

}, false);

【重要】上面的第三参数中，true表示事件在捕获阶段触发，false表示事件在冒泡阶段触发（默认）。如果不写，则默认为false。

DOM3的写法：

1
2
3

element.addEventListener('keyup', function () {

}, false);

DOM3中，增加了很多事件类型，比如鼠标事件、键盘事件等。

PS：为何事件没有DOM1的写法呢？因为，DOM1标准制定的时候，没有涉及与事件相关的内容。

总结：关于“DOM事件的级别”，能回答出以上内容即可，不会出题目让你做。

DOM事件模型讲的就是捕获和冒泡，一般人都能回答出来。

DOM事件流讲的就是：浏览器在于当前页面做交互时，这个事件是怎么传递到页面上的。

类似于Android里面的事件传递。

完整的事件流，分三个阶段：