久久网国产,亚洲综合中文字幕在线一区

類(lèi)型：加殼脫殼大�。�126KB語(yǔ)言：中文評(píng)分：3.5
標(biāo)簽：

立即下載

為了理解Event屬性，我將在這里給出一些示例代碼。在這個(gè)范疇內(nèi)有非常嚴(yán)重的瀏覽器兼容性問(wèn)題。

當(dāng)我們想去讀一讀關(guān)于Event的一些資料時(shí)，常常會(huì)湮沒(méi)在大量的屬性里面，這些屬性其中的大多數(shù)不能良好的運(yùn)行在大多數(shù)的瀏覽器。這里有event的兼容性列表。

我不打算給這些屬性列個(gè)表，因?yàn)槟切┣闆r實(shí)在是太讓人暈頭了，而且對(duì)你的學(xué)習(xí)也不會(huì)有一點(diǎn)點(diǎn)的幫助。在寫(xiě)5段代碼前我先要問(wèn)關(guān)于瀏覽器的5個(gè)問(wèn)題。

1、event的類(lèi)型（type）是什么？
2、哪一個(gè)HTML元素是event的目標(biāo)呢？
3、哪些鍵在event發(fā)生時(shí)被按下了？
4、哪個(gè)鼠標(biāo)鍵在Event發(fā)生時(shí)被按下了？
5、在Event發(fā)生時(shí)鼠標(biāo)的位置在哪？

最后一個(gè)問(wèn)題我在這里做了非常詳盡的解答。

請(qǐng)注意這些代碼我做了非常嚴(yán)謹(jǐn)?shù)膶?duì)象檢查。我首先創(chuàng)建跨瀏覽器的的對(duì)事件的訪問(wèn)，然后在使用每一個(gè)屬性前都做了瀏覽器支持性的檢查。

1、event的類(lèi)型（type）是什么？
這是一個(gè)跨瀏覽器的有標(biāo)準(zhǔn)答案的問(wèn)題：使用type屬性就可以查看其屬性：

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

2、哪一個(gè)HTML元素是event的目標(biāo)呢？
W3C/Netscape說(shuō)：target。不對(duì)，微軟說(shuō)，是srcElement。這兩個(gè)屬性都返回event發(fā)生時(shí)的HTML元素。

1 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; }

最后兩行的代碼專(zhuān)門(mén)針對(duì)Safari的。如果event發(fā)生在一個(gè)包含文本(text)的元素上，這個(gè)文本節(jié)點(diǎn)(text node)而不是元素本身就成為了event的目標(biāo)。因此我們要檢查如果目標(biāo)的nodetype是3（文本節(jié)點(diǎn)）。如果是我們就把它移動(dòng)到父節(jié)點(diǎn)上，HTML元素。

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

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

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

1 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); }

這里有一些地方可能會(huì)造成鍵盤(pán)事件比較難用。比如，kepress事件觸發(fā)的時(shí)間和使用者按下鍵的時(shí)間一樣長(zhǎng)。然而，大多數(shù)瀏覽器里面keydown的觸發(fā)時(shí)間也和按下的時(shí)間一樣長(zhǎng)。我不確定這是不是一個(gè)好的想法，但是就是那樣的。

4、哪個(gè)鼠標(biāo)鍵在Event發(fā)生時(shí)被按下了？
這里有兩個(gè)屬性可以知道哪個(gè)鼠標(biāo)鍵被按下了：which和button。請(qǐng)注意這些屬性通常不一定在click上起作用。為了保險(xiǎn)的探測(cè)哪個(gè)鼠標(biāo)鍵被按下，你最好使用mousedown和mouseup事件。

which是一個(gè)古老的Netscape屬性。鼠標(biāo)左鍵的值是1，中鍵（滾輪）的值是2，右鍵的值是3。除了支持上比較薄弱以外沒(méi)有什么問(wèn)題，事實(shí)上也經(jīng)常用來(lái)檢測(cè)鼠標(biāo)按鍵。

現(xiàn)在button屬性能被很好的識(shí)別。W3C的標(biāo)準(zhǔn)值如下：

左鍵 0
中鍵 1
右鍵 2
微軟的標(biāo)準(zhǔn)值如下：

左鍵 1
中鍵 4
右鍵 2
毫無(wú)疑問(wèn)的微軟的標(biāo)準(zhǔn)比W3C的好。0可以表示沒(méi)有鍵按下，其他都是不合理的。

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

所以在我看來(lái)w3c在定義button上有嚴(yán)重的失誤。

右擊
幸運(yùn)的是，通常你想知道右鍵是否被點(diǎn)擊。因?yàn)閃3C和微軟恰好在這個(gè)問(wèn)題上給button的定義值是2，所以你依然可以檢測(cè)右擊。

1 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通常只有一個(gè)鍵，Mozilla給Ctrl-Click的button的值定義為2，所以Ctrl-Click也會(huì)打開(kāi)菜單。ICab 還不支持鼠標(biāo)button屬性，所以你在Opera里面還不能檢測(cè)右擊。

5、在Event發(fā)生時(shí)鼠標(biāo)的位置在哪？
鼠標(biāo)位置這個(gè)問(wèn)題相當(dāng)?shù)膰?yán)峻。雖然有不少于6對(duì)鼠標(biāo)坐標(biāo)的屬性，但是仍然沒(méi)有一個(gè)可靠的跨瀏覽器的方法能找到鼠標(biāo)的坐標(biāo)。
下面是這6組坐標(biāo)：
1、clientX,clientY
2、layerX,layerY
3、offsetX,offsetY
4、pageX,pageY
5、screenX,screenY
6、x,y
我曾經(jīng)在這里解釋過(guò)pageX/Y和clientX/Y的問(wèn)題。

screenX和screenY是唯一一對(duì)跨瀏覽器兼容的屬性。他們給出鼠標(biāo)在整個(gè)電腦屏幕上的坐標(biāo)。不幸的是，僅僅這個(gè)信息是遠(yuǎn)遠(yuǎn)不夠的：你永遠(yuǎn)也不需要知道鼠標(biāo)在屏幕的位置--好吧，或者你想在當(dāng)前的鼠標(biāo)位置放置一個(gè)新的窗口。

其他的三對(duì)屬性也不重要，看這里的描述。

正確的代碼
下面的代碼能夠正確的檢測(cè)鼠標(biāo)的坐標(biāo)

1 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 }