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 相关文章推荐
读jQuery之十 事件模块概述
Jun 27 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
基于原生js实现九宫格算法代码实例
Jul 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
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
python抓取文件夹的所有文件
2018/02/27 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
python不同系统中打开方法
2020/06/23 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
年终奖发放方案
2014/06/02 职场文书
大专学生求职自荐信
2014/07/06 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js