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