JavaScript事件绑定的方法说明

   事件使得客户端的 JavaScript 有机会被激活,并得以运行。在一个 Web 页面装载之后,运行脚本的唯一方式,就是响应系统或者用户的动作。虽然从第一个支持脚本编程的浏览器面世以来,简单的事件被实现为 JavaScript 的一部分;但是大多数最近出现的浏览器都实现了强壮的事件模型,使脚本可以更加智能地处理事件。现在的问题在于:为了支持各种浏览器,您必须和多个先进的 事件模型做斗争,准确地说,是三个。

   这三个事件模型分别和下面的文档对象模型(Document Object Model,即 DOM)三巨头结盟:Netscape Navigator 4 (NN4),Macintosh 和 Windows 系统的 Internet Explorer 4 及其更新版本(IE4+),以及在 Safari 中得到实现的 W3C DOM。尽管这些模型之间有些地方存在一些本质的差别,但是在一些简易的 JavaScript 的帮助下,它们都可以同时适用于同一个文档。本文主要着眼于相互冲突的事件模型中的两个关键方面:

    ·把一个事件和 HTML 元素绑定起来的方法。
    ·在事件被触发后如何对之进行处理。
事件绑定的方法


   事件绑定是指构造一个响应系统或者用户动作的 HTML 元素的过程。在不同的浏览器版本中,有不少于五种事件绑定技术。下面我们快速地介绍一下这些技术。

事件绑定方法I:绑定元素属性
最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性。事件属性名称由事件类型外加一个“on”前缀构成。尽管HTML属性并不是大小写敏 感的,人们还是定义了一个规则,规定事件类型的每一个“词”的首字母大写,比如 onClick 和 onMouseOver。这些属性也被称为事件处理器,因为它们指示了元素如何“处理”特定的事件类型。

正确的事件处理器属性的值在形式上是被引号包含的 JavaScript 语句。最常见的值是一条调用某个脚本函数的语句,而被调用的函数在位于

文档前部的 <SCRIPT> 标识中定义–该标识通常位于 <HEAD> 部分。举例来说,下面的函数:

function myFunc() {
      // script statements here
}
可以被定义为一个按键控件的事件处理器,按键的定义如下:

<INPUT TYPE=”button” NAME=”myButton” VALUE=”Click Here”
onClick=”myFunc()”>
把事件绑定到元素属性上有一个优点,即可以支持开发者把参数传递给事件处理器函数。接收事件的元素的引用则由一个特殊的参数值–this

关键字来传递。下面的代码演示一个函数如何借助传入参数,把任意数目的文本框的内容转化为大写:

<SCRIPT LANGUAGE=”JavaScript”>
function convertToUpper(textbox) {
      textbox.value = textbox.value.toUpperCase();
}
</SCRIPT>

<FORM ….>
<INPUT TYPE=”text” NAME=”first_name” onChange=”convertToUpper(this)”&gt
<INPUT TYPE=”text” NAME=”last_name” onChange=”convertToUpper(this)”&gt

</FORM>
事件绑定方法II:绑定对象属性
对于 NN3+ 和 IE4+ 这两类浏览器,脚本编程人员可以以脚本语句的方式把事件绑定到对象上,而不是绑定到元素标识的属性上。每一个负责事件响应的元素对象都为自己能够识别的事 件设置了相应的属性。对象属性名称是元素标识属性的小写形式,比如 onmouseover。NN4 还接受 interCap(即首字小写,之后的每一个词的首字大写)版本的属性名,但是考虑到跨浏览器的兼容性,所有字母都是小写的名称会更安全一些。

当您把一个函数的引用赋值给一个事件属性的时候,就发生了绑定。函数的引用是指函数的名称,但是不带函数定义中的括号。因此,如果要

为一个名为 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>
当然,标识中的语句可以调用页面上其它地方定义的任何函数(或者从.js文件中导入的函数)。然而,这种绑定方式意味着您必须为每一个元素和每一个事件创建一个 <SCRIPT FOR> 标识。

您还必须小心,只能把这种绑定方法部署在仅供 IE4+ 浏览器浏览的页面。其它任何支持脚本编程而又没有实现这个特殊的 <SCRIPT> 标识的浏览器(包括 IE3),都将把它作为常规的 <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);
由于 attachEvent() 方法必须严格工作在 IE5+/Windows 的环境中,所以您既可以使用 W3C DOM 的元素引用方式(如上文所示),也可以使用 IE4+ 的引用方式:

document.all.button1.attachEvent(”onclick”, myFunc);
这个方法有一个值得注意的地方:您不能在元素被载入浏览器之前执行这个语句。该对象的引用在相应的 HTML 按键元素被浏览器创建之前,都是无效的。因此,要让这样的绑定语句或者在页面的底部运行,或者在 BODY 元素的 onLoad 事件处理器调用的函数中运行。

事件绑定方法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(假)。

那种绑定方法最好?
如果您足够幸运,只需要为某一个操作系统上特定版本的浏览器创建应用程序,则可以为选定的浏览器选择最现代的绑定方式。但是对于跨浏览 器的网站作者来说,选择绑定方法则需要面对实质性的挑战。如果您只计划支持 IE5/Mac,则可以不考虑 attachEvent() 和 addEventListener() 方法,因为 IE5/Mac 对这两种方法都不支持。这种情况下,比较实际的选择有两种,要么绑定标识属性,要么绑定对象属性。这时就需要费心思了。

一方面,W3C DOM Level 2 承认基于标识属性的方法,并将它推荐为 addEventListener() 方法的可接受代替方法。为了和数以百万计的脚本相兼容,所有支持脚本编程的浏览器都支持基于标识属性的事件绑定方法。一些自动化的页面制作工具,比如 DreamWeaver,也把事件处理器的属性嵌入到 HTML 标识中。但是另一方面,在元素标识文件中嵌入面向脚本的信息,又不能将内容从风格及行为中分离开来,这和当前的流行趋势相违背。把事件绑定到对象属性上的 方法听起来方向是对的,但是在 W3C 关于 HTML,XHTML,或者 DOM 的标准中,并没有对事件属性提供“官方”的支持。尽管如此,在实际生活中,除了第一代支持脚本编程的浏览器之外,其它浏览器都支持这种方法。一个纯标准论 者会认为上述的两种方法都有缺点,但是对于讲究实际的开发者来说,即使考虑到未来主流浏览器的兼容性,这两种方法都是“安全”的。

事件的信息矿:事件对象
所有这三种事件模型的核心都是一个事件对象–它是一个抽象的实体,其属性中包含很多对事件处理函数具有潜在价值的信息。从本文早些时候对事件绑定技术的 讨论中,您可能可以推断出事件对象对脚本之所以至关重要,原因之一是除了基于标识属性的绑定方法以外,其它绑定方法都不支持将参数传递到事件处理函数中。 事件对象通过提供足够的“挂钩”,使事件处理函数可以读取事件的特征,从而填补了这个缝隙。因此,事件处理函数可以得到接收事件的元素的引用,以及其它一 些有用的信息,比如鼠标动作的坐标,鼠标使用的按键,键盘上被按压的键,以及在事件发生的过程中是否有修饰键被按下(比如检测 Shift-click 事件)。

访问事件对象
虽然事件对象的精确构成因为本文讨论的三种 DOM(NN4,IE4+,以及 W3C/Safari)的不同而有所变化,但是,一个事件处理函数只能通过以下两种方式之一来访问事件对象:NN 方式和 IE 方式。W3C/Safari DOM 事件对象公布给脚本的接口方式和 NN4 的事件对象一样;而 IE4+ 则有自己的方法。IE4+ 的事件对象更加易于描述,因此我们首先对它进行讨论。简单地说,事件对象是 window 对象的一个属性。这意味着在所有的实例中只有一个事件对象。举例来说,在键盘上简单地按压和松开一个按键,会产生三个事件:onKeyDown, onKeyPress,和 onKeyUp(事件的发生顺序和这里的列举顺序相同)。如果 onKeyDown事 件激活的函数花费很长的时间进行处理,则浏览器就会把其它两个事件保持在队列中,直到 onMouseDown 事件处理完成为止。而对于 NN4 和 W3C DOM 来说,事件对象看起来就更加抽象一些。除了基于标识属性风格的绑定方法之外,其它绑定方法都是把事件对象自动传递给与事件相绑定的函数。传递给函数的是一 个单一的参数。开发者需要在函数中定义一个参数变量,来“接收”该参数的值。为了避免和IE中的 window.event 对象互相冲突,请不要把参数命名为 event。举例来说,把它命名为 evt 就相当好,相应的事件函数的定义大致如下:

function myFunc(evt) {
      // script statements here
}
然而,如果您使用的是基于标识属性的事件绑定技术,就必须显式地把事件作为一个参数传递到您调用的函数。为了完成事件的传递,需要把 event 这个关键字作为参数进行传递:onClick = “myFunc(event)”外部传入的参数是您的事件处理函数和 NN 的事件对象之间的唯一联系纽带。如果在主事件处理函数内部调用的其它函数需要该对象或者该对象的属性值,则您可以把该对象或其属性值作为参数中继给这些函 数。如果您想知道 IE 是否把事件的引用保存在 window.event 属性中,那答案是“是”。使用这个语法交集是相当安全的,因为在 NN 和 IE 这两个浏览器,被传递到事件处理函数的事件对象都有您所期望的当前事件的属性值。

兼容两种事件对象引用
设想在处理事件时,我们需要在一个事件函数中考察一个或者多个事件属性。这是一个简单的技术,可以使事件处理函数和作为参数传入的事件对象协同工作,或者 从 window.event 属性中读取信息。而且,这个技术不必处理不同的浏览器版本之间的细微差别。在开始的时候,需要在您的事件处理函数中定义一个参数变量,准备接收可能传入的 事件对象。然后,通过简单的条件表达式把浏览器的事件对象赋值给上述的参数变量:

function myFunc(evt) {
      evt = (evt) ? evt : ((window.event) ? window.event : “”)
      // process event here
}
如果事件对象真的以参数的形式传进来了,则在函数内部,事件对象就被保留在 evt 这个局部变量中。如果这个参数是 null,而且浏览器的 window 对象包含有一个 event 属性,则 window.event 对象就会把自己赋值给 evt 变量。然而,为了完成这个工作,还应该再包含一层或者多层条件控制,以便优雅地适应那些在事件模型中没有定义事件对象的的早期浏览器:

function myFunc(evt) {
      evt = (evt) ? evt : ((window.event) ? window.event : “”)
      if (evt) {
          // process event here
      }
}
为了把同样的方式应用到所有事件处理函数的构建中,您可以定义一个函数来兼容两种事件,即由绑定的标识属性显式传入的事件对象,以及由绑定的事件属性隐式传入的事件对象。这样即使您在开发过程中改变了事件绑定的风格,这个函数也不必改变。

瑞典自助餐式地选择事件对象
然而,建立一个指向事件对象的引用只是战斗的一部分。来自不同事件模型的每一个事件对象都拥有自己的一套属性,以容纳事件的细节。下面的表格列出了最常用的属性,以及这些属性在上述三种事件对象类型中的名称。

表格 1. 流行的事件对象属性

描述NN4IE4+W3C/Safari
Event targettargetsrcElementtarget
Event typetypetypetype
X coordinate on pagepageX*pageX
Y coordinate on pagepageY*pageY
Mouse buttonwhichbuttonbutton
Keyboard keywhichkeyCodekeyCode

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

Macintosh 版本的IE5在通常情况下都遵循 IE4+ 的事件对象模型,但是有一个例外,即 IE5/Mac 的事件对象既定义了 srcElement 属性,也定义了 target 属性,这两个属性都指向接收事件的元素。需要抽象的最重要的事件对象属性可能得算指向接收事件的 HTML 元素的引用。NN4 和 W3C 的事件对象采用相同的属性名(target),而 IE4+ 的事件对象则使用 srcElement 属性。这时候,对象检测技术(而不是费力劳神而又具有危险倾向的浏览器版本识别方法)再次拯救了我们。对于那些非文本容器的元素,一个简单的条件表达式就 可以轻松处理脚本语法上的差别:

var elem = (evt.target) ? evt.target : evt.srcElement
从现在开始,您的脚本就可以读写任何浏览器对象模型公布出来的元素对象属性了。

W3C DOM结点的事件目标
W3C DOM 的结点架构使得文档中的每一个结点都可以接收事件。在支持这一架构的浏览器中,发生在嵌套文本顶上的事件并不调用分配给文本容器的事件处理器,相应的文本结点才是该事件的目标结点。考虑如下场景:

在事件实例,当鼠标的指针在一个 SPAN 元素包含的文本顶上滚动时,该文本就会被高亮显示。 事件绑定的过程通过对象属性在 init() 函数中进行。从表面上看,当用户在 SPAN 元素顶上滚动鼠标时,onMouseOver 事件动作函数就为该元素指派一个与风格表单规则相关联的类名(highlight),该风格规则把文本的显示风格定义为粗体,黄色背景;而在 onMouseOut 函数中,则把风格恢复为原始的版本(类 normal)。请注意一个 toggleHighlight() 函数是如何在事件对象的 type 属性的帮助下,执行两个动作的(该属性在所有事件模型对象中的名称是相同的)。请试一下这个事件实例。但是如果您把例子装载到 NN6,则鼠标事件的真正目标就是 SPAN 元素中的文本结点了。本文并不讨论事件的传播机制,但是请相信,W3C DOM 事件模型的缺省行为会使事件沿着结点的包含层次向上传播(和 IE4+ 中事件通过元素容器向上传播的机制很类似)。因此,在这个事件实例中。鼠标事件会从其真正的目标向上传递到文本结点的容器(也就是 SPAN 元素)。这些事件触发了 SPAN 元素中相应的事件处理器。虽然事件处理器属于 SPAN 元素,事件对象还是保留文本对象的引用,并将它作为事件的原始目标。然而,只有对文本结点的容器进行动作,才能修改它的风格。为了实现 toggleHighlight() 函数的等价操作,使之可以修改SPAN容器的 className 属性,该函数需要派生出一个指向文本结点容器的引用。一个策略是使用 W3C DOM 事件对象的 currentTarget 属性,该属性返回一个处理事件的结点的引用。脚本中的决策树需要考虑这个属性,增加代码之后的 toggleHighlight() 函数如下所示:

function toggleHighlight(evt) {
      evt = (evt) ? evt : ((window.event) ? window.event : “”)
      if (evt) {
          var elem
          if (evt.target) {
              if (evt.currentTarget && (evt.currentTarget != evt.target)) {
                  elem = evt.currentTarget
              } else {
                  elem = evt.target
              }
          } else {
              elem = evt.srcElement
          }
          elem.className = (evt.type == “mouseover”) ? “highlight” : “normal”
      }
}
另一个可选的方法是考察由 target 属性返回的对象的 ronodeType 属性。一个能够把事件定向给文本结点的浏览器,也可以把一个文本结点的 nodeType 属性值报告为3,而不是报告为元素结点的类型(其值为1)。如果事件的目标是一个文本结点,则脚本程序就可以通过该文本结点的 parentNode 属性来得到其上级元素结点的引用。这种方法的决策树在某种程度上得到更多的改进:

function toggleHighlight(evt) {
      evt = (evt) ? evt : ((window.event) ? window.event : “”)
      if (evt) {
          var elem
          if (evt.target) {
              elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target
          } else {
              elem = evt.srcElement
          }
          elem.className = (evt.type == “mouseover”) ? “highlight” : “normal”
      }
}
如果您正在用遵循 W3 的浏览器阅读本文,则请尝试这个修改过的版本,看看鼠标滚动时的风格变化。这个页面使用了嵌入到事件实例中的最新版本的 toggleHighlight() 函数,展示了如何使用 JavaScript 为那些能够显示期望效果的浏览器增加额外的价值,同时也可以那些基本的内容提供给仍然使用着较老版本或者不支持脚本编程的浏览器的用户,只不过在模式上不 那么动人和便于交互。

一个事件处理函数的模板
并不是每个事件处理函数都处理页面元素对象中同样的属性或者行为,但是,从上文的讨论可以派生出来的一个模板,您可以在这个模板的帮助下开始编码。模板如下:

function functionName(evt) {
      evt = (evt) ? evt : ((window.event) ? window.event : “”)
      if (evt) {
          var elem
          if (evt.target) {
              elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target
          } else {
              elem = evt.srcElement
          }
          if (elem) {
              // process event here
          }
      }
}
请把第一行的函数名替换为您希望的函数名,并在注视指示的地方开始书写具体事件的代码。这个格式应该可以为您提供一个起点,适合于您采用的任何跨浏览器的 事件绑定风格。如果您需要在一个页面中多次使用这个格式,则可以进一步精简代码,即把读取目标的代码抽象成一个可重用的工具函数,然后在每一个事件处理函 数中进行调用:

// shared function
function getTargetElement(evt) {
      var elem
      if (evt.target) {
          elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target
      } else {
          elem = evt.srcElement
      }
      return elem

}

function functionName(evt) {
      evt = (evt) ? evt : ((window.event) ? window.event : “”)
      if (evt) {
          var elem = getTargetElement(evt)
          if (elem) {
              // process event here
          }
      }
}
有了这类框架,您现在应该可以把更多的注意力集中在各个事件处理函数要求的具体动作中了。

 

 

 

javascript事件列表解说javascript事件列表解说
事件 浏览器支持 解说
一般事件 onclick IE3、N2 鼠标点击时触发此事件
ondblclick IE4、N4 鼠标双击时触发此事件
onmousedown IE4、N4 按下鼠标时触发此事件
onmouseup IE4、N4 鼠标按下后松开鼠标时触发此事件
onmouseover IE3、N2 当鼠标移动到某对象范围的上方时触发此事件
onmousemove IE4、N4 鼠标移动时触发此事件
onmouseout IE4、N3 当鼠标离开某对象范围时触发此事件
onkeypress IE4、N4 当键盘上的某个键被按下并且释放时触发此事件.
onkeydown IE4、N4 当键盘上某个按键被按下时触发此事件
onkeyup IE4、N4 当键盘上某个按键被按放开时触发此事件
页面相关事件 onabort IE4、N3 图片在下载时被用户中断
onbeforeunload IE4、N 当前页面的内容将要被改变时触发此事件
onerror IE4、N3 出现错误时触发此事件
onload IE3、N2 页面内容完成时触发此事件
onmove IE、N4 浏览器的窗口被移动时触发此事件
onresize IE4、N4 当浏览器的窗口大小被改变时触发此事件
onscroll IE4、N 浏览器的滚动条位置发生变化时触发此事件
onstop IE5、N 浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
onunload IE3、N2 当前页面将被改变时触发此事件
表单相关事件 onblur IE3、N2 当前元素失去焦点时触发此事件
onchange IE3、N2 当前元素失去焦点并且元素的内容发生改变而触发此事件
onfocus IE3 、N2 当某个元素获得焦点时触发此事件
onreset IE4 、N3 当表单中RESET的属性被激发时触发此事件
onsubmit IE3 、N2 一个表单被递交时触发此事件
滚动字幕事件 onbounce IE4、N 在Marquee内的内容移动至Marquee显示范围之外时触发此事件
onfinish IE4、N 当Marquee元素完成需要显示的内容后触发此事件
onstart IE4、 N 当Marquee元素开始显示内容时触发此事件
编辑事件 onbeforecopy IE5、N 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件
onbeforecut IE5、 N 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件
onbeforeeditfocus IE5、N 当前元素将要进入编辑状态
onbeforepaste IE5、 N 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件
onbeforeupdate IE5、 N 当浏览者粘贴系统剪贴板中的内容时通知目标对象
oncontextmenu IE5、N 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
oncopy IE5、N 当页面当前的被选择内容被复制后触发此事件
oncut IE5、N 当页面当前的被选择内容被剪切时触发此事件
ondrag IE5、N 当某个对象被拖动时触发此事件 [活动事件]
ondragdrop IE、N4 一个外部对象被鼠标拖进当前窗口或者帧
ondragend IE5、N 当鼠标拖动结束时触发此事件,即鼠标的按钮被释放了
ondragenter IE5、N 当对象被鼠标拖动的对象进入其容器范围内时触发此事件
ondragleave IE5、N 当对象被鼠标拖动的对象离开其容器范围内时触发此事件
ondragover IE5、N 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragstart IE4、N 当某对象将被拖动时触发此事件
ondrop IE5、N 在一个拖动过程中,释放鼠标键时触发此事件
onlosecapture IE5、N 当元素失去鼠标移动所形成的选择焦点时触发此事件
onpaste IE5、N 当内容被粘贴时触发此事件
onselect IE4、N 当文本内容被选择时的事件
onselectstart IE4、N 当文本内容选择将开始发生时触发的事件
数据绑定 onafterupdate IE4、N 当数据完成由数据源到对象的传送时触发此事件
oncellchange IE5、N 当数据来源发生变化时
ondataavailable IE4、N 当数据接收完成时触发事件
ondatasetchanged IE4、N 数据在数据源发生变化时触发的事件
ondatasetcomplete IE4、N 当来子数据源的全部有效数据读取完毕时触发此事件
onerrorupdate IE4、N 当使用onBeforeUpdate事件触发取消了数据传送时,代替onAfterUpdate事件
onrowenter IE5、N 当前数据源的数据发生变化并且有新的有效数据时触发的事件
onrowexit IE5、N 当前数据源的数据将要发生变化时触发的事件
onrowsdelete IE5、N 当前数据记录将被删除时触发此事件
onrowsinserted IE5、N 当前数据源将要插入新数据记录时触发此事件
外部事件 onafterprint IE5、N 当文档被打印后触发此事件
onbeforeprint IE5、N 当文档即将打印时触发此事件
onfilterchange IE4、N 当某个对象的滤镜效果发生变化时触发的事件
onhelp IE4、N 当浏览者按下F1或者浏览器的帮助选择时触发此事件
onpropertychange IE5、N 当对象的属性之一发生变化时触发此事件
onreadystatechange IE4、N 当对象的初始化属性值发生变化时触发此事件
[table][/table]onactivate 当对象设置为活动元素时触发。
onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。
onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即触发。
onbeforeupdate 当成功更新数据源对象中的关联对象前在数据绑定对象上触发。
onblur 在对象失去输入焦点时触发。
oncontrolselect 当用户将要对该对象制作一个控件选中区时触发。
ondeactivate 当 activeElement 从当前对象变为父文档其它对象时触发。
onerrorupdate 更新数据源对象中的关联数据出错时在数据绑定对象上触发。
onfocus 当对象获得焦点时触发。
onload 在浏览器完成对象的装载后立即触发。
onmove 当对象移动时触发。
onmoveend 当对象停止移动时触发。
onmovestart 当对象开始移动时触发。
onreadystatechange 当对象状态变更时触发。
onresizeend 当用户更改完控件选中区中对象的尺寸时触发。
onresizestart 当用户开始更改控件选中区中对象的尺寸时触发。
ontimeerror 当特定时间错误发生时无条件触发,通常由将属性设置为无效值导致。:

JavaScript 事件串联执行多个处理过程的方法
以前写 JavaScript 程序时,事件都是采用
object . event = handler ;

的方式初始化。这种方式对于 Internet Explorer、Mozilla/Firefox 和 Opera 来说很通用。但是有一个问题就是,这种方式只能一个事件对应一个事件处理过程。如果希望一个事件可以依次执行多个处理过程就不好用了。
但是 Internet Explorer 从 5.0 开始提供了一个 attachEvent 方法,使用这个方法,就可以给一个事件指派多个处理过程了。attachEvent 对于目前的 Opera 也适用。但是问题是 Mozilla/Firefox 并不支持这个方法。但是它支持另一个 addEventListener 方法,这个方法跟 attachEvent 差不多,也是用来给一个事件指派多个处理过程的。但是它们指派的事件有些区别,在 attachEvent 方法中,事件是以 “on” 开头的,而在 addEventListener 中,事件没有开头的 “on”,另外 addEventListener 还有第三个参数,一般这个参数指定为 false 就可以了。
因此要想在你的程序中给一个事件指派多个处理过程的话,只要首先判断一下浏览器,然后根据不同的浏览器,选择使用 attachEvent 还是 addEventListener 就可以了。实例如下:
if ( document . all ) {
window . attachEvent ( ‘ onload ‘ , handler1 ) ;
window . attachEvent ( ‘ onload ‘ , handler2 ) ;
} else {
window . addEventListener ( ‘ load ‘ , handler1 , false ) ;
window . addEventListener ( ‘ load ‘ , handler2 , false ) ;
}

注意:attachEvent 所指派的多个过程的执行顺序是随机的,所以这几个过程之间不要有顺序依赖。另外 attachEvent 和 addEventListener 不仅仅适用于 window 对象,其他的一些对象也支持该方法。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值