JavaScript DOM事件流事件捕获事件冒泡

事件

在讲事件流之前，我们先来了解一下事件。

JavaScript与HTML之间的交互是通过事件来实现的。事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。我们可以使用侦听器（或事件处理程序）来预订事件，以便事件发生时执行相应的代码。说白了，就是当我们对页面上的某些元素进行某些操作（比如鼠标单击）时产生一些特定的行为。比如鼠标单击一个按钮然后弹出一个对话框。这里就涉及到了按钮的click事件，产生的行为就是弹出了一个对话框。

事件最早是在IE3和Netscape Navigator2 中出现的，当时是作为分担服务器运算负载的一种手段。在IE4和Navigator4发布时，这两种浏览器提供了相似但不同的API

事件类型

web浏览器中可能发生的事件有很多类型，不同的事件类型具有不同的事件信息，在“DOM3级事件”中规定了如下几类事件类型：

• UI（User Interface用户界面）事件，当用户与页面上的元素交互时触发
• 焦点事件，当元素获得或失去焦点是触发
• 鼠标事件，当用户通过鼠标在页面上执行操作时触发
• 滚轮事件，当使用鼠标滚轮（或类似设备）时触发
• 文本事件，当在文档中输入文本时触发
• 键盘事件，当用户通过键盘在页面上执行操作时触发
• 合成事件，当为IME（Input Method Edtor，输入法编辑器）输入字符时触发
• 变动（mutation）事件，当底层DOM结构发生变化时触发

有三种绑定事件的方式：

• 直接在dom元素上指定相应的事件，例如鼠标单击事件：

点我

• 通过JavaScript获取到元素对象，然后通过对象属性的方式绑定事件

点我

上面的代码中我们给div添加了单击事件，并传递了第三个参数true，这时事件流将以捕获流的模式进行传播。

处于目标阶段

上面我们提到，由于IE和Netscape两个团队提出了完全相反的事件流的概念，用谁弃谁都不合适，于是最终就采取了一个比较折中的办法就是：在事件流的三个阶段中，首先经过事件捕获阶段，然后是实际目标接收到事件即处于目标阶段，最后再经过事件冒泡阶段，最终事件流结束。以下是DOM事件流的完整图片：

那么这样就会引发另一个问题，既然捕获阶段和冒泡阶段都要经过，那么当我们触发一个事件时，同一段代码岂不是要执行两次？为了解决这一问题，最终规定默认情况下都是以事件冒泡流的模式进行事件传播（IE获胜）。如果想要一捕获模式传播那就需要用到我们上面介绍的方法用侦听器绑定事件并将第三个参数设置为true即可。

阻止冒泡

无论事件是以冒泡模式传播还是以捕获模式传播，都会有一个问题，有时候我们不想让事件向上或向下传播，即我们触发哪个元素的事件，事件就停留在哪个元素而不进行传播。那就是接下来我们要说的阻止冒泡。

事件的冒泡是可以被阻止的，防止事件冒泡而带来不必要的错误和困扰。阻止冒泡的方法就是stopPropagation()，看如下示例代码：

ClickMe

上面的代码中，在事件处理函数中接收一个event参数，然后通过调用event.stopPropagation()方法就可以阻止冒泡了。

以上就是DOM事件流相关介绍。