DOM 事件绑定

DOM 提供了许多事件供开发者进行绑定，以响应各种操作，丰富页面交互。

想要触发事件，就得先给 DOM 节点绑定事件，提供事件处理器。

1. 直接在 HTML 上提供事件

这种方式是将事件内联在 HTML 代码中。

图片描述

通过设置 HTML 的 onclick 属性，可以绑定点击事件，属性内可以写简单的 JavaScript 代码。

但是可以看到这种方式是有局限性的，写大量的 JavaScript 代码在里面肯定是不合理的。

过去网页的交互相对较少，会在 body 标签上绑定 onload 事件，即页面加载完毕后做的事情。

onload="load()" 即表示在页面加载完成后，执行 load 函数。现在翻阅部分文献，依然能够看到这种写法。

通过事件处理器属性设置绑定事件，需要先获取到 DOM 节点。

图片描述

通过 onclick 就可以设置按钮的点击事件。

如果需要清除事件，可以重新将属性重新设置为 null。

这种绑定事件的方式依然常用，各种文献的 demo 也会采用这种方式，但缺点是同一个事件在没有其他辅助条件下，只能绑定一个事件处理器。

使用 DOM 节点的 addEventListener 方法也可以绑定事件。

图片描述

addEventListener 的第一个参数是事件类型，和使用事件处理器属性与HTML内联事件不同，这个方法的事件类型不需要 on 前缀。

第二个参数就是事件处理器，即触发事件时要做的事情。

使用 addEventListener 可以绑定多个事件处理器。

一个事件绑定多个事件处理器，其执行顺序是按照绑定顺序来的。

如果需要去除事件，可以使用 removeEventListener 方法。

使用 removeEventListener 去除事件，需要传递指定的事件，且事件处理器必须与绑定事件传入的一样，为同一个。

addEventListener 与 removeEventListener 还具有第三个参数，会在事件流章节进行讨论。

IE8及以下都不支持该方法，需要使用IE提供的 attachEvent 与 detachEvent 来处理事件

目前常讨论的 DOM 级别有 4 级，为 DOM 0级 至 DOM 3级，这里的级可以理解成标准的版本。

这 4 级内容中， DOM 1级没有提供事件相关的内容，所以不会拿来讨论，因此 DOM 事件就被分为了常说的 DOM 0级事件、DOM 2级事件、DOM 3级事件。

事实上 DOM 0级事件并不是标准中的，在 W3C 制定 DOM 标准前，部分浏览器已经有了 DOM 模型，也有自己相应的事件，这些出现在标准第一个版本之前的，就被称为了 DOM 0。

绑定 DOM 事件可以通过以下三种方式：

前两种方式不能绑定多个事件处理器，三种绑定方式由不同版本的 DOM 标准提供，通常使用 DOM 级别进行区分。