js 冒泡事件與解決冒泡事件

事件冒泡 ：當一個元素接收到事件的時候 會把他接收到的事件傳給自己的父級，一直到window 。

html代碼：

<div id="div1">
  <div id="div2">
    <div id="div3">
    </div>
  </div>
</div>

<style>
    #div1{
      width: 300px;
      height: 200px;
      background-color: red;
    }
    #div2{
      width: 250px;
      height: 150px;
      background-color: green;
    }
    #div3{
      width: 200px;
      height: 100px;
      background-color: blue;
    }
  </style>

my$("div1").onclick=function () {
    console.log(this.id);
  };//div3 div2 div1

  my$("div2").onclick=function () {
    console.log(this.id);
  };//div2 div1

  my$("div3").onclick=function () {
    console.log(this.id);
  };//div1

代碼很簡單，就是三個父子關係的div,然後分別加了點擊事件，當我們在div3裡面點擊的時候，會發現彈出了一次3，接著又彈出了2，最後又彈出了1，這說明點擊的時候，不僅div3的事件被觸發了，它的父級div2 與div1的點擊事件也觸發了，這種現象就叫做冒泡。

取消事件冒泡有兩種方式：

1、標準的W3C 方式：e.stopPropagation(); 這裡的stopPropagation是標準的事件對象的一個方法，調用即可（谷歌和火狐支持,IE不支持）

my$("div3").onclick=function (e) {
    console.log(this.id);
    e.stopPropagation();
  };

2、非標準的IE方式:window.event.cancelBubble=true; 這裡的cancelBubble是 IE事件對象的屬性，設為true就可以了（IE特有的,谷歌支持,火狐不支持）

my$("div2").onclick=function () {
    console.log(this.id);
    window.event.cancelBubble=true;
  };

為了相容解決事件冒泡的方式：

function stopBubble(e) {
      //如果提供了事件對象，則這是一個非IE瀏覽器
      if (e && e.stopPropagation)
        //因此它支持W3C的stopPropagation()方法
        e.stopPropagation();
      else
        //否則，我們需要使用IE的方式來取消事件冒泡
        window.event.cancelBubble = true;
    }
    my$("div2").onclick = function (e) {
      console.log(this.id);
      stopBubble(e)
    };

    my$("div3").onclick = function (e) {
      console.log(this.id);
      stopBubble(e)
    };