JavaScript Event学习第六章 事件的访问


Posted in Javascript onFebruary 07, 2010

现在我们已经注册了事件处理程序,对于事件我们还想更深入的了解。我们想知道事件发生时候的鼠标位置,我们想知道用户按下了哪些键。这些都是可能的,虽然这部分有很多烦人的浏览器兼容性问题。(这里可以快速查看浏览器兼容性列表)。
要读出事件的属性,必须要先能访问到事件。
浏览器兼容性
站在浏览器战争的角度看,Netscape实现了一个访问模型(后来被W3C做借鉴)和很多的事件属性,同时微软也做了同样的事情。当然这两种模型是完全不兼容的。但是就像我们再简介里面说的,如果

if (W3C/Netscape) { 
use W3C/Netscape model for access and property names 
} 
else if (Explorer) { 
use Microsoft model for access and property names 
}

这样是不正确的解决兼容性问题的办法,他会让一些能执行大部分代码但是没有考虑到的浏览器失去作用。所以我们得先访问一个事件然后再分别读取他的属性。
我们先来讨论访问事件的问题,事件属性会在后面讨论。
W3C/Netscape
在W3C/Netscape事件访问模型中事件会被当做一个参数传递给事件处理程序。所以如果你定义一个事件处理程序
element.onclick=doSomething;

doSomething()就会把事件当做一个参数。习惯上保存在一个e变量中,当然你可以改成任何名字:

function doSomething(e) { 
// e gives access to the event 
}

这是完全自动的,不需要其他的代码。在匿名函数中你可以这样写:
element.onclick = function (e) {alert('Event type is ' + e.type)}

微软
在微软的事件访问模型中有一个特别的属性window.event包含最后一个发生的事件。

element.onclick = doSomething; function doSomething() { 
// window.event gives access to the event 
}

或者
element.onclick = function () {alert('Event type is ' + window.event.type)}

Event和event
注意到还有一个古老的Netscape属性window.Event。IE不认识这个,Netscape 4也会曲解他。所以写的时候一定要确保event是小写e开头的。
跨浏览器的事件访问
很幸运的是要写跨浏览器访问事件的脚本还是很简单的:
element.onclick = doSomething; function doSomething(e) { 
if (!e) var e = window.event; 
// e gives access to the event in all browsers 
}

如果e不存在那么就给他赋值window.event。现在e在所有浏览器里面都表示事件。
与内联式的事件处理程序合并
在内联式的注册模型中,你必须把event传递给函数:
<pre onclick="doSomething(event)"> function doSomething(e) { 
alert(e.type); 
}

虽然在微软模型里(window.)event是正确的属性,其他浏览器也能识别。
继续
如果你想继续学习,请看下一章。
原文地址:http://www.quirksmode.org/js/events_access.html
第一次翻译 大家多包含 我的twitter:@rehawk
Javascript 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
node中的密码安全(加密)
Sep 17 Javascript
Array.filter中如何正确使用Async
Nov 04 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
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 #Javascript
You might like
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
基于php split()函数的用法详解
2013/06/05 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
parentElement,srcElement的使用小结
2014/01/13 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
简单讲解Python中的闭包
2015/08/11 Python
python放大图片和画方格实现算法
2018/03/30 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
python实现图片插入文字
2019/11/26 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
造价工程师个人求职信
2013/09/21 职场文书
机关门卫岗位职责
2013/12/30 职场文书
毕业设计说明书
2014/05/07 职场文书
搞笑车尾标语
2014/06/23 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
应聘教师自荐信
2015/03/26 职场文书
项目投资意向书范本
2015/05/09 职场文书
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript