事件冒泡的原理?如何禁止事件冒泡 ?

1.如何阻止事件冒泡？

function stopBubble(e){
    //如果提供了事件对象，则这是一个非 ie 浏览器
    if(e && e.stopPropagation){
        e.stopPropagation();
    }else{
        window.event.cancelBubble = true;
    }
    return false;
}

2.事件流

事件流描述的是从页面中接受事件的顺序,IE 的事件流是事件冒泡,而 Netscape Communicator 的事件流是事件捕获流。

事件冒泡：即事件开始时由最具体的元素，然后逐级向上传播到较为不具体的结点。（ie、ff、chrome、safari会将事件一直冒泡到 window 对象。）

事件捕获：事件捕获的思想是不太具体的结点应该更早接收到事件，而最具体的结点应该最后接受到事件。事件捕获的用意在于在事件达到预定目标之前捕获它。

要阻止特定事件的默认行为，可以使用 preventDefault()方法。例如，链接的默认行为就是在被单击时会导航到其 href 特性指定的 URL。如果你想阻止链接导航这一默认行为，那么通过链接的onclick 事件处理程序可以取消它：

var link = document.getElementById("myLink");
    link.onclick = function(event){
    event.preventDefault();
};

只有 cancelable 属性设置为 true 的事件，才可以使用 preventDefault()来取消其默认行为。

stopPropagation()方法用于立即停止事件在 DOM 层次中的传播，即取消进一步的事件捕获或冒泡。例如，直接添加一个按钮的事件处理给程序可以调用 stopPropagetion(),从而避免触发注册在 document.body 上面的事件处理程序：

var btn = document.getElementById("myBtn");
    btn.onclick = function(event){
    alert("Clicked");
    event.stopPropagation();
};
document.body.onclick = function(event){
    alert("Body clicked");
};

事件对象的 eventPhase 属性，可以用来确定事件当前正位于事件流的哪个阶段。如果是在捕获阶段调用的事件处理程序，其值为1；如果事件处理程序处于目标对象上，其值为2；如果是在冒泡阶段调用的事件处理程序，其值为3。这里要注意的是，尽管“处于目标”发生在冒泡阶段，但是 eventPhase 的值仍然一直等于2。

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert(event.eventPhase);//2
}

document.body.addEventListener("click",function(evnet){
    alert(event.eventPhase);//1
},true);

document.body.onclick = function(event){
    alert(event.eventPhase);//3
}

当单击这个例子中的按钮时，首先执行的事件处理程序是在捕获阶段触发的添加到 document.body 中的那一个，结果会弹出一个警告框表示 event.Phase 的值为1。接着，会触发在按钮上注册的事件处理程序，此时的 eventPhase 的值为2；最后一个被触发的事件处理程序，是在冒泡阶段执行的添加到 document.body 上的那一个，显示 eventPhase 的值为3。而当 eventPhase 的值为2时，this.target 和 currentTarget 的值始终都是相等的。

只有在事件处理程序执行期间，event 对象才会存在；一旦事件处理程序执行完成，event 对象就会被销毁。