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 相关文章推荐
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
简单的JS轮播图代码
Jul 18 Javascript
jQuery操作cookie
Aug 08 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 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验证是否是md5编码的简单代码
2014/04/01 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
详解ES6中的let命令
2020/04/05 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
python中p-value的实现方式
2019/12/16 Python
python主要用于哪些方向
2020/07/05 Python
python 下载文件的多种方法汇总
2020/11/17 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
大学生简历中个人的自我评价
2013/10/06 职场文书
支部鉴定材料
2014/06/02 职场文书
员工保密协议书
2014/09/27 职场文书
国情备忘录观后感
2015/06/04 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
思品教学工作总结
2015/08/10 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技