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 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
JS 的应用开发初探(mootools)
Dec 19 Javascript
Javascript高级技巧分享
Feb 25 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
node.js中的fs.fstatSync方法使用说明
Dec 15 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 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
PHP 判断变量类型实现代码
2009/10/23 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
php简单实现快速排序的方法
2015/04/04 PHP
Javascript的表单验证-提交表单
2016/03/18 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
深入了解Django View(视图系统)
2019/07/23 Python
python实现静态web服务器
2019/09/03 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
ORACLE十问
2015/04/20 面试题
北京某公司的.net笔试题
2014/03/20 面试题
大专生自我鉴定范文
2013/10/01 职场文书
化学学院毕业生自荐信范文
2013/12/17 职场文书
建筑结构施工求职信
2014/07/11 职场文书
上课说话检讨书500字
2014/11/01 职场文书
2014年德育工作总结
2014/11/20 职场文书
民事诉讼代理词
2015/05/25 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
Nginx跨域问题解析与解决
2022/08/05 Servers