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;
    }
};