正文
js事件冒泡原理及处理
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
事件从根节点开始，逐级派送到子节点，若节点绑定了事件动作，则执行动作，然后继续走，这个阶段称为“捕获阶段(Capture)”；
执行完捕获阶段后，事件由子节点往根节点派送，若节点绑定了事件动作，则执行动作，然后继续走，这个阶段称为“冒泡阶段(Bubble)”
由于这两派浏览器的差异，其绑定的方法也不一样，其中
1、遵循标准的浏览器使用W3C定义的addEventListener函数绑定，函数定义如下：
function addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])
eventFlag : 事件名称，如click、mouseover…
eventFunc: 绑定到事件中执行的动作
useCapture: 指定是否绑定在捕获阶段，true为是，false为否，默认为true
在事件监听流中可以使用event.stopPropagation()来阻止事件继续往下流
2、IE中使用自有的attachEvent函数绑定时间，函数定义如下：
function attachEvent(string eventFlag, function eventFunc)
eventFlag: 事件名称，但要加上on，如onclick、onmouseover…
eventFunc: 绑定到事件中执行的动作
在事件监听流中可以使用window.event.cacenlBubble=true来阻止事件继续往下流
总结：addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])，针对ff，chrome，safari浏览器，false指冒泡阶段，默认为true，指捕获阶段。不过一般我们 都用false。
attachEvent(string eventFlag, function eventFunc)，针对ie系列、还有opera浏览器，少了事件处理机制的参数，只指定事件类型（别忘了on）和触发哪个函数。
有了这些认知之后，有了大致的思路，对应的代码：
if(document.addEventListener){
document.addEventListener('click', hideBox, false);
在document绑定信息框（竖的那个）隐藏函数（即随便点html页面的哪里关闭展开的信息框，这也是使用document.addEventListener的原因，要帮在文档上）
document.getElementById('status_hide').addEventListener('click', showBox, false);
在status_hide节点绑定信息框展开(详细的那个)函数并停止事件流（即点击竖的这个，展开详细的那个）
document.getElementById('status_show').addEventListener('click', stopEvent, false);
因为false确定的是事件冒泡，为了防止点详情的时候，向上冒泡到document，触发document设置的click时hidebox方法，在status_show我们要绑定阻止事件流函数。
}
这个明白了，针对ie再写个attachEvent的就可以了，当然ie的参数只用2个就可以了，它的时间处理机制就是冒泡不用额外设置。
现在用的源生的较少了，jquery比较多了，但是jquery是默认允许冒泡的，但是也没有参数来阻止冒泡的，所有我们需要自己手动进行冒泡阻止：
方法1：
$('.show').bind('click',function(e){
if(e.stopPropagation){
e.stopPropagation();
}
else{
e.cancelBubble = true;
}
});
方法2：
$('.show').bind('click',function(){
//处理逻辑
return false;
});
//注意：这种方法会阻止后面的所有浏览器的默认动作，如a标签会阻止跳转动作。
最后是一个阻止冒泡的函数，视情况使用：
var stopEvent = function(event){
e = event || window.event;
if(e.stopPropagation){
e.stopPropagation();
}
else {
e.cancelBubble = true;
}
};
