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 相关文章推荐
jquery select操作的日期联动实现代码
Dec 06 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
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
PHP 获取文件权限函数介绍
2013/07/11 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
python求素数示例分享
2014/02/16 Python
Python实现的检测网站挂马程序
2014/11/30 Python
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
django数据库自动重连的方法实例
2019/07/21 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
Python类反射机制使用实例解析
2019/12/30 Python
Python list运算操作代码实例解析
2020/01/20 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
什么是python的id函数
2020/06/11 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
移动通信行业实习自我鉴定
2013/09/28 职场文书
生产副总岗位职责
2013/11/28 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
大学老师推荐信
2014/02/25 职场文书
初级党校心得体会
2014/09/11 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript