事件流
從頁面中接受事件的順序。
DOM2級流包含三個階段
- 事件捕獲
- 處于事件目標
- 事件冒泡
1，事件冒泡：
即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節點）接收，然后逐級向上傳播到較為不具體的節點（文檔）。
冒泡是向上的
比如點擊div1
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="div1">Click Me</div>
</body>
</html>
如果你點擊了頁面中的<div>元素，那么這個 click 事件會按照如下順序傳播：
- <div>
- <body>
- <html>
- document
也就是說，click 事件首先在 <div> 元素上發生，而這個元素就是我們單擊的元素。然后，click 事件沿 DOM 樹向上傳播，在每一級節點上都會發生，直至傳播到 document 對象。下圖展示了事件冒泡的過程。
image
2，事件捕獲：
與事件冒泡正好相反
從最不具體的節點到最具體的元素依次觸發某個事件。
DOM1級事件處理程序
比如
btn.onclick=function(){
alert(1);
}
btn.onclick=function(){
alert(2);
}
//只會alert(2)，這是DOM 1級 后面的會覆蓋前面的
刪除DOM1級的事件處理程序。需要用到null
btn.onclick=null
將事件處理程序設置為 null 之后，再單擊按鈕將不會有任何動作發生。
DOM2級事件模型
處理指定和刪除事件處理程序的操作：
addEventListener() 和 removeEventListener()
都接受三個參數
要處理的事件名、作為事件處理程序的函數和一個布爾值。最后這個布爾值參數如果是 true，表示在捕獲階段調用事件處理程序；如果是 false，表示在冒泡階段調用事件處理程序。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
console.log(this.id);
}, false);
通過DOM2，可以給某個元素添加多個相同的事件。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
console.log(this.id);
}, false);
btn.addEventListener("click", function(){
console.log("Hello world!");
}, false);
會依次觸發，打印是id和Hello world
好處：為同一個元素添加多個事件處理程序。
移出事件removeEventListener()
注意：通過 addEventListener() 添加的匿名函數將無法移除，如下面的例子所示。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
console.log(this.id);
}, false);
btn.removeEventListener("click", function(){ // 沒有用！
console.log(this.id);
}, false);
看似會刪除掉事件，但是第二個參數是不一樣的。fn!=fn
那如何才能移出事件呢？
方法：將第二個參數改寫為有名函數
var btn = document.getElementById("myBtn");
var fn1 = function(){
console.log(this.id);
};
btn.addEventListener("click",fn1, false);
btn.removeEventListener("click", fn1, false); // 有效！
這樣三個參數就是一致的了，可以有效移出事件
