JavaScript事件捕獲與事件冒泡

冒泡機制

氣泡從水底開始往上升，由深到淺，升到最上面。在上升的過程當中，氣泡會通過不一樣深度層次的水。相對應地：這個氣泡就至關於咱們這裏的事件，而水則至關於咱們的整個dom樹；事件從dom 樹的底層，層層往上傳遞，直至傳遞到dom的根節點。當子元素與父元素有相同的事件時，當子元素被觸發時父元素也會被觸發冒泡機制

在不一樣瀏覽器中，冒泡的程度不一樣：
IE 6.0:
div -> body -> html -> document
其餘瀏覽器:
div -> body -> html -> document -> window

注意：

並非全部的事件都能冒泡，如下事件不冒泡：blur、focus、load、unload

當子元素與父元素有相同的事件時，當子元素被觸發時父元素也會被觸發冒泡機制。冒泡事件，以下代碼：

HTML

<div id="father">
    <button id="btn">點擊</button>
</div>

CSS

father{ width: 300px; height: 300px; background-color: red; margin: auto; }

JS

window.onload = function () {
        var father = document.getElementById("father");
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            alert("點擊了按鈕");
        };
        father.onclick = function () {
            alert("點擊了父標籤");
        };
        document.onclick = function () {
            alert("點擊了文檔");
        }
    }

效果圖

在點擊按鈕和紅色區域的時候，事件會一層層的向上傳遞，這個並非咱們想要的效果，那該如何阻止事件冒泡呢？

阻止冒泡的方法

標準瀏覽器 和 ie瀏覽器
w3c：event.stopPropagation() proPagation
IE：event.cancelBubble = true

兼容的寫法
if(event && event.stopPropagation){ // w3c標準
event.stopPropagation();
}else{ // IE系列 IE 678
event.cancelBubble = true;
}

阻止冒泡後

JS

window.onload = function () {
  var father = document.getElementById("father");
  var btn = document.getElementById("btn");

   btn.onclick = function () {
      if(event && event.stopPropagation){ // w3c標準 阻止冒泡機制
           event.stopPropagation();
      }else{ // IE系列 IE 678
          event.cancelBubble = true;
           }
      alert("點擊了按鈕");
    };
   father.onclick = function () {
      if(event && event.stopPropagation){ // w3c標準 阻止冒泡機制
           event.stopPropagation();
       }else{ // IE系列 IE 678
           event.cancelBubble = true;
           }
      alert("點擊了父標籤");
   };
  document.onclick = function () {
      alert("點擊了文檔");
    }
 }

須要在那個地方阻止冒泡事件，就在其中添加阻止冒泡的方法；
能夠將阻止冒泡的方法封裝爲一個函數須要的時候直接調用便可。