事件冒泡，事件捕获，解除事件冒泡与捕获。

事件流

描述的是从页面中接受事件的顺序。浏览器两大阵营在早些时候看法是一致的，点击页面中的元素，其实相当于也点击了HTML，整个页面。浏览器两大阵营提出了差不多完全相反的事件模型。

事件冒泡，

IE事件流，事件由最具体的元素接受，如果点击一个页面中的div，这个点击事件从点击的元素按HTML结构逐层向上向父级冒泡，注意不是视觉上的父级，顺序是1,div 2,body 3,html 4,document

事件冒泡

所有浏览器都支持事件冒泡，只不过有轻微区别。

事件捕获，

Netscape（网景）事件流，不太具体的节点应该更早接受到事件，用意是事件到达预定目标之前捕获它。IE8以及以下不支持事件捕获，不建议使用事件捕获。如果点击div，那么最先接收到事件的是document，然后HTML结构上向下，知道预定目标。顺序是1,documen 2,html 3,body 4,div

事件捕获

 

DOM事件流，

DOM2级事件流包括三个阶段，分别是，事件捕获阶段，处于目标阶段，事件冒泡事件，在事件捕获阶段，预定目标是不会接收到事件的，下一个阶段是处于目标阶段，执行事件处理程序，然后是事件捕获阶段。IE8以及以下不支持事件流。

事件流

 

小例子

   .grad{
	    width: 300px;
	    height: 300px;
	    background: red;
	    margin: 0 auto;
	}
	.par{
	    width: 200px;
	    height: 200px;
	    background:black;
	}
	.son{
		width: 100px;
		height: 100px;
		background: green;
		} 

<div class="grad">
    <div class="par">
        <div class="son"></div>
    </div>
</div>
var grad = document.getElementsByClassName("grad")[0];
var  par = document.getElementsByClassName("par")[0];
var son  = document.getElementsByClassName("son")[0];
grad.addEventListener("click",function(){console.log('grad冒泡');},false);
par.addEventListener("click",function(){console.log('par冒泡');},false);
son.addEventListener("click",function(){console.log('son冒泡');},false);
grad.addEventListener("click",function(){console.log('grad捕获');},true);
par.addEventListener("click",function(){console.log('par捕获');},true);
son.addEventListener("click",function(){console.log('son捕获');},true);

 

运行上面代码会依次打印grad捕获 ==>par捕获==> son冒泡==>son捕获==>par冒泡==>grad冒泡,首先是按照事件流的顺序先捕获后冒泡，是但是对于目标元素，是取决于程序绑定顺序，也就是说，将上面绑定son的两条句子换一下顺序的话，那么顺序就变成了，grad捕获 ==>par捕获==> son捕获==>son冒泡==>par冒泡==>grad冒泡。

事件对象，事件元对象的兼容

事件对象兼容方式：  var event= e || window.event;

事件元对象兼容：var eventTarget = event.target || event.srcElement;

取消事件冒泡

       标准浏览器：event.stopPropagation（）;

       IE浏览器: event.cancelBubble=true;