阻止事件冒泡現象

首先來解釋一下啥是事件冒泡現象

事件冒泡：

多個元素嵌套，有層次關係，這些元素都註冊了相同的事件，如果裡面的元素的出發了事件，外面的元素該事件也觸發

在這裡有必要強調一下  相同的事件  不一定完全相同  即   都是 點擊事件  或者 都是 滑鼠移入事件

來個例子

<div class="at1" id = "1">
        <div class="at2" id = "2">
            <div class="at3" id = "3"></div>
        </div>
</div>

先寫出來這三個div的結構

再給他們寫好樣式

 1  .at1 {
 2             width: 300px;
 3             height: 300px;
 4             background-color: red;
 5         }
 6         .at2 {
 7             width: 200px;
 8             height: 200px;
 9             background-color: yellow;
10         }
11         .at3 {
12             width: 100px;
13             height: 100px;
14             background-color: pink;
15         }

即他們應該是如圖所示的結構

然後我們為這三個註冊點擊事件

1 my$("1").onclick = function () {
2         this.style.backgroundColor = "white";
3     }
4     my$("2").onclick = function () {
5         this.style.backgroundColor = "white";
6     }
7     my$("3").onclick = function () {
8         this.style.backgroundColor = "white";
9     }

然後這時候冒泡事件的表現呢  就是這樣

你點擊黃色的div那麼黃色和紅色 都會背景顏色變白   即：黃色的事件觸發 使得事件冒泡 導致紅色div事件觸發

你點擊粉色的div 那麼所有的div都會背景顏色變白   即：粉色的事件觸發使得事件冒泡 導致黃色div事件觸發 繼而導致紅色div觸發

我們該如何阻止事件冒泡呢?

首先我來說一下事件處理參數對象

這個對象呢  在事件處理的函數中可以驗證一下它的存在

你測完會發現  谷歌火狐都有這個事件處理參數對象    而 IE8是undefined  所以呢是ie 8 是不支持的

my$("3").onclick = function () {
        this.style.backgroundColor = "white";
　　　　加一行代碼 就能驗證  consolo.log(arguments.lenth);
    }
如果你點了div3  那麼控制台就會有一個  1 列印出來  說明這個事件處理參數對象是真實存在的

第一種瀏覽器  火狐瀏覽器中的阻止事件冒泡 當然這個谷歌也支持
 阻止事件冒泡 是利用這個事件處理參數對象來進行的

我們要利用 所以就把參數傳進來

代碼如下

my$("3").onclick = function (e) {
   this.style.backgroundColor = "white";
　　e.stopPropagation();
}

第二種瀏覽器  ie瀏覽器種的阻止事件冒泡 當然這個谷歌也支持

代碼如下

my$("3").onclick = function () {
      this.style.backgroundColor = "white";
　　　　window.event.cancelBubble = true;
}

所以這個代碼會牽扯到相容的問題 我們最後把兩種封裝成一個相容代碼即可