JavaScript Event學習第七章：事件屬性

當我們想去讀一讀關于Event的一些資料時，常常會湮沒在大量的屬性里面，這些屬性其中的大多數不能良好的運行在大多數的瀏覽器。這里有event的兼容性列表。

我不打算給這些屬性列個表，因為那些情況實在是太讓人暈頭了，而且對你的學習也不會有一點點的幫助。在寫5段代碼前我先要問關于瀏覽器的5個問題。

1、event的類型（type）是什么？
2、哪一個HTML元素是event的目標呢？
3、哪些鍵在event發生時被按下了？
4、哪個鼠標鍵在Event發生時被按下了？
5、在Event發生時鼠標的位置在哪？

最后一個問題我在這里做了非常詳盡的解答。

請注意這些代碼我做了非常嚴謹的對象檢查。我首先創建跨瀏覽器的的對事件的訪問，然后在使用每一個屬性前都做了瀏覽器支持性的檢查。

1、event的類型（type）是什么？
這是一個跨瀏覽器的有標準答案的問題：使用type屬性就可以查看其屬性：

function doSomething(e) {<BR> if (!e) var e = window.event;<BR> alert(e.type);<BR>}<BR><BR>

2、哪一個HTML元素是event的目標呢？
W3C/Netscape說：target。不對，微軟說，是srcElement。這兩個屬性都返回event發生時的HTML元素。

function doSomething(e) {<BR> var targ;<BR> if (!e) var e = window.event;<BR> if (e.target) targ = e.target;<BR> else if (e.srcElement) targ = e.srcElement;<BR> if (targ.nodeType == 3) // defeat Safari bug<BR> targ = targ.parentNode;<BR>}<BR><BR>

最后兩行的代碼專門針對Safari的。如果event發生在一個包含文本(text)的元素上，這個文本節點(text node)而不是元素本身就成為了event的目標。因此我們要檢查如果目標的nodetype是3（文本節點）。如果是我們就把它移動到父節點上，HTML元素。

即使event被捕獲或者冒泡了(bubbles up)，target/srcElement屬性也依然是最早發生event的元素。

其他的target
還有很多targeting的屬性。我在Event Order這篇文章里討論了currentTarget，在Mouse event這篇文章里討論了relatedTarget,fromElement和toElement。

3、哪些鍵在event發生時被按下了？
這個問題相對簡單一些。首先從keyCode屬性得到該鍵的代碼(a=65)。當你得到了鍵值以后，你可以通過String.fromCharCode()方法知道實際的鍵值，如果必要的話。

function doSomething(e) {<BR> var code;<BR> if (!e) var e = window.event;<BR> if (e.keyCode) code = e.keyCode;<BR> else if (e.which) code = e.which;<BR> var character = String.fromCharCode(code);<BR> alert('Character was ' + character);<BR>}<BR>

這里有一些地方可能會造成鍵盤事件比較難用。比如，kepress事件觸發的時間和使用者按下鍵的時間一樣長。然而，大多數瀏覽器里面keydown的觸發時間也和按下的時間一樣長。我不確定這是不是一個好的想法，但是就是那樣的。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈