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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
vue ssr 指南详读
Jun 29 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 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
基于mysql的论坛(2)
2006/10/09 PHP
用mysql内存表来代替php session的类
2009/02/01 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
微信自定义分享php代码分析
2016/11/24 PHP
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
Python模拟登陆实现代码
2017/06/14 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
一套带答案的C++笔试题
2014/01/10 面试题
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
驾驶员岗位职责
2014/01/29 职场文书
代理人委托书
2014/08/01 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
关于使用Redisson订阅数问题
2022/01/18 Redis
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL