資訊專欄INFORMATION COLUMN
摘要：隊(duì)列的實(shí)質(zhì)是數(shù)組。事件在默認(rèn)執(zhí)行的過程中是先捕獲后冒泡，第三個(gè)參數(shù)只是讓它在什么狀態(tài)下觸發(fā)。用方法，綁定的其他事件也將不會(huì)執(zhí)行。
DOM 0 知識(shí)點(diǎn)
//是對(duì)的
//是對(duì)的
HTML 中onclick = "要執(zhí)行的代碼"，一旦用戶點(diǎn)擊，瀏覽就eval("要執(zhí)行的代碼")，這里不是屬性，不是函數(shù)，是一段代碼。
JavaScript 中，一旦用戶點(diǎn)擊，瀏覽器就執(zhí)行X.onclick.call(X,{})，意思是onclick是一個(gè)函數(shù)屬性，而print是一個(gè)屬性，因?yàn)樗念愋褪菍?duì)象；但下面的print()的類型是undefined。
所以在HTML 中必須傳遞一個(gè)要執(zhí)行的代碼，JavaScript 中必須傳遞一個(gè)函數(shù)
那它們兩個(gè)的區(qū)別是啥呢？
xxx.onclick = function(){}只是一個(gè)屬性，所以它是唯一的，如果這時(shí)候你要綁定2個(gè)onclick事件就麻煩了。
xxx.addEventListener()它是一個(gè)隊(duì)列，先進(jìn)先出，就是說先綁定的先觸發(fā)。所以它叫做事件監(jiān)聽隊(duì)列，這里是排隊(duì)，xxx擁有一個(gè)隊(duì)列叫做eventlisteners，你不能直接訪問它，但你可以通過addEventListener去排個(gè)隊(duì)，如果用戶點(diǎn)擊了，就先觸發(fā)排在第一位的函數(shù)，排在后面的一次觸發(fā)。隊(duì)列的實(shí)質(zhì)是數(shù)組。既然有入隊(duì)，那是不是也有出隊(duì)：
function f1(){
console.log(1);
}
function f2(){
console.log(2);
}
function f1(){
console.log(3);
}
xxx.addEventListener("click",f1);
xxx.addEventListener("click",f2);
xxx.removeEventListener("click",f1);
xxx.addEventListener("click",f3);
xxx.removeEventListener("click",f3);
最后的結(jié)果就是打?。?。
f1 在排隊(duì)的過程中移除了，f3 剛進(jìn)入隊(duì)列就移除了。
前面寫輪播的時(shí)候用了one事件，它內(nèi)部是怎樣的呢？
function f1(){
console.log(1);
xxx.removeEventListener("click",f1);
}
xxx.addEventListener("click",f1);
one在函數(shù)處理時(shí)的最后一句加上離開隊(duì)列語句，on就是沒有出隊(duì)這句的，也就是說一直會(huì)執(zhí)行。
JS事件中的冒泡和捕獲捕獲事件：事件從最外層父元素到最里層子元素的順序觸發(fā)，叫做捕獲事件，果document > html > body > div > p > button
冒泡事件：正好和捕獲事件相反，事件從最里層子元素到最外層父元素的順序觸發(fā)，叫做冒泡事件，如：button > p > div > body > html > document
DOM 2 中規(guī)定了同時(shí)支持捕獲事件和冒泡事件，用addEventListener()方法綁定一個(gè)事件處理函數(shù)，其語法：
target.addEventListener(type, listener, useCapture);
type：表示監(jiān)聽事件類型的字符串，如clcik，前面沒有on
listener：表示監(jiān)聽的對(duì)象或者一個(gè)函數(shù)
useCapture：表示是否使用捕獲，接受一個(gè)布爾值，true是觸發(fā)捕獲事件，不寫默認(rèn)false觸發(fā)用冒泡事件。
事件在默認(rèn)執(zhí)行的過程中是先捕獲后冒泡，第三個(gè)參數(shù)只是讓它在什么狀態(tài)下觸發(fā)。如果一個(gè)節(jié)點(diǎn)捕獲和冒泡事件同時(shí)存在，誰在前誰先執(zhí)行，和事件無關(guān)。
s1s2
當(dāng)我點(diǎn)擊在s2上面，觸發(fā)順序是s1捕獲事件 > s2冒泡事件 > s2捕獲事件 > s1冒泡事件
事件代理：事件會(huì)在冒泡階段向上傳播到父節(jié)點(diǎn)，因此可以把子節(jié)點(diǎn)的監(jiān)聽函數(shù)定義在父節(jié)點(diǎn)上，由父節(jié)點(diǎn)的監(jiān)聽函數(shù)統(tǒng)一處理多個(gè)子元素的事件。這種方法叫做事件的代理（delegation）。
來看一個(gè)具體例子：獲取li里面的文本，用事件流方法
var ul = document.querySelector("ul");
ul.addEventListener("click",showColor,false);
function showColor(e){
var x = e.target;
if(x.nodeName.toLowerCase() === "li"){
console.log("The color is " + x.innerHTML);
}
}
如果不使用事件代理，要獲取li里面的文本應(yīng)該怎么弄呢？老方法是獲取到所有子元素li，遍歷它就可以了
