JavaScript中的5种事件使用方式解说

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

JavaScript中的5种事件使⽤⽅式解说
为组件提供事件处理⼊⼝,可以极⼤的提⾼组件的封闭性,同时⼜能让组件很好的和外界通信。

并且这也是我们已经习惯使⽤的⼀种开发模式,.NET、DHTML等都提供了⼀套完整的事件处理模型。

下⾯是关于使⽤DHTML中事件的⼀个总结。

DHTML提供了3种事件的使⽤⽅式,它们分别是:
1、Inline HTML: <ELEMENT onXXX='handler'></ELEMENT>
这是最简单最常⽤的事件绑定⽅式,不过这⾥onXXX的值为handler是不太确切的说法。

其实这个handler的位置可以放置任何合法的JavaScript语句,因为IE在⽣成DHMTL树时会为当前Element构建⼀个'匿名'成员⽅法,onXXX指向这个⽅法的handler。

⽐如我们写
下,<element id='elmt' onXXX='var abc =0; for ( var i=0 ; i < 100 ; i++ ) abc+=i;'></element>,实际上在DHMTL树种存在如下代码结构:function anonymous()
{
var abc =0; for ( var i=0 ; i < 100 ; i++ ) abc+=i;
}
此时anonymous⽅法中的this就是elmt对象。

2、Event property: object.onXXX = handler
这个使⽤⽅法是把函数名(handler)赋予element预定义的事件属性上(onXXX)。

这⾥需要注意两个问题:
⼀是,我们在使⽤object.onXXX = handler是需要保证object已经在页⾯中⽣成。

⽐如我们为document.body赋予事件处理函数,我们必须保证document.body已经存在,就是说我们不能在<body>之前在的全局语句中使⽤document.body;
⼆是,handler必须是函数名,和使⽤⽅法1中的handler可以是任何JavaScript语句不同!我们最容易出错的使⽤是,当我们习惯了在inline html中使⽤<element id='elmt' onXXX = 'return false'></element>后,如果这样使⽤elmt.onXXX='return false;'。

那么就歇菜了,不会有任何执⾏效果,当然IE也不报错。

正确的使⽤是:
elmt.onXXX = function() { return false; }
3、Named Script: <SCRIPT FOR = object EVENT = onclick>
IE独家⽀持,没有怎么使⽤过,不觉得有什么特别的地⽅哈。

如果您知道它的妙处愿闻其详。

DOM提供了两种事件处理使⽤,它们分别是:
1、attachEvent method:
使⽤⽅法:bSuccess = object.attachEvent(sEvent, fpNotify)。

解释就抄msdn了
Parameters
sEvent Required. String that specifies any of the standard DHTML Events.
fpNotify Required. Pointer that specifies the function to call when sEvent fires.
Return Value
Boolean. Returns one of the following possible values:
true The function was bound successfully to the event.
false The function was not bound to the event.
DOM提供的这个事件附加⽅式实际上是⼀个集合操作,我们可以多次的向同⼀个事件签名上attach多个事件处理函数,⽐如:
window.attachEvent('onload', handler1);
window.attachEvent('onload', handler2);
window.attachEvent('onload', handler3);
window.attachEvent('onload', handlerN);
将会执⾏这个N个handler,但是不保证执⾏顺序。

这⾥有个例外,attachEvent在document.body上attach事件'onload'没有效果,但是attch window对象的'onload'是正确的。

根据页⾯初始化顺序来看,及document.body.attachEvent('onload', handler)返回true来看,这因该是IE的⼀个bug。

注意DHTML的Event Property⽅式和DOM的attachEvent⽅式的区别:
Event Property⽅式,当触发事件时,事件处理函数是⼀个⽆参数函数,我们只能通过event这个window的属性来读取和事件相关的信息。

attachEvent⽅式,当事件处理函数被触发时,该函数的第⼀个参数arguments[0],默认是该窗⼝上的event。

什么意思呢?不明⽩参看。

2、fireEvent method
请参看:。

相关文档
最新文档