会员中心
用户名:    密码:    验证码:      免费注册会员

jquery手册   CSS2手册       请关注健康

CSSer > 客户端开发 > web标准与前台开发 > javascript的事件模型

来源: 作者: 发布时间:2007-03-09
雅虎收藏夹 百度收藏 Google书签 Yahoo书签 新浪ViVi 搜狐网摘 365Key网摘 天极网摘 diglog 和讯网摘 POCO网摘 YouNote网摘 博拉网 天下图摘 Del.icio.us digg reddit spurl BlinkList blogmarks

javascript给web带来了丰富多彩的交互行为,在一系列交互行为的背后,有两个特性给予了javascript强大的支持,一是DOM文档对象模型,通过它javascript有可能对网页的内容进行修改,从而达到动态的效果;另外一个就是javascript的事件处理模型,可以这么说,事件模型是一切交互行为的源头,用户与网站交互产生行为事件,javascript为事件添加event handler来给用户反馈。
通常来说,javascript的事件模型有三种,它们分别是NN4、IE4+和W3C/Safari。
这三种事件模型有什么不同呢?
下面我们来举一个简单的例子,或许我们在看别人的一些js代码时常会看到这样的代码:

function myFunc(evt) {
    
evt = (evt) ? evt : ((window.event) ? window.event : "")
    
// process event here
}

这是对事件响应对象的一种判断,由于三种事件模型存在着这样那样的差异,所以如果要做兼容性的开发,这种判断是必不可少的,在IE4+中,事件被直接赋予到一个window.event属性中,你可以直接使用;但是在基于标准的DOM事件模型中并不是这样,它是通过传参的方法来传播事件的,也就是说你需要为你的函数提供一个事件响应的接口,在上述函数中,evt扮演的就是这个角色。
当然事件响应的不同只是一个方面,三者在事件发生节点、事件属性等各个方面都有着或多或少的差异,下面这张表很好的总结了三者对于事件对象的不同解释:

Event target target srcElement target
Event type type type type
X coordinate on page pageX * pageX
Y coordinate on page pageY * pageY
Mouse button which button button
Keyboard key which keyCode keyCode

标注*的属性值可以通过对 event.clientX + document.body.scrollTop 或者 event.clientY + document.body.scrollTop 进行求值来得到。

另外,在事件绑定方面,三者也有着不同的方法:
事件绑定方法I:绑定元素属性

<INPUT TYPE="button" NAME="myButton" VALUE="Click Here"
onClick="myFunc()">

把事件绑定到元素属性上有一个优点,即可以支持开发者把参数传递给事件处理器函数。接收事件的元素的引用则由一个特殊的参数值–this 关键字来传递。

事件绑定方法II:绑定对象属性
对于 NN3+ 和 IE4+ 这两类浏览器,脚本编程人员可以以脚本语句的方式把事件绑定到对象上,而不是绑定到元素标识的属性上。每一个负责事件响应的元素对象都为自己能够识别的事件设置了相应的属性。对象属性名称是元素标识属性的小写形式,比如 onmouseover。
当您把一个函数的引用赋值给一个事件属性的时候,就发生了绑定。函数的引用是指函数的名称,但是不带函数定义中的括号。因此,如果要为一个名为 myButton 的按键的点击事件(click)进行绑定,使之激活一个定义为 myFunc() 的函数,则其赋值语句如下所示:

document.forms[0].myButton.onclick = myFunc;

事件绑定方法III: 绑定 IE4+<SCRIPT FOR> 标识
在 IE4+ 中,Microsoft 对 <SCRIPT> 标识实现了自己的扩展,可以将它包含的脚本语句和某个元素的一个事件类型进行绑定。支持这个绑定的标识属性(还没有被 W3C 批准为 HTML 的一部分)是 FOR 和 EVENT。
FOR 属性的值必须是您为元素的 ID 属性分配的唯一标识符。然后,您必须把事件的名称(onmouseover,onclick,等等)分配给 EVENT 属性。在上面的按键实例的基础上,我们必须对按键标识进行修改,使之包含一个 ID 属性:

<INPUT TYPE="button" NAME="myButton" ID="button1" VALUE="Click Here">

脚本语句并不在函数中,而是在<SCRIPT> 标识中,如下所示:

<SCRIPT FOR="button1" EVENT="onclick">
// script statements here
<
/SCRIPT>

事件绑定方法IV:使用 IE5/Windows 的 attachEvent() 方法
早在 W3C DOM 工作组磨砺出标准的事件模型之前,attachEvent() 方法已经被实现了,并且可被用于 Windows 版的 IE5 或更新版本的浏览器上的每一个 HTML 元素。
attachEvent() 方法的用法如下所示:

elemObject.attachEvent("eventName", functionReference);

eventName 参数的值是表示事件名称的字符串,比如 onmousedown。functionReference 参数是一个不带括号的函数引用,和早些时候描述的事件属性方法中一样。因此对于上面例子的按键对象,可以通过如下的脚本语句把函数绑定到按键的 click 事件:

document.getElementById("button1").attachEvent("onclick", myFunc);

事件绑定方法V:使用 W3C DOM 的 addEventListener() 方法
Safari 使用的是 W3C DOM 级别2定义的事件绑定机制,这个机制和 IE5/Windows 的 attachEvent() 方法很类似,但是有自己的语法。W3C DOM 规范为 DOM 层次中的每一个结点都定义了一个 addEventListener() 方法。HTML 元素是 DOM 结点中的一类,在一对元素标识内部的文本结点也是一个结点,也能够接收事件。这一点在 NN6 事件处理过程中经常得到体现,在本文的后面部分您将会看到。
addEventListener() 方法的语法如下所示:

nodeReference.addEventListener("eventType", listenerReference, captureFlag);

用 W3C DOM 规范中的行话来说,addEventListener() 方法为指定的结点注册了一个事件,表示该结点希望处理相应的事件。这个方法的第一个参数是一个声明事件类型的字符串(不带”on”前缀),比如 click,mousedown,和 keypress。addEventListener() 方法的第二个参数可以和早些时候描述过的函数引用同样对待。第三个参数则是一个 Boolean 值,指明该结点是否以DOM中所谓的捕捉模式来侦听事件。事件的捕捉和派发—综合起来称为事件的传播–最后由另一篇文章来描述。对于一个典型的事件侦听器来说,第三个参数应该为 false(假)。


相关文章

  • javascript防止用户复制文本

    要防止用户复制网站的文本,主要方法有两个: 一个是禁用用户的右键,不过这个方法治标不治本,用ctrl+c仍然可以复制; 另

  • 解决div列高度自适的3种常用方法

    解决div列高度自适的方法有很多种,这里介绍三种最常用的方法给大家(下面所有例子以父main,子divleft、divright为例)。

  • javascript中eval的使用

    【eval()函数】 JavaScript有许多小窍门来使编程更加容易。 其中之一就是eval()函数,这个函数可以把一个字符串当作一个Ja

  • IE6下图片下方有空隙的解决方法

    1、改变html的排版 例如: div img src=http://www.google.com/intl/en_ALL/images/logo.gif alt=google / /div 改为: di

  • CSS解决未知高度垂直居中

    翻译: Forest(老甘) 原文标题: Vertical Centering in CSS 副标题:Yuhu's Definitive Solution with Unknown Height

  • css小技巧—改善你的输入体验

    css已经被视作web标准的最大标志之一,但是css不仅仅是用来做布局和文字样式那么简单,下面就给大家介绍一个css的小技巧,

  • 如何让DHTML层覆盖于Flash之上

    Flash 默认总是会显示在页面的最顶层,也就是说如果页面上存在一些DHTML Layer,那么这些层将会被Flash盖

  • 几个常见注释理解

    1、选择器(child selector) 如果你想在IE中隐藏一个CSS定义,可以使用子选择器。 css部分: htmlbody p { /* declaratio