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实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
javascript常用的方法整理
Aug 20 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
vuex 的简单使用
Mar 22 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 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
德生1994机评
2021/03/02 无线电
php adodb连接mssql解决乱码问题
2009/06/12 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
dedecms中使用php语句指南
2014/11/13 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
Python脚本按照当前日期创建多级目录
2019/03/01 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
用C语言实现文件读写操作
2013/10/27 面试题
元旦寄语大全
2014/04/10 职场文书
房地产推广策划方案
2014/05/19 职场文书
关爱老人标语
2014/06/21 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
go语言中http超时引发的事故解决
2021/06/02 Golang
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫