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 ES5标准中新增的Array方法
Jun 28 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
javascript 数组精简技巧小结
Feb 26 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 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
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
Prototype Array对象 学习
2009/07/19 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
在Python的web框架中配置app的教程
2015/04/30 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
Python玩转Excel的读写改实例
2019/02/22 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
wxPython实现文本框基础组件
2019/11/18 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
大学生学业生涯规划
2014/01/05 职场文书
给实习单位的感谢信
2014/02/01 职场文书
签约仪式主持词
2014/03/19 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
银行稽核岗位职责
2015/04/13 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏