爲了理解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>