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 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
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读取csv实现csv文件下载功能
2013/12/18 PHP
10个简化PHP开发的工具
2014/12/25 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
Javascript 入门基础学习
2010/03/10 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
js style动态设置table高度
2014/10/21 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
jquery实现点击弹出对话框
2020/02/08 jQuery
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
python实现apahce网站日志分析示例
2014/04/02 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Python 高效编程技巧分享
2020/09/10 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
某公司面试题
2012/03/05 面试题
优秀部门获奖感言
2014/02/14 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
发展部经理职责规定
2014/02/22 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
python基于turtle绘制几何图形
2021/06/15 Python
MySQL数据库 任意ip连接方法
2022/05/20 MySQL
一文搞懂Java中的注解和反射
2022/06/21 Java/Android