JavaScript Event學(xué)習(xí)第七章 事件屬性
2024-05-06 14:11:35
供稿：網(wǎng)友
當(dāng)我們想去讀一讀關(guān)于Event的一些資料時(shí)，常常會(huì)湮沒在大量的屬性里面，這些屬性其中的大多數(shù)不能良好的運(yùn)行在大多數(shù)的瀏覽器。這里有event的兼容性列表。
我不打算給這些屬性列個(gè)表，因?yàn)槟切┣闆r實(shí)在是太讓人暈頭了，而且對(duì)你的學(xué)習(xí)也不會(huì)有一點(diǎn)點(diǎn)的幫助。在寫5段代碼前我先要問(wèn)關(guān)于瀏覽器的5個(gè)問(wèn)題。
1、event的類型（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的類型（type）是什么？
這是一個(gè)跨瀏覽器的有標(biāo)準(zhǔn)答案的問(wèn)題：使用type屬性就可以查看其屬性：
代碼如下:
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元素。
代碼如下:
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;
}
最后兩行的代碼專門針對(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í)際的鍵值，如果必要的話。
代碼如下:
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ì)造成鍵盤事件比較難用。比如，kepress事件觸發(fā)的時(shí)間和使用者按下鍵的時(shí)間一樣長(zhǎng)。然而，大多數(shù)瀏覽器里面keydown的觸發(fā)時(shí)間也和按下的時(shí)間一樣長(zhǎng)。我不確定這是不是一個(gè)好的想法，但是就是那樣的。
