摘要：所有節(jié)點(diǎn)中都包含這兩個(gè)方法，并且它們都接收個(gè)參數(shù)要處理的事件名作為事件處理程序的函數(shù)和一個(gè)布爾值。當(dāng)這個(gè)布爾值為時(shí)，表示在捕獲階段調(diào)用事件處理程序若果是，表示在冒泡階段調(diào)用事件處理程序。

定義：
 1.事件流描述的是從頁面中接收事件的順序,也可理解為事件在頁面中傳播的順序。
 2.事件就是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作。諸如click(點(diǎn)擊)、load(加載)、mouseover(鼠標(biāo)懸停)。
 3.事件處理程序響應(yīng)某個(gè)事件的函數(shù)就叫事件處理程序(或事件偵聽器)。

下面所示例子注冊(cè)事件的方式均使用DOM2級(jí)事件定義的事件處理程序進(jìn)行注冊(cè)，兼容性的問題不涉及。"DOM2級(jí)事件"定義了兩個(gè)方法，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()。所有DOM節(jié)點(diǎn)中都包含這兩個(gè)方法，并且它們都接收3個(gè)參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個(gè)布爾值。當(dāng)這個(gè)布爾值為true時(shí)，表示在捕獲階段調(diào)用事件處理程序；若果是false，表示在冒泡階段調(diào)用事件處理程序。

示例1

html

css

#wrap {
  width: 200px;
  height: 200px;
  background: orange;
}
#outer {
  position: relative;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: #eeddff;
}
#inner {
  position: relative;
  top: 25px;
  left:25px;
  width: 50px;
  height: 50px;
  background: #44ddff;
}

js

var wrap = document.getElementById("wrap");
wrap.addEventListener("click",function(){
  alert("789");
},false);

output

問題1:容器元素wrap注冊(cè)了事件，那么此事件的作用范圍是什么？

思考1:根據(jù)上面例子，當(dāng)點(diǎn)擊橘色塊中(包括被子元素覆蓋的部分)任何一部分時(shí)，都會(huì)彈出789，點(diǎn)擊橘色塊外面的部分并沒有任何反應(yīng)，那么我們是不是就可以得出這這樣結(jié)論，元素注冊(cè)事件的作用范圍為元素自身在頁面中所占的空間大小，但是真的就是這樣嗎？下面我們做個(gè)試驗(yàn)

試驗(yàn)1:
css代碼修改如下,其他部分同上

#wrap {
  width: 200px;
  height: 200px;
  background: orange;
}
#outer {
  position: relative;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: #eeddff;
}
/*inner中的top被修改*/
#inner {
  position: relative;
  top: 152px;
  left:25px;
  width: 50px;
  height: 50px;
  background: #44ddff;
}

output

結(jié)論1：當(dāng)點(diǎn)擊橘色塊外淺藍(lán)色部分的時(shí)候,同樣的也彈出了789,而淺藍(lán)色部分是嵌套在wrap元素之內(nèi)的元素,故可得出結(jié)論,當(dāng)元素注冊(cè)了事件,此事件的作用范圍為:1.元素自己所占頁面空間部分加嵌套元素所占空間范圍(若嵌套元素覆蓋在容器元素上，則事件的作用范圍為容器元素自身所占空間大小)

問題2：根據(jù)上面的示例1，那么這里大家可以再思考一個(gè)問題，若容器元素wrap以及其嵌套元素outer，inner都注冊(cè)了click事件，根據(jù)試驗(yàn)1得出的結(jié)論，那么嵌套在最里層的元素inner所占頁面的空間范圍內(nèi)，一共有3個(gè)click事件都作用在其上，那么當(dāng)在inner元素的作用范圍內(nèi)點(diǎn)擊頁面時(shí)，3個(gè)事件的事件處理程序執(zhí)行的順序又是如何的？

要解決上面我提出的問題2,這就涉及到了兩種處理事件流的不同的機(jī)制，事件冒泡和事件捕獲

IE的事件流叫事件冒泡，即事件開始時(shí)由最具體的元素(文檔中嵌套層次最深的節(jié)點(diǎn))接收，然后逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)。

示例2
將參數(shù)設(shè)為false，讓元素在冒泡階段調(diào)用事件處理程序

css,html代碼同示例1
js

var wrap = document.getElementById("wrap");
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");

wrap.addEventListener("click",function(){
  alert("789");
},false);
outer.addEventListener("click",function(){
  alert("456");
},false);
inner.addEventListener("click",function(){
  alert("123");
},false);

結(jié)論2:在冒泡階段調(diào)用事件處理程序，上面問題的結(jié)果是這樣的：當(dāng)點(diǎn)擊頁面中心淺藍(lán)色的部分時(shí)，先是彈出123，接著彈出456，最后彈出789。因此當(dāng)容器元素及其嵌套元素都在冒泡階段調(diào)用事件處理程序時(shí)：事件按事件冒泡的順序執(zhí)行事件處理程序。

Netscape團(tuán)隊(duì)提出的另一種事件流叫事件捕獲，事件捕獲的思想是不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件，而最具體的節(jié)點(diǎn)應(yīng)該最后接收到事件。

示例3
將參數(shù)設(shè)為true，讓元素在捕獲階段調(diào)用事件處理程序

css,html代碼同示例1
js

var wrap = document.getElementById("wrap");
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
    
wrap.addEventListener("click",function(){
  alert("wrap");
},true);
outer.addEventListener("click",function(){
  alert("outer");
},true);
inner.addEventListener("click",function(){
  alert("inner");
},true);

結(jié)論3:在捕獲階段調(diào)用事件處理程序，上面問題的結(jié)果是這樣的：當(dāng)點(diǎn)擊頁面中心淺藍(lán)色的部分時(shí)，先是彈出wrap，接著彈出outer，最后彈出inner。因此當(dāng)容器元素及其嵌套元素都在捕獲階段調(diào)用事件處理程序時(shí)：事件按事件捕獲的順序執(zhí)行事件處理程序。

問題3:根據(jù)思考1，思考2得出的結(jié)果，接著又有一個(gè)問題我認(rèn)為需要思考，當(dāng)同一個(gè)元素即在冒泡階段注冊(cè)了事件，又在捕獲階段注冊(cè)了同一事件，那么當(dāng)事件被觸發(fā)時(shí)，事件的執(zhí)行順序又會(huì)是如何的？

要解決上面我提出的問題3,這就涉及到了DOM事件流

“DOM2級(jí)事件”規(guī)定的事件流包括三個(gè)階段：事件捕獲階段==>處于目標(biāo)階段==>事件冒泡階段。首先發(fā)生的是事件捕獲階段，為截獲事件提供了機(jī)會(huì)。然后是實(shí)際的目標(biāo)接收事件。最后一個(gè)階段是冒泡階段，以下圖片來自w3c

示例4
css,html代碼同示例1
js

var wrap = document.getElementById("wrap");
var outet = document.getElementById("outer");
var inner = document.getElementById("inner");

wrap.addEventListener("click",function(){
  alert("789");
},false);
outer.addEventListener("click",function(){
  alert("456");
},false);
inner.addEventListener("click",function(){
  alert("123");
},false);
wrap.addEventListener("click",function(){
  alert("wrap");
},true);
outer.addEventListener("click",function(){
  alert("outer");
},true);
inner.addEventListener("click",function(){
  alert("inner");
},true);

結(jié)論4:當(dāng)點(diǎn)擊頁面中心淺藍(lán)色部分的時(shí)候，先從最不具體的節(jié)點(diǎn)捕獲事件，先彈出wrap,接著彈出outer。接著處于目標(biāo)階段，先彈出123，再?gòu)棾鰅nner。緊接著，事件處于冒泡階段，先彈出456，再?gòu)棾?89。因此我們可以得出結(jié)論，當(dāng)容器元素及嵌套元素，即在捕獲階段又在冒泡階段調(diào)用事件處理程序時(shí)：事件按DOM事件流的順序執(zhí)行事件處理程序，且當(dāng)事件處于目標(biāo)階段時(shí)，事件調(diào)用順序決定于綁定事件的書寫順序，按上面的例子為，先調(diào)用冒泡階段的事件處理程序，再調(diào)用捕獲階段的事件處理程序。具體demo可看評(píng)論，@ Levon