本文共 3536 字,大约阅读时间需要 11 分钟。
为组件提供事件处理入口,可以极大的提高组件的封闭性,同时又能让组件很好的和外界通信。并且这也是我们已经习惯使用的一种开发模式,.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
请参看:
转自
attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)
addEventListener方法 用于 Mozilla系列
举例:
document.getElementById( " btn " ).onclick = method1; document.getElementById( " btn " ).onclick = method2; document.getElementById( " btn " ).onclick = method3; 如果这样写,那么将会只有medhot3被执行
写成这样:
var btn1Obj = document.getElementById( " btn1 " ); // object.attachEvent(event,function); btn1Obj.attachEvent( " onclick " ,method1); btn1Obj.attachEvent( " onclick " ,method2); btn1Obj.attachEvent( " onclick " ,method3); 执行顺序为method3->method2->method1
如果是Mozilla系列,并不支持该方法,需要用到addEventListener
var btn1Obj = document.getElementById( " btn1 " ); // element.addEventListener(type,listener,useCapture); btn1Obj.addEventListener( " click " ,method1, false ); btn1Obj.addEventListener( " click " ,method2, false ); btn1Obj.addEventListener( " click " ,method3, false ); 执行顺序为method1->method2->method3
使用实例:
1 。 var el = EDITFORM_DOCUMENT.body; // 先取得对象,EDITFORM_DOCUMENT实为一个iframe if (el.addEventListener) ... { el.addEventListener( ' click ' , KindDisableMenu, false ); } else if (el.attachEvent) ... { el.attachEvent( ' onclick ' , KindDisableMenu); } 2 。 if (window.addEventListener) ... { window.addEventListener( ' load ' , _uCO, false ); } else if (window.attachEvent) ... { window.attachEvent( ' onload ' , _uCO); }