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 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
JavaScript 预解析的4种实现方法解析
Sep 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教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
js实现div色块碰撞
2020/01/16 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
对Python发送带header的http请求方法详解
2019/01/02 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
python操作cfg配置文件方式
2019/12/22 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
有机童装:Toby Tiger
2018/05/23 全球购物
Ejb技术面试题
2015/04/29 面试题
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
我的中国梦演讲稿500字
2014/08/19 职场文书
政协委员个人总结
2015/03/03 职场文书
工地食品安全责任书
2015/05/09 职场文书
二年级数学教学反思
2016/02/16 职场文书
公开致歉信
2019/06/24 职场文书
python pygame入门教程
2021/06/01 Python
Python标准库之typing的用法(类型标注)
2021/06/02 Python
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL