JavaScript Event學習第七章事件屬性

2019-11-21 00:45:42

字體：大中小

來源：轉載

供稿：網友

當我們想去讀一讀關于Event的一些資料時，常常會湮沒在大量的屬性里面，這些屬性其中的大多數不能良好的運行在大多數的瀏覽器。這里有event的兼容性列表。
我不打算給這些屬性列個表，因為那些情況實在是太讓人暈頭了，而且對你的學習也不會有一點點的幫助。在寫5段代碼前我先要問關于瀏覽器的5個問題。
1、event的類型（type）是什么？
2、哪一個HTML元素是event的目標呢？
3、哪些鍵在event發生時被按下了？
4、哪個鼠標鍵在Event發生時被按下了？
5、在Event發生時鼠標的位置在哪？
最后一個問題我在這里做了非常詳盡的解答。
請注意這些代碼我做了非常嚴謹的對象檢查。我首先創建跨瀏覽器的的對事件的訪問，然后在使用每一個屬性前都做了瀏覽器支持性的檢查。

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

最后兩行的代碼專門針對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) { 
var code; 
if (!e) var e = window.event; 
if (e.keyCode) code = e.keyCode; 
else if (e.which) code = e.which; 
var character = String.fromCharCode(code); 
alert('Character was ' + character); 
} 

這里有一些地方可能會造成鍵盤事件比較難用。比如，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，所以你依然可以檢測右擊。

復制代碼代碼如下:

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

需要注意的是，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是唯一一對跨瀏覽器兼容的屬性。他們給出鼠標在整個電腦屏幕上的坐標。不幸的是，僅僅這個信息是遠遠不夠的：你永遠也不需要知道鼠標在屏幕的位置--好吧，或者你想在當前的鼠標位置放置一個新的窗口。
其他的三對屬性也不重要，看這里的描述。
正確的代碼
下面的代碼能夠正確的檢測鼠標的坐標

復制代碼代碼如下:

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