笔记-事件的捕获和冒泡

一、事件、事件监听函数、事件对象

首先，我们明确一下事件、事件监听函数、事件对象，这三个概念之间的关系。

（1）事件，就是发生了什么事，比如点击事件、文本框输入事件、ajax成功返回事件等。
（2）事件监听函数，是在事件发生时我们想执行的代码，是我们在事件上挂的钩子。
（3）事件对象，是对事件的描述对象，就是我们熟悉的那个“e”。每个事件发生时，事件对象都会作为一个参数，被传入事件监听函数。浏览器原生提供一个Event对象，每个事件对象，都是Event的一个实例。并且除了事件发生时自动生成的那个“e”，我们还可以通过 new Event(type, options)，来自己生成一个事件对象。

二、事件的捕获和冒泡

你可能会奇怪，为什么会有捕获和冒泡这种东西，搞得这么复杂？

当你点击页面上的一个按钮，你可以说你点击了按钮，但也可以说，你点击了包着它的div，你点击了这个页面，甚至你点击了window，你都挑不出毛病来，因为确实如此。那怎么办呢？

浏览器设计了这样一个事件模型：当你点击一个按钮时，事件从最外层的window，一层层的往下传播，直到这个按钮，这个过程称为捕获。然后再回去，从这个按钮开始，一层层的往上传播，直到最外层的window，这个过程被称为冒泡。

捕获阶段，从window开始，到目标节点结束。冒泡阶段，从目标节点开始，到window结束。

比如我们点击了div中的一个span标签。事件在页面上