JavaScript Event学习第七章 事件属性


Posted in Javascript onFebruary 07, 2010

当我们想去读一读关于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

Javascript 相关文章推荐
JavaScript获取XML数据附示例截图
Mar 05 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
Javascript实现简易天数计算器
May 18 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
uin-app+mockjs实现本地数据模拟
Aug 26 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 #Javascript
JavaScript Event学习第五章 高级事件注册模型
Feb 07 #Javascript
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 #Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 #Javascript
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 #Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 #Javascript
jQuery库与其他JS库冲突的解决办法
Feb 07 #Javascript
You might like
PHP 输出简单动态WAP页面
2009/06/09 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
浅谈php调用python文件
2019/03/29 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
自我评价怎么写正确呢?
2013/12/02 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js