event properties

网上看到一篇文章《event properties》，讲的是一些关于javascript事件的处理，感觉写的很好，对工作和学习很有帮助，所以就花了一点时间给翻译了一下，希望能给其他网友能带来帮助。
原文：
    http://www.quirksmode.org/js/events_properties.html
译文：
    这篇文章中我列出了一些读取event属性示例脚本。目前在这方面浏览器存在着非常严重的不兼容。
    当我们想读取event相关的信息时， 都会被event中的大量属性所迷惑，而且大部分在很多浏览器中都不被支持。快速浏览http://www.quirksmode.org/js/events_compinfo.html或者W3C DOM Compatibility - Events，了解一下。
    我不打算按照字母顺序列出所有属性，这可能对你没有一点帮助。相反，我写了5段脚本，针对解决向浏览器提出的这5个问题。
   

   
• 事件的类型是什么？
   
•  在哪个HTML元素上产生了事件？
   
•  事件触发期间，哪个键被按下？
   
•  事件触发期间，鼠标那个按键被按下？
   
•  事件触发期间，鼠标的位置?
   

    在最后一问题中，我非常详尽地回答了Evolt很久前在自己文章中提出的一个问题。
（http://evolt.org/article/Mission_Impossible_mouse_position/17/23335/index.html）
注意:这些脚本都经过我非常严格的检查。这是我第一编写跨浏览器的 event处理，所以在使用前我都查过每一个属性这个浏览器是否支持。

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

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

在哪个HTML元素上产生了事件？
    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始终指的是产生事件的那个元素。
其他target
    这还有其他target属性，我在《event order》（）一文中讨论的currentTarget，
还有在《Mouse events》（）一文中讨论的relatedTarget、fromElement、toElement。

哪个键被按下了？
    这个相对容易些。首先从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事件，我不认为这不是一个好主意，但不过事实上就是这样的。

鼠标那个键被按下了？
    这里有两个可以查明那个鼠标按键被按下的属性：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标准时，犯了严重的错误。

鼠标右键按下：
    你常常最想知道的是右键是不是被按下，很幸运，因为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
}

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

鼠标位置
    至于鼠标位置，情况有些可怕。虽然有不少于六种鼠标位置属性对，但是却找不到跨浏览器取得我们所需要的文档的鼠标位置。
    这是那六对属性，也可以在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 的描述。

正确的脚本：
这是正确检查鼠标位置的脚本。

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
}

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