JavaScript Event学习第六章 事件的访问

现在我们已经注册了事件处理程序，对于事件我们还想更深入的了解。我们想知道事件发生时候的鼠标位置，我们想知道用户按下了哪些键。这些都是可能的，虽然这部分有很多烦人的浏览器兼容性问题。（这里可以快速查看浏览器兼容性列表）。
要读出事件的属性，必须要先能访问到事件。
浏览器兼容性
站在浏览器战争的角度看，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

赞 (0)

相关推荐

  • JavaScript Event学习第六章 事件的访问

    现在我们已经注册了事件处理程序,对于事件我们还想更深入的了解.我们想知道事件发生时候的鼠标位置,我们想知道用户按下了哪些键.这些都是可能的,虽然这部分有很多烦人的浏览器兼容性问题.(这里可以快速查看浏览器兼容性列表). 要读出事件的属性,必须要先能访问到事件. 浏览器兼容性 站在浏览器战争的角度看,Netscape实现了一个访问模型(后来被W3C做借鉴)和很多的事件属性,同时微软也做了同样的事情.当然这两种模型是完全不兼容的.但是就像我们再简介里面说的,如果 复制代码 代码如下: if (W3C

  • JavaScript Event学习第七章 事件属性

    当我们想去读一读关于Event的一些资料时,常常会湮没在大量的属性里面,这些属性其中的大多数不能良好的运行在大多数的浏览器.这里有event的兼容性列表. 我不打算给这些属性列个表,因为那些情况实在是太让人晕头了,而且对你的学习也不会有一点点的帮助.在写5段代码前我先要问关于浏览器的5个问题. 1.event的类型(type)是什么? 2.哪一个HTML元素是event的目标呢? 3.哪些键在event发生时被按下了? 4.哪个鼠标键在Event发生时被按下了? 5.在Event发生时鼠标的位置

  • JavaScript Event学习第四章 传统的事件注册模型

    在最古老的JavaScript浏览器里注册事件只能通过内联模式.自从DHTML从根本上改变了你操作页面的方法,事件的注册就必须有扩展性而且要有很强的适应性.所以就必须有相应的事件模型.Netscape在第三代浏览器中就开始了,IE在第四代浏览器开始. 因为Netscape 3就开始支持这种新的事件注册模型,在浏览器战争前就是事实上的标准.所以微软不得不也是最后一次为了网上那些数不清的使用了Netscape事件处理模型的页面在兼容性上做出了让步. 所以这两个浏览器,事实上也是所有的浏览器都支持下面

  • JavaScript Event学习第三章 早期的事件处理程序

    这些古老的浏览器只支持一种注册事件处理程序的方法,这个方法是Netscape发明的.因为Netscape先发制人,所以如果微软也想做支持JavaScript事件的浏览器就得跟着Netscape走,所以这里没有兼容性的问题.所以这种模式在任何支持JavaScript的浏览器都能运行---除了Mac上的IE3,他根本就不支持事件. 注册事件处理程序 在内联式的事件注册模型中,事件处理程序就像是一个HTML元素的属性,比如: <A HREF="somewhere.html" onCli

  • JavaScript Event学习第五章 高级事件注册模型

    W3C和微软都着力于发展自己的事件注册模型来取代Netscape的传统模型.虽然对于微软的模型我不是很感冒,但是w3c的还是不错的,除了这个鼠标定位 的问题.不过现在只有小部分浏览器支持. W3C W3C的DOM层面事件规范注意到了传统模式的问题.他对于你想在一个元素上绑定多个事件提供了一个很好的解决办法. W3C事件注册模型的关键就是addEventListener().你给他三个参数:事件类型,要执行的函数和一个布尔值(true或者false)我一会再解释.把我们熟知的doSomething

  • JavaScript Event学习第十一章 按键的检测

    JavaScript Event学习第十一章 按键的检测

    第一个问题是对于按键事件来说根本就没有标准,按照规范说的:包含键盘等输入设备的事件模型会在以后的DOM规范中作出解释. 正如我们了解到的,浏览器在最开始设计的时候并没有一个标准,大家都像做实验似的,最后的成品虽然是有用的,但是肯定造成了兼容性的问题.按键问题也不例外:这里有两个属性能检测到用户按下了什么键,虽然有足够的理由为什么需要两个属性,但是依然并不是所有的浏览器都支持. 另外,在keypress与keydown和keyup之间还有一些很重要的区别. 最后就是windows和mac的区别了,

  • JavaScript DOM学习第六章 表单实例

    表单实例 这是一个表单的实力.这里有一个小问题:因为我的服务器现在不支持,所以表单不能提交.我会打印出你的输入,然后返回一个false,这样表单就没有被提交. onSubmit的代码做了两件事情:检查你是否在四个文本框里面都填写了数据,然后把所有的元素都连接起来打印在下面的文本区域中. 原文中有实例,需要童鞋请移步,我就不搬过来了. 检测文本区域 这段代码会检测用户是否在文本框内输入了内容.他会忽略复选框和单选框,但是会总提醒用户选择select box,就算你选了,也会提醒,因为他的值总是nu

  • JavaScript Event学习第二章 Event浏览器兼容性

    在这里提出的事件,当他们发生在一个确定的HTML元素上的时候,他们的名字能够被大多数的浏览器所识别.也就是说,浏览器会查找你为这个HTML元素所注册的事件处理程序的脚本,而且会被立即执行.      一开始只有为数很少的一些事件.这些事件在几乎所有的JavaScript浏览器都能运行,即使是那些非常古老的.需要注意的是那些早期的事件只能工作在链接或者表单上,有时候也能运行在整个窗口上,但是其他的大多数HTML元素不行.      时代变迁,很多新的事件也给大家介绍过了.第四代浏览器和更高级的浏览

  • JavaScript Event学习第九章 鼠标事件

    先看看都有哪些鼠标事件:mousedown,mouseup_and_click,dblclick,mousemove和mouseover mouseout.然后还会解释一下relatedTarget,fromElement和toElement这些事件属性.最后是微软的mouseenter和mouseleave事件. 浏览器的兼容性问题,可以在浏览器兼容性列表查看. 例子 这里有一个例子.可以帮助理解下面的内容. mousedown,mouseup,click和dblclick在这个链接上注册.可

  • JavaScript Event学习第八章 事件的顺序

    基本问题很简单.假设你的一个元素包含在另外一个元素中. 复制代码 代码如下: ----------------------------------- | element1 | | ------------------------- | | |element2 | | | ------------------------- | ----------------------------------- 这两个元素都有onclick事件处理程序.如果用户在element2上面单击那么在元素2和元素1上都

随机推荐