JavaScript Event学习第七章 事件属性
更新时间：2010年02月07日 10:44:38 作者：
为了理解Event属性，我将在这里给出一些示例代码。在这个范畴内有非常严重的浏览器兼容性问题。
当我们想去读一读关于Event的一些资料时，常常会湮没在大量的属性里面，这些属性其中的大多数不能良好的运行在大多数的浏览器。这里有event的兼容性列表。
我不打算给这些属性列个表，因为那些情况实在是太让人晕头了，而且对你的学习也不会有一点点的帮助。在写5段代码前我先要问关于浏览器的5个问题。
1、event的类型（type）是什么？
2、哪一个HTML元素是event的目标呢？
3、哪些键在event发生时被按下了？
4、哪个鼠标键在Event发生时被按下了？
5、在Event发生时鼠标的位置在哪？
最后一个问题我在这里做了非常详尽的解答。
请注意这些代码我做了非常严谨的对象检查。我首先创建跨浏览器的的对事件的访问，然后在使用每一个属性前都做了浏览器支持性的检查。
1、event的类型（type）是什么？
这是一个跨浏览器的有标准答案的问题：使用type属性就可以查看其属性：
function doSomething(e) {
if (!e) var e = window.event;
alert(e.type);
}
2、哪一个HTML元素是event的目标呢？
W3C/Netscape说：target。不对，微软说，是srcElement。这两个属性都返回event发生时的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的。如果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) {
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);
}
这里有一些地方可能会造成键盘事件比较难用。比如，kepress事件触发的时间和使用者按下键的时间一样长。然而，大多数浏览器里面keydown的触发时间也和按下的时间一样长。我不确定这是不是一个好的想法，但是就是那样的。
4、哪个鼠标键在Event发生时被按下了？
这里有两个属性可以知道哪个鼠标键被按下了：which和button。请注意这些属性通常不一定在click上起作用。为了保险的探测哪个鼠标键被按下，你最好使用mousedown和mouseup事件。
which是一个古老的Netscape属性。鼠标左键的值是1，中键（滚轮）的值是2，右键的值是3。除了支持上比较薄弱以外没有什么问题，事实上也经常用来检测鼠标按键。
现在button属性能被很好的识别。W3C的标准值如下：
左键 0
中键 1
右键 2
微软的标准值如下：
左键 1
中键 4
右键 2
毫无疑问的微软的标准比W3C的好。0可以表示没有键按下，其他都是不合理的。
另外，只有在微软的模型中按键的值是可以合并使用的，比如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 == 3);
else if (e.button) rightclick = (e.button == 2);
alert('Rightclick: ' + rightclick); // true or false
}
需要注意的是，Macs通常只有一个键，Mozilla给Ctrl-Click的button的值定义为2，所以Ctrl-Click也会打开菜单。ICab 还不支持鼠标button属性，所以你在Opera里面还不能检测右击。
5、在Event发生时鼠标的位置在哪？
鼠标位置这个问题相当的严峻。虽然有不少于6对鼠标坐标的属性，但是仍然没有一个可靠的跨浏览器的方法能找到鼠标的坐标。
下面是这6组坐标：
1、clientX,clientY
2、layerX,layerY
3、offsetX,offsetY
4、pageX,pageY
5、screenX,screenY
6、x,y
我曾经在这里解释过pageX/Y和clientX/Y的问题。
screenX和screenY是唯一一对跨浏览器兼容的属性。他们给出鼠标在整个电脑屏幕上的坐标。不幸的是，仅仅这个信息是远远不够的：你永远也不需要知道鼠标在屏幕的位置--好吧，或者你想在当前的鼠标位置放置一个新的窗口。
其他的三对属性也不重要，看这里的描述。
正确的代码
下面的代码能够正确的检测鼠标的坐标
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
}
原文在这里：http://www.quirksmode.org/js/events_properties.html
大家多指教 我的twitter：@rehawk
我不打算给这些属性列个表，因为那些情况实在是太让人晕头了，而且对你的学习也不会有一点点的帮助。在写5段代码前我先要问关于浏览器的5个问题。
1、event的类型（type）是什么？
2、哪一个HTML元素是event的目标呢？
3、哪些键在event发生时被按下了？
4、哪个鼠标键在Event发生时被按下了？
5、在Event发生时鼠标的位置在哪？
最后一个问题我在这里做了非常详尽的解答。
请注意这些代码我做了非常严谨的对象检查。我首先创建跨浏览器的的对事件的访问，然后在使用每一个属性前都做了浏览器支持性的检查。
1、event的类型（type）是什么？
这是一个跨浏览器的有标准答案的问题：使用type属性就可以查看其属性：
复制代码 代码如下:
function doSomething(e) {
if (!e) var e = window.event;
alert(e.type);
}
2、哪一个HTML元素是event的目标呢？
W3C/Netscape说：target。不对，微软说，是srcElement。这两个属性都返回event发生时的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的。如果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) {
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);
}
这里有一些地方可能会造成键盘事件比较难用。比如，kepress事件触发的时间和使用者按下键的时间一样长。然而，大多数浏览器里面keydown的触发时间也和按下的时间一样长。我不确定这是不是一个好的想法，但是就是那样的。
4、哪个鼠标键在Event发生时被按下了？
这里有两个属性可以知道哪个鼠标键被按下了：which和button。请注意这些属性通常不一定在click上起作用。为了保险的探测哪个鼠标键被按下，你最好使用mousedown和mouseup事件。
which是一个古老的Netscape属性。鼠标左键的值是1，中键（滚轮）的值是2，右键的值是3。除了支持上比较薄弱以外没有什么问题，事实上也经常用来检测鼠标按键。
现在button属性能被很好的识别。W3C的标准值如下：
左键 0
中键 1
右键 2
微软的标准值如下：
左键 1
中键 4
右键 2
毫无疑问的微软的标准比W3C的好。0可以表示没有键按下，其他都是不合理的。
另外，只有在微软的模型中按键的值是可以合并使用的，比如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 == 3);
else if (e.button) rightclick = (e.button == 2);
alert('Rightclick: ' + rightclick); // true or false
}
需要注意的是，Macs通常只有一个键，Mozilla给Ctrl-Click的button的值定义为2，所以Ctrl-Click也会打开菜单。ICab 还不支持鼠标button属性，所以你在Opera里面还不能检测右击。
5、在Event发生时鼠标的位置在哪？
鼠标位置这个问题相当的严峻。虽然有不少于6对鼠标坐标的属性，但是仍然没有一个可靠的跨浏览器的方法能找到鼠标的坐标。
下面是这6组坐标：
1、clientX,clientY
2、layerX,layerY
3、offsetX,offsetY
4、pageX,pageY
5、screenX,screenY
6、x,y
我曾经在这里解释过pageX/Y和clientX/Y的问题。
screenX和screenY是唯一一对跨浏览器兼容的属性。他们给出鼠标在整个电脑屏幕上的坐标。不幸的是，仅仅这个信息是远远不够的：你永远也不需要知道鼠标在屏幕的位置--好吧，或者你想在当前的鼠标位置放置一个新的窗口。
其他的三对属性也不重要，看这里的描述。
正确的代码
下面的代码能够正确的检测鼠标的坐标
复制代码 代码如下:
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
}
原文在这里：http://www.quirksmode.org/js/events_properties.html
大家多指教 我的twitter：@rehawk
您可能感兴趣的文章:
- javascript attachEvent绑定多个事件执行顺序问题
- Javascript中的window.event.keyCode使用介绍
- myEvent.js javascript跨浏览器事件框架
- javascript开发随笔一 preventDefault的必要
- javascript中window.event事件用法详解
- JavaScript事件处理器中的event参数使用介绍
- Javascript中Event属性搜集整理
- javascript Event对象详解及使用示例
- Event altKey,ctrlKey,shiftKey属性解析
- 21个JavaScript事件(Events)属性汇总
- javascript中的altKey 和 Event属性大全
相关文章
类型强制Coercion是将值从一种类型转换为另一种类型的过程（例如字符串转换为数字,对象转换为布尔值等）,下面这篇文章主要给大家给大家介绍了JavaScript中类型的强制转换与隐式转换的相关资料,需要的朋友可以参考下2021-08-08
JavaScript trim 实现去除字符串首尾指定字符的简单方法
下面小编就为大家带来一篇JavaScript trim 实现去除字符串首尾指定字符的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
这篇文章主要介绍了JS仿Base.js实现的继承,结合具体实例形式分析了javascript扩展操作及面向对象程序设计相关实现技巧,需要的朋友可以参考下2017-04-04
任何一种编程语言的简写小技巧都是为了帮助你写出更简洁、更完善的代码,让你用更少的编码实现你的需求,这篇文章主要给大家介绍了关于javascript代码简写的几种常用方式,需要的朋友可以参考下2021-08-08
这篇文章主要为大家详细介绍一下微信小程序实现页面导航的几种方法以及帮助大家掌握如何使用页面之间的导航跳转，感兴趣的可以了解一下2022-07-07
这篇文章主要介绍了JavaScript电子时钟倒计时的实现代码，具有一定的参考价值，感兴趣的朋友可以参考一下2016-01-01
下面小编就为大家带来一篇JS正则替换掉小括号及内容的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要介绍了js获取当前日期时间及其它日期操作汇总，感兴趣的小伙伴们可以参考一下2016-03-03
本篇文章主要介绍了webpack中的热刷新与热加载的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
可以让你编辑浏览器中看到网页可编辑的实现代码。2009-10-10
最新评论