您的位置：首页 > Web前端 > JavaScript

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

2010-02-01 14:58 375 查看


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

请参看：在什么时候才会用到fireEvent方法呢?












JS:attachEvent和addEventListener 使用方法（ff和ie）

转自http://www.phpweblog.net/fuyongjie/archive/2009/03/25/6399.html

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);



}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航