JavaScript Event学习第七章：事件属性

当我们想去读一读关于Event的一些资料时，常常会湮没在大量的属性里面，这些属性其中的大多数不能良好的运行在大多数的浏览器。这里有event的兼容性列表。

我不打算给这些属性列个表，因为那些情况实在是太让人晕头了，而且对你的学习也不会有一点点的帮助。在写5段代码前我先要问关于浏览器的5个问题。

1、event的类型（type）是什么？
2、哪一个HTML元素是event的目标呢？
3、哪些键在event发生时被按下了？
4、哪个鼠标键在Event发生时被按下了？
5、在Event发生时鼠标的位置在哪？

最后一个问题我在这里做了非常详尽的解答。

请注意这些代码我做了非常严谨的对象检查。我首先创建跨浏览器的的对事件的访问，然后在使用每一个属性前都做了浏览器支持性的检查。

1、event的类型（type）是什么？
这是一个跨浏览器的有标准答案的问题：使用type属性就可以查看其属性：

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

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()方法知道实际的键值，如果必要的话。

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的触发时间也和按下的时间一样长。我不确定这是不是一个好的想法，但是就是那样的。

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠