事件捕获与事件冒泡

1、事件捕获与事件触发是两种不同的事件触发顺序。

2、事件冒泡

事件触发时按照：目标元素（target）向顶级根元素的方向依次触发同类型事件。

div -> body -> html -> document

3、事件捕获

事件触发时按照：根元素（docunment）向目标元素（target）的方向依次触发同类型事件。

document
-> html -> body->
div

4、dom模型中的事件

同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，

从document对象开始，也在document对象结束。文本节点也触发事件(在IE中不会)。



事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

5、假设一个元素div，它有一个下级元素p。
<div>

　　 <p>元素</p>
</div>
这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？
 

两种模型
以前，Netscape和Microsoft是不同的实现方式。

Netscape中，div先触发，这就叫做事件捕获。

Microsoft中，p先触发，这就叫做事件冒泡

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，

它有三个参数，第三个参数若
是true， 则表示采用事件捕获，若是false，则表示采用事件冒泡。

ele.addEventListener('click',doSomething2,true)

true=捕获

false=冒泡

传统绑定事件方式
在一个支持W3C DOM的浏览器中，像这样一般的绑定事件方式，是采用的事件冒泡方式。

ele.onclick = doSomething2

6、阻止事件冒泡传播：

W3c： stopPropagation（）;

IE： cancelBubble = true;

7、阻止时间默认行为（form表单的提交、href的点击跳转）

W3c：
preventDefault（）;

IE：
window.event.returnValue = false;