浅谈DOM事件流

这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战 !

在讲述事件流之前，我们先了解一下什么是事件？

事件

JavaScript和HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。可以使用监听器（或事件处理程序）来预定事件，以便事件发生时执行相应的代码。通俗的说，这种模型其实就是一个观察者模式。

事件流

当我们在网页上进行某些类型的交互时，会触发事件。当一个节点产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程称为DOM事件流。

早期对于事件流IE和网景有着不同的概念：

IE的事件流是事件冒泡，即从下至上，从目标触发的元素逐级向上传播，直到window对象。 网景的事件流是事件捕获，即从document逐级向下传播到目标元素。但是IE低版本浏览器不支持，所以很少使用事件捕获

ECMAScript在DOM2中对事件流进行了进一步规范，就是上述二者的结合。 包括三个阶段：

• （1）事件捕获阶段
• （2）处于目标阶段
• （3）事件冒泡阶段

DOM的分级

0级DOM

将事件监听直接挂在节点上，回调中的this将指向当前的节点。这种方式是我们通常所说的0级DOM。 例：

<input class="myButton" type="button" value="add" onclick="alert('hello');" >  

1级DOM：

DOM1级主要定义的是HTML和XML文档的底层结构。相当于规范化以前大家约定俗成的一些用法。 1级DOM标准中并没有定义事件相关的内容，和0级类似

2级DOM

2级DOM中，除了目标节点之外，允许目标的每个祖先节点也有机会处理那个事件。

2级主要阶段就是上述 事件捕获阶段、处于目标阶段和事件冒泡阶段

dom2级事件处理程序，是指添加和删除事件处理程序的操作：addEventListener()、removeEventListener()

3级DOM

DOM3级又增加了XPath模块和加载与保存（Load and Save）模块。补充了一些新事件： oninput、Location、key

事件委托

如果有多个DOM节点需要监听事件的情况下，给每个DOM绑定监听函数，会极大的影响页面的性能，因为我们通过事件委托来进行优化，事件委托利用的就是冒泡的原理

优点:

1. 提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件，所占用的内存空间更少。
2. 动态监听:使用事件委托可以自动绑定动态添加的元素，即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

阻止冒泡

1. event.stopPropagation();

   事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（可以执行超链接的跳转）

2. return false;

   事件处理过程中，阻止了事件冒泡，也阻止了默认行为（不能执行超链接的跳转）

3. event.preventDefault();

   事件处理过程中，不阻击事件冒泡，但阻击默认行为