事件冒泡和事件捕获

1.什么是事件冒泡和事件捕获

<div id="outer">
    <p id="inner">Click me!</p>
</div>

上面的代码当中一个div元素当中有一个p子元素，如果两个元素都有一个click的处理函数，那么我们怎么才能知道哪一个函数会首先被触发呢？

为了解决这个问题微软和网景提出了两种几乎完全相反的概念。

• 事件冒泡 微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。因此上面的例子在事件冒泡的概念下发生click事件的顺序应该是p -> div -> body -> html -> document

• 事件捕获 网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。上面的例子在事件捕获的概念下发生click事件的顺序应该是document -> html -> body -> div -> p

• 事件冒泡和事件捕获过程图：

DOM事件流的三个阶段是先捕获阶段，然后是目标阶段，最后才是冒泡阶段

1-5是捕获过程，5-6是目标阶段，6-10是冒泡阶段；