事件流的捕獲和冒泡 ---- 事件對象

瀏覽器最初開始支持事件時，同一個事件僅僅只有一個元素相應。後來認爲僅僅支持一個單一事件是不夠的，而IE4以後提出了事件流的概念，一個元素能夠支持多個事件。常見的事件流有捕捉型事件和冒泡型事件。

 

一、事件捕獲
捕獲型事件：事件從最不精確的對象(document 對象)開始觸發，而後到最精確(也能夠在窗口級別捕獲事件，不過必須由開發人員特別指定)

二、事件冒泡
冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。

爲了更好地體會，咱們如今寫一個demo，html 和 css 以下：

 

打開瀏覽器查看，效果以下：

接下來，我須要給它添加一些JS代碼：

var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");
var d3 = document.getElementById("d3");

d1.addEventListener("click",function(){
      this.style.background = "orange";
      console.log(111);
})
d2.addEventListener("click",function(){
      this.style.background = "green";
      console.log(222);
})
d3.addEventListener("click",function(){
      this.style.background = "blue";
      console.log(333);
})

如今，當咱們點擊最外層的圓d1時：

當咱們點擊中間的圓d2時：

當咱們點擊最裏面的圓d3時：

【現象】：

在d1中點擊時，打印結果爲：111

在d2中點擊時，打印結果爲：222，111

在d3中點擊時，打印順序是：333，222，111

 

【結論】： 事件的觸發順序自內向外，這就是事件冒泡。

 

這是由於，addEventListener("事件"，函數，Boolean)第三個參數默認值爲false，因此會有事件冒泡的發生。

true - 事件句柄在捕獲階段執行

false- 事件句柄在冒泡階段執行

 

this和e.target的異同

如今，咱們給剛剛的 圓形d1 添加兩行JS代碼:

而後咱們按順序分別點擊圓 d1, d2, d3 , 看一下 this 和 event.target 在控制檯上分別打印的結果：

【結論】：

js中事件是會冒泡的，因此this不必定是直接接受事件的目標DOM，

但event.target不會變化，它永遠是直接接受事件的目標DOM元素；