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核心支持代码分享
May 23 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
vue elementUI批量上传文件
Apr 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生成短域名函数
2015/03/23 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
Python字符串处理实例详解
2017/05/18 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
python 编码规范整理
2018/05/05 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
文言文形式的学生求职信
2013/12/03 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
西门豹教学反思
2014/02/04 职场文书
副总经理岗位职责
2014/03/16 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
大学学生个人总结
2015/02/15 职场文书
入党介绍人意见2015
2015/06/01 职场文书
2016春节放假通知范文
2015/08/18 职场文书