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

為了理解Event屬性，我將在這裡給出一些範例程式碼。在這個範疇內有非常嚴重的瀏覽器安全色性問題。

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

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

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

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

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

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

1 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元素。

1 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()方法知道實際的索引值，如果必要的話。

1 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的觸發時間也和按下的時間一樣長。我不確定這是不是一個好的想法，但是就是那樣的。

4、哪個滑鼠鍵在Event發生時被按下了？
這裡有兩個屬性可以知道哪個滑鼠鍵被按下了：which和button。請注意這些屬性通常不一定在click上起作用。為了保險的探測哪個滑鼠鍵被按下，你最好使用mousedown和mouseup事件。

which是一個古老的Netscape屬性。滑鼠左鍵的值是1，中鍵（滾輪）的值是2，右鍵的值是3。除了支援上比較薄弱以外沒有什麼問題，事實上也經常用來檢測滑鼠按鍵。

現在button屬效能被很好的識別。W3C的標準值如下：

左鍵 0 
中鍵 1 
右鍵 2 
微軟的標準值如下：

左鍵 1 
中鍵 4 
右鍵 2 
毫無疑問的微軟的標準比W3C的好。0可以表示沒有鍵按下，其他都是不合理的。

另外，只有在微軟的模型中按鍵的值是可以合并使用的，比如5就代表“左鍵和中鍵”一起按下。不僅IE6不支援合并，w3c的的模型在理論上也是不能完成的：你永遠也不知道左鍵是不是被按下了。

所以在我看來w3c在定義button上有嚴重的失誤。

右擊
幸運的是，通常你想知道右鍵是否被點擊。因為W3C和微軟恰好在這個問題上給button的定義值是2，所以你依然可以檢測右擊。

1 function doSomething(e) {<BR>    var rightclick;<BR>    if (!e) var e = window.event;<BR>    if (e.which) rightclick = (e.which == 3);<BR>    else if (e.button) rightclick = (e.button == 2);<BR>    alert('Rightclick: ' + rightclick); // true or false<BR>}<BR>

需要注意的是，Macs通常只有一個鍵，Mozilla給Ctrl-Click的button的值定義為2，所以Ctrl-Click也會開啟菜單。ICab 還不支援滑鼠button屬性，所以你在Opera裡面還不能檢測右擊。

5、在Event發生時滑鼠的位置在哪？
滑鼠位置這個問題相當的嚴峻。雖然有不少於6對滑鼠座標的屬性，但是仍然沒有一個可靠的跨瀏覽器的方法能找到滑鼠的座標。
下面是這6組座標：
1、clientX,clientY
2、layerX,layerY
3、offsetX,offsetY
4、pageX,pageY
5、screenX,screenY
6、x,y
我曾經在這裡解釋過pageX/Y和clientX/Y的問題。

screenX和screenY是唯一一對跨瀏覽器安全色的屬性。他們給出滑鼠在整個電腦螢幕上的座標。不幸的是，僅僅這個資訊是遠遠不夠的：你永遠也不需要知道滑鼠在螢幕的位置--好吧，或者你想在當前的滑鼠位置放置一個新的視窗。

其他的三對屬性也不重要，看這裡的描述。

正確的代碼
下面的代碼能夠正確的檢測滑鼠的座標

1 function doSomething(e) {<BR>    var posx = 0;<BR>    var posy = 0;<BR>    if (!e) var e = window.event;<BR>    if (e.pageX || e.pageY)     {<BR>        posx = e.pageX;<BR>        posy = e.pageY;<BR>    }<BR>    else if (e.clientX || e.clientY)     {<BR>       
posx = e.clientX + document.body.scrollLeft<BR>            + document.documentElement.scrollLeft;<BR>        posy = e.clientY + document.body.scrollTop<BR>            + document.documentElement.scrollTop;<BR>    }<BR>    // posx and posy contain the mouse
position relative to the document<BR>    // Do something with this information<BR>}<BR>