内容参考《JavaScript高级程序设计》一书

1、事件流

事件是JavaScript代码与HTML交互的一种方式，而事件流则描述了页面接收事件的顺序，最初阶段IE与NetSpace提出的事件流分别的是事件冒泡与事件捕获，是两种相反的处理方式。而DOM2 Event规定事件流一般有三个阶段即：事件捕获阶段->到达目标阶段->事件冒泡阶段

1.1 事件捕获

事件捕获是指目标节点是最后收到事件的，可以把事件捕获看作是一种瀑布方式（目标节点在最下面），事件自上而下。事件捕获的目的是为了在目标节点之前拦截事件。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>菜鸟教程(runoob.com)</title>
</head>
<script>
  function showMessage () {
    console.log("Hello world!");
  }
</script>
<body>
  <input type="button" value="Click Me" onclick="showMessage()"/>
</body>

</html>

如上图代码，当我们点击这个button按钮时，事件先从document开始然后到html到body最终到达我们目标元素

在DOM事件流中，实际的目标元素在捕获阶段是不会接收到事件的，捕获阶段一般到该目标元素的父级元素结束，如上代码也就是到body元素结束

1.2 事件冒泡

事件捕获流程结束后，事件到达是DOM2 Event中第二个阶段，也是事件到达目标节点阶段。通常在此阶段处理事件也被看作是事件冒泡的开始，然后事件流开始了第三阶段：事件冒泡。相对于事件捕获，事件冒泡是自底向上的。

事件冒泡是大多数程序员在实际开发中都会遇到的，阻止事件冒泡可参考js中阻止事件冒泡的几种方法 - 中文呀 - 博客园 (cnblogs.com)

一、JavaScript事件之事件流

1、事件流

1.1 事件捕获

1.2 事件冒泡