事件觸發時,會將一個 Event 對象傳遞給事件處理程序,比如:
1 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 值。
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 代替全部。