JS 入門教程-16-addEventListener,removeEventListener,事件冒泡與事件捕獲
事件監聽
addEventListener
說明
新增事件監聽
語法
element.addEventListener(event, function, useCapture);第一個引數是事件的型別 (如 “click” 或 “mousedown”).
第二個引數是事件觸發後呼叫的函式。
第三個引數是個布林值用於描述事件是冒泡還是捕獲。該引數是可選的。
removeEventListener
說明
刪除事件監聽
語法
element.removeEventListener(event, function);使用例子
需要使用共用函式
相同事件繫結和解除，需要使用相同的函式
事件沒有 “on” 即 onclick 寫成 click
錯誤示範
document.body.addEventListener('click', function (event) {
event.preventDefault();
},false);
document.body.removeEventListener('click', function (event) {
event.preventDefault();
},false); 錯誤原因：二者呼叫傳入的方法實際是不同的。
正確示範
function clickFunc(event) {
event.preventDefault();
}
document.body.addEventListener('click',clickFunc,false);
document.body.removeEventListener('click',clickFunc,false); 事件冒泡或事件捕獲
事件冒泡
IE 的事件流叫做事件冒泡（event bubbling），即事件開始時由最具體的元素（文件中巢狀層次最深的那個節點）接收，然後逐級向上傳播到較為不具體的節點（文件）。以下面的HTML 頁面為例：
- demo.html
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>傳播方式
如果你單擊了頁面中的 <div> 元素，那麼這個click 事件會按照如下順序傳播：
(1) div
(2) body
(3) html
(4) document
如圖：
所有現代瀏覽器都支援事件冒泡，但在具體實現上還是有一些差別。
IE5.5 及更早版本中的事件冒泡會跳過 html 元素（從 body 直接跳到document）。
IE9、Firefox、Chrome 和Safari 則將事件一直冒泡到window 物件。
事件捕獲
Netscape Communicator 團隊提出的另一種事件流叫做事件捕獲（event capturing）。
事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點應該最後接收到事件。
事件捕獲的用意在於在事件到達預定目標之前捕獲它。
如果仍以前面的HTML 頁面作為演示事件捕獲的例子，那麼單擊<div>元素就會以下列順序觸發click 事件。
(1) document
(2) html
(3) body
(4) div
如圖：
雖然事件捕獲是Netscape Communicator 唯一支援的事件流模型，但IE9、Safari、Chrome、Opera和Firefox 目前也都支援這種事件流模型。
由於老版本的瀏覽器不支援，因此很少有人使用事件捕獲。我們也建議讀者放心地使用事件冒泡，在有特殊需要時再使用事件捕獲。