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入门之对象与JSON详解
Oct 21 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
JavaScript网页定位详解
Jan 13 Javascript
JS 日期比较大小的简单实例
Jan 13 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
React服务端渲染(总结)
Jul 01 Javascript
vue中mint-ui的使用方法
Apr 04 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 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 中dirname(_file_)讲解
2007/03/18 PHP
PHP 编程安全性小结
2010/01/08 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
一段实时更新的时间代码
2006/07/07 Javascript
js 调整select 位置的函数
2008/02/21 Javascript
js cookies实现简单统计访问次数
2009/11/24 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
javascript闭包的理解
2015/04/01 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
python3中property使用方法详解
2019/04/23 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
django 模型中的计算字段实例
2020/05/19 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
公证书样本
2014/04/10 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
股份转让协议书范本
2015/01/27 职场文书
反腐倡廉观后感
2015/06/08 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书