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 相关文章推荐
Javascript的构造函数和constructor属性
Jan 09 Javascript
javascript最常用与实用的创建类的代码
Aug 12 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 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下10件你也许并不了解的事情
2008/09/11 PHP
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
Python Deque 模块使用详解
2014/07/04 Python
python数组过滤实现方法
2015/07/27 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
python使用thrift教程的方法示例
2019/03/21 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
工商管理应届生求职信
2013/10/07 职场文书
yy结婚证婚词
2014/01/10 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
经营理念口号
2014/06/21 职场文书
实习生工作证明范本
2014/09/14 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
Python中可变和不可变对象的深入讲解
2021/08/02 Python
Vue.Draggable实现交换位置
2022/04/07 Vue.js