event properties

网上看到一篇文章《event properties》，讲的是一些关于javascript事件的处理，感觉写的很好，对工作和学习很有帮助，所以就花了一点时间给翻译了一下，希望能给其他网友能带来帮助。
[b]原文：[/b]
[url]http://www.quirksmode.org/js/events_properties.html[/url]
[b]译文：[/b]
这篇文章中我列出了一些读取event属性示例脚本。目前在这方面浏览器存在着非常严重的不兼容。
当我们想读取event相关的信息时， 都会被event中的大量属性所迷惑，而且大部分在很多浏览器中都不被支持。快速浏览[url]http://www.quirksmode.org/js/events_compinfo.html[/url]或者W3C DOM Compatibility - Events，了解一下。
我不打算按照字母顺序列出所有属性，这可能对你没有一点帮助。相反，我写了5段脚本，针对解决向浏览器提出的这5个问题。
[list]
[*] 事件的类型是什么？
[*] 在哪个HTML元素上产生了事件？
[*] 事件触发期间，哪个键被按下？
[*] 事件触发期间，鼠标那个按键被按下？
[*] 事件触发期间，鼠标的位置?
[/list]
在最后一问题中，我非常详尽地回答了Evolt很久前在自己文章中提出的一个问题。
（[url]http://evolt.org/article/Mission_Impossible_mouse_position/17/23335/index.html[/url]）
[color=red][b]注意:[/b]这些脚本都经过我非常严格的检查。这是我第一编写跨浏览器的 event处理，所以在使用前我都查过每一个属性这个浏览器是否支持。[/color]

[b]事件的类型是什么？[/b]
这是唯一有真正意义上的跨浏览器答案的问题：使用type属性读取event属性：

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

[b]在哪个HTML元素上产生了事件？[/b]
W3C/Netscape使用：target，微软使用：srcElement。这两个属性都能返回产生
事件的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。如果产生时间的那个元素当中包含文本，那么返回的是这个文本节点，而不是这个元素本身。因此，我们检查target的nodeType属性是否为3（文本节点），如果是，我们就返回其父节点。
即使事件被劫持或者不做处理，target或者 srcElement始终指的是产生事件的那个元素。
[size=x-small][B]其他target[/B][/size]
这还有其他target属性，我在《event order》（）一文中讨论的currentTarget，
还有在《Mouse events》（）一文中讨论的relatedTarget、fromElement、toElement。

[B]哪个键被按下了？[/B]
这个相对容易些。首先从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);
}

这块有些细微之处使得按键事件很难被使用。例如，只要用户按下键，就会触发一个keypress事件，然而，绝大多数浏览器中，当按下键后同时也会产生一个Keydown事件，我不认为这不是一个好主意，但不过事实上就是这样的。

[B]鼠标那个键被按下了？[/B]
这里有两个可以查明那个鼠标按键被按下的属性：which和button。注意:这些属性不仅仅伴随着一个click事件。安全起见，在检查鼠标按键时你不得不使用mousedown、Mouseup事件。
which是Netscape的一个老属性，其中左键的值为1，中间按按钮（鼠标滚轮）的值为2，
右键的值为3。
现在，button还没有达成一致。W3C给出的标准是：
     *左键- 0
     *中键- 1
     *右键- 2

微软的标准是：
      *左键- 1
     *中键- 4
     *右键- 2
毫无疑问，微软的标准要优于W3C，0意味着没有任何键被按下，要是其它的就不符合逻辑。
此外，微软的button标准还支持值相加，比如5就意味着“左键和中键”。这IE6中也支持这个，不过W3C给出的标准理论上不能做加法，也就是说你永远也不知道是不是左键也被按下了。
以我看来，W3C在制定button标准时，犯了严重的错误。

[size=x-small][B]鼠标右键按下：[/B][/size]
你常常最想知道的是右键是不是被按下，很幸运，因为W3C和微软在这一点上达成了一致，给出button值都是2，这样你仍旧可以检测出右键按下。

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

[color=red][B]注意：[/B]苹果电脑鼠标只有一个按键，Mozilla基金会提供了Ctrl-Click对应的值为2，因为Ctrl–Click也能打开提示菜单。iCab不支持鼠标button属性，因此今天也不能在Opera中检测鼠标右键。[/color]

[B]鼠标位置[/B]
至于鼠标位置，情况有些可怕。虽然有不少于六种鼠标位置属性对，但是却找不到跨浏览器取得我们所需要的文档的鼠标位置。
这是那六对属性，也可以在Event compatibility tables 或者W3C DOMCompatibility - Events页查看。
1.clientX,clientY
2.layerX,layerY
3.offsetX,offsetY
4.pageX,pageY
5.screenX,screenY
6.x,y

我解释一下这个问题，在过时Evolt article的文章中有使用过W3C的pageX/Y和clientX/Y。screenX和screenY属性是唯一的完全跨浏览器兼容。他们给鼠标的位置相对于用户的整个电脑屏幕。可惜，这是完全无用的信息：你永远不需要知道相对屏幕鼠标的位置，也许你有些时候想把另外一个窗口移动鼠标的位置。
其他三个属性对不重要。参见 W3C DOM Compatibility - Events 的描述。
[size=x-small]
[B]正确的脚本：[/B][/size]
[size=x-small]这是正确检查鼠标位置的脚本。[/size]

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
}

[B]继续[/B]
还想顺序浏览其他关于事件的文章，进入《event order》[url]http://www.quirksmode.org/js/events_order.html[/url]