1.我们首先要明白一个事情，什么是js中的事件：
JavaScript与HTML之间的交互是通过事件实现的，事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间。
2.什么是事件流：
当浏览器发展到第四代的时候，浏览器开发团队遇到了一个很有意思的问题，如果一个页里有一个按钮，你点击了按钮，浏览器认为你不仅点击这个按钮，同时点击了整个页面。
dom事件流.png
事件流描述的是从页面中接收事件的顺序，但是当时IE和Netscape开发团队居然提出了差不多两种完全不同的事件流概念：
IE 事件流是冒泡流；
Netscape 事件流是捕获流；
3.什么是冒泡流
IE的事件流叫做事件冒泡，即事件开始时候由最具体的元素（文档中嵌套层次最深的元素）接收，然后逐级向上传播到较为不确定的文档。
4.什么是事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收事件。
5.两种规范实施
支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。
而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行。
所以在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。
6.看一个例子:
<div>
<span class="out">
<span class="in"></span>
</span>
</div>
<script type="text/javascript">
var dom_out = document.getElementsByClassName('out')[0];
var dom_in = document.getElementsByClassName('in')[0];
dom_out.addEventListener('click',function(){
alert('out');
},false);
dom_in.addEventListener('click',function(){
alert('in');
},false);
</script>
在上面的例子中，事件是按照冒泡的顺序执行的，点击里面的in 会看到alert执行的顺序先是in 后是out如果把事件改成捕获，alert的顺序又不一样了。
<div>
<span class="out">
<span class="in"></span>
</span>
</div>
<script type="text/javascript">
var dom_out = document.getElementsByClassName('out')[0];
var dom_in = document.getElementsByClassName('in')[0];
dom_out.addEventListener('click',function(){
alert('out');
},true);
dom_in.addEventListener('click',function(){
alert('in');
},true);
</script>
上面的例子是捕获的例子，是不是不太一样呢？之所以会有冒泡和捕获事件毕竟在实际的处理事情肯定有一个先后的顺序，要么由里到外要么由外到里，两者都是必须的。
7.进一步理解冒泡和捕获:
现在已经说清楚冒泡和捕获，那么如果同时出现冒泡和捕获会出现什么结果？原来浏览器处理时间分为两个阶段，捕获阶段和冒泡阶段，先执行捕获阶段，如果事件是在捕获阶段执行的(true 情况)，则执行；然后是冒泡阶段，如果事件是在冒泡阶段执行的(false 情况)，则执行；来看一看例子就知道了：
<div>
<span class="s1">s1
<span class="s2">s2
<span class="s3">s3
</span>
</span>
</span>
</div>
<script type="text/javascript">
var s1 = document.getElementsByClassName('s1')[0];
var s2 = document.getElementsByClassName('s2')[0];
var s3 = document.getElementsByClassName('s3')[0];
s1.addEventListener('click',function(){
alert('s1');
},false);
s2.addEventListener('click',function(){
alert('s2');
},true);
s3.addEventListener('click',function(){
alert('s3');
},false);
</script>
从运行的效果来看，点击 s3，依次 alert s2 => s3 => s1，说明：
捕获事件和冒泡事件同时存在的，而且捕获事件先执行，冒泡事件后执行；如果元素存在事件且事件的执行时间与当前逻辑一致(冒泡或捕获)，则执行。
8.默认事件取消与停止冒泡
当然，有时候我们只想执行最内层或最外层的事件，根据内外层关系来把范围更广的事件取消掉(对于新手来说，不取消冒泡，很容易中招的出现 bug)。event.stopPropagation()(IE 中window.event.cancelBubble = true)可以用来取消事件冒泡。有时候对于浏览器的默认事件也需要取消，这时候用到的函数则是 event.preventDefault()(IE 中window.event.returnValue = false)。
9.总结就补充两个兼容 IE 的函数吧：
function stopBubble(e) {
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
//阻止浏览器的默认行为
function stopDefault( e ) {
//阻止默认浏览器动作(W3C)
if ( e && e.preventDefault )
e.preventDefault();
//IE中阻止函数器默认动作的方式
else
window.event.returnValue = false;
return false;
}
以上：
网友评论