addEventListener詳解和文檔_JavaScript基礎知識

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> addEventListener詳解和文檔

addEventListener詳解和文檔

編輯：JavaScript基礎知識

addEventListener－開始

前面零散地寫了些關於 addEventListener 的內容，覺得比較散，有些地方可能也說得不夠清楚明白，所以決定以連載的形式從頭到尾再寫一篇。

addEventListener 用於注冊事件處理程序，IE 中為 attachEvent，我們為什麼講 addEventListener 而不講 attachEvent 呢？一來 attachEvent 比較簡單，二來 addEventListener 才是 DOM 中的標准內容。

簡介

addEventListener 為文檔節點、document、window 或 XMLHttpRequest 注冊事件處理程序，在以前我們一般是 <input type="button" onclick="..."，或 document.getElementById("testButton").onclick = FuncName，而在 DOM 中，我們用 addEventListener（IE 中用 attachEvent）。

語法

target.addEventListener(type, listener, useCapture);

target 文檔節點、document、window 或 XMLHttpRequest。
type 字符串，事件名稱，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener 實現了 EventListener 接口或者是 JavaScript 中的函數。
useCapture 是否使用捕捉，看了後面的事件流一節後就明白了，一般用 false。

示例

function Go()
{
//...
}

document.getElementById("testButton").addEventListener("click", Go, false);

或者 listener 直接就是函數

document.getElementById("testButton").addEventListener("click", function () { ... }, false);

addEventListener－事件流

說到 addEventListener 不得不說到事件流，先說事件流對後面的解釋比較方便。

當一個事件發生時，分為三個階段：

捕獲階段從根節點開始順序而下，檢測每個節點是否注冊了事件處理程序。如果注冊了事件處理程序，並且 useCapture 為 true，則調用該事件處理程序。（IE 中無此階段。）

目標階段觸發在目標對象本身注冊的事件處理程序，也稱正常事件派發階段。

冒泡階段從目標節點到根節點，檢測每個節點是否注冊了事件處理程序，如果注冊了事件處理程序，並且 useCapture 為 false，則調用該事件處理程序。

舉例

如果在 d3 上點擊鼠標，事件流是這樣的：

捕獲階段在 div1 處檢測是否有 useCapture 為 true 的事件處理程序，若有，則執行該程序，然後再同樣地處理 div2。

目標階段在 div3 處，發現 div3 就是鼠標點擊的節點，所以這裡為目標階段，若有事件處理程序，則執行該程序，這裡不論 useCapture 為 true 還是 false。

冒泡階段在 div2 處檢測是否有 useCapture 為 false 的事件處理程序，若有，則執行該程序，然後再同樣地處理 div1。

注意，上述捕獲階段和冒泡階段中，實際上 div1 之上還應該有結點，比如有 body，但這裡不討論。

addEventListener－第三個參數 useCapture

addEventListener 有三個參數：第一個參數表示事件名稱（不含 on，如 "click"）；第二個參數表示要接收事件處理的函數；第三個參數為 useCapture，本文就講解它。

<div id="outDiv">
<div id="middleDiv">
<div id="inDiv">請在此點擊鼠標。</div>
</div>
</div>

<div id="info"></div>

上述是我們測試的代碼，根據 info 的顯示來確定觸發的順序，有三個 addEventListener，而 useCapture 可選值為 true 和 false，所以 2*2*2，可以得出 8 段不同的程序。

全為 false 時，觸發順序為：inDiv、middleDiv、outDiv；
全為 true 時，觸發順序為：outDiv、middleDiv、inDiv；
outDiv 為 true，其他為 false 時，觸發順序為：outDiv、inDiv、middleDiv；
middleDiv 為 true，其他為 false 時，觸發順序為：middleDiv、inDiv、outDiv；
……

最終得出如下結論：

true 的觸發順序總是在 false 之前；
如果多個均為 true，則外層的觸發先於內層；
如果多個均為 false，則內層的觸發先於外層。

下面提供全部代碼，您可以更改其中的 true、false 值，來進行測試。注意，不適用於 IE。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>useCapture</title>
<style type="text/css">
#outDiv
{
padding:10px 10px 10px 10px;
border:1px solid red;
}

#middleDiv
{
padding:10px 10px 10px 10px;
border:1px solid green;
}

#inDiv
{
padding:10px 10px 10px 10px;
border:1px solid blue;
}
</style>
</head>

<body>

<div id="outDiv">
<div id="middleDiv">
<div id="inDiv">請在此點擊鼠標。</div>
</div>
</div>

</body>

</html>

addEventListener－event 對象的屬性和方法

事件觸發時，會將一個 Event 對象傳遞給事件處理程序，比如：

document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

事件類型

DOM 事件類型是分為 UIEvent、UIEvent:KeyEvent、UIEvent:MouseEvent，不同的事件有不同的屬性和方法，但常用的來說我們都不會用錯，比如我們不會在鼠標事件中去取鍵盤值（Ctrl、Alt、Shift 除外），所以我們沒有必要深究。

該對象的屬性和方法有：

view 只讀，對象，發生事件的 Window 對象。

type 只讀，字符串。比如鼠標點擊事件的類型：click。

eventPhase 只讀，數字，事件流正經歷的階段。1－捕獲，2－目標，3－冒泡。

target 只讀，對象，派發事件的目標對象。比如鼠標是點擊在哪個按鈕上的。

currentTarget 只讀，對象，當前正在調用監聽器的對象，也就是當前 addEventListener 是綁定在哪個對象上的。

timeStamp 只讀，數字，用毫秒表示事件發生時距計算機開機的時間。

cancelable 只讀，布爾，處理事件的默認行為是否可以停止。主要針對一些系統事件，如果值為 true，則 event 的 preventDefault 方法可以使用，否則不可用。

preventDefault() 阻止浏覽器的默認行為，比如在文本框中打字觸發 keydown，如果 keydown 事件處理程序中調用了 preventDefault()，所打的字就不會跑到文本框中去，注意，此時不要彈出 alert 對話框，否則可能不起作用。IE 中在事件處理程序中用 return false 實現類似功能。

bubbles 只讀，布爾，事件是否開啟冒泡功能。

stopImmediatePropagation 這個東西在 JavaScript 中是個屬性，而不是方法，布爾，但具體測試並未發現其用途，不知是不是 bug。

stopPropagation() 停止當前的事件流傳播，但不會停止當前正在處理的對象。IE 中用 event.cancelBubble = true 實現類似功能。

cancelBubble 布爾，是否取消冒泡，不建議使用，用 stopPropagation() 代替。

preventBubble() 阻止冒泡，不建議使用，用 stopPropagation() 代替。

preventCapture() 阻止捕獲，不建議使用，用 stopPropagation() 代替。

detail 只讀，數字，提供時間的額外信息，對於 click 事件、mousedown 事件和 mouseup 事件，這個字段代表點擊的次數。

isChar 只讀，布爾，按下的按鍵值是否是字符，比如按下 Ctrl 鍵時，就返回 false。不過您在 Firefox 中測試時，該值總是 false，Firefox 官方已經說明這是一個 bug。

altKey 只讀，布爾，是否按下了 Alt 鍵。

ctrlKey 只讀，布爾，是否按下了 Ctrl 鍵。

shiftKey 只讀，布爾，是否按下了 Shift 鍵。

metaKey 只讀，布爾，是否按下了 Meta 鍵。

下面一些屬性很有意思，請仔細區別。

charCode 只讀，數字，字符（英文、數字、符號）的 Unicode 值。

只用於 keypress。

keyCode 只讀，數字，鍵盤按鍵值。

用於 keypress 時：返回非字符按鍵值（除 Ctrl、Shift、Alt、Caps Lock、單行文本框中按向上鍵等）；
用於 keydown、keyup 時：返回任意鍵值。

button 只讀，數字，鼠標按鍵值。

用於 click 時：0－左鍵。
用於 mousedown、mouseup 時：0－左鍵，1－中間鍵（滾輪），2－右鍵。

which 只讀，數字，鍵盤按鍵值或鼠標按鍵值。

用於 keypress 時：等同於 charCode + 回退鍵 + 回車鍵；
用於 keydown、keyup 時：返回任意鍵值；
用於 click 時：1－左鍵，與 button 的值略有區別。
用於 mousedown、mouseup 時：1－左鍵，2－中間鍵（滾輪），3－右鍵，與 button 的值略有區別。

可以看出，which 只有一點沒有包括：那就是 keypress 時，不如 keyCode 那麼全，但實際上，keypress 事件中用於非字符鍵的情況較少，所以一般還是用 which 代替全部。

addEventListener－有用的筆記

為什麼用 addEventListener

可以對同一物件的同一事件綁定多個事件處理程序。
可以通過事件流三個階段更好地控制何時觸發事件處理程序。
工作於 DOM 元素，而不僅是 HTML 元素。

事件分發時添加 eventListener

不會立即觸發 eventListener，可能會在下一個事件流（比如冒泡階段）中觸發。

多個相同的 eventListener

如下，三個參數完全相同，並且第二個參數不是匿名函數。

document.getElementById("myBox").addEventListener("click", Go, false);
document.getElementById("myBox").addEventListener("click", Go, false);
document.getElementById("myBox").addEventListener("click", Go, false);

會拋棄多余的，只保留一個，對應的 removeEventListener 也只用一次就可以了（removeEventListener 用法和 addEventListener 完全相同）。

但如果是第二個參數是匿名函數，比如：

則三個均有效，並且無法用 removeEventListener 除去。

this

事件處理程序中，this 變成了觸發事件的控件，但我們仍推薦用 event.target 或 event.currentTarget。

早期的事件監聽

在 DOM0 中，我們用 obj.onclick = FuncName，由於兼容性好，應用非常廣泛，只是功能不如 addEventListener 強大。

內存問題

前面提到了許多使用域名函數的地方，有時這是沒辦法的，請參見在各浏覽器中動態添加事件－參數篇，但這會導致內存問題。

一旦事件綁定之後，該綁定代碼作用域的變量就都保留下來，不會被 JavaScript 引擎回收，這可能會引起占用大量內存的問題，由於 removeEventListener 無法刪除匿名函數的事件處理程序，只有在物件（比如按鈕）去除之後，該內存才可能得到回收。