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方法呢?

posted on 2005-04-11 13:11 birdshome 阅读(3809) 评论(10) 编辑收藏引用收藏至365Key 所属分类: Jscript&Dhtml开发

# re: JavaScript中的5种事件使用方式解说回复

问个问题
attachEvent对应的是detachEvent。

object.onXXX = handler挂接的函数怎么detach掉呢？
object.onXXX = null??

2005-05-11 21:34 | edison1024

# re: JavaScript中的5种事件使用方式解说回复

@edison1024
object.onXXX = handler 这种方式本身就没有要求显示释放，所以不用考虑，而且也没有发现不做释放而带来的有害副作用。

2005-05-11 22:11 | birdshome

# re: JavaScript中的5种事件使用方式解说回复

。。。。
误会我的意思了，detach掉并不是想释放内存。就是简单的例如图片的事件取消掉而已。。。。。

探讨一下，object.onXXX = handler 不释放真的没问题？
我的系统是XP IE6是SP2，已经更新到最新^__^，我发现无论DOM或DHTML哪种方式，就算故意不detach，按住F5狂刷，都不会造成内存泄漏。
但是我在同事的机器2003 IE6上（无补丁），如果按住F5狂刷，不论那种都是内存狂涨啊。。。555。。。
下面附我的测试代码，请指教

2005-05-12 16:07 | edison1024

# re: JavaScript中的5种事件使用方式解说回复

<HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
var btns = null;
window.onload = function()
{
btns = document.getElementsByTagName("input");
for(var i = 0; i < btns.length; i++)
{
if(btns.item(i).type == "button")
{
btns.item(i).onclick = btnEvent; //DHTML
//btns.item(i).attachEvent("onclick", btnEvent2); //DOM
}
}
}

/*
window.onunload = function()
{
for(var i = 0; i < btns.length; i++)
{
if(btns.item(i).type == "button")
{
alert(btns.item(i).id);
btns.item(i).detachEvent("onclick", btnEvent2);
}
}
}
*/

function btnEvent()
{
alert(window.event.srcElement.id);
}

function btnEvent2(evt)
{
alert(evt.srcElement.id);
}
</script>
</head>

<body>
<input type="button" name="button" id="btn1" value="btn1">
<input type="button" name="button2" id="btn2" value="btn2">
<input type="button" name="button3" id="btn3" value="btn3">
<input type="button" name="button4" id="btn4" value="btn4">
<input type="button" name="button5" id="btn5" value="btn5">
<input type="button" name="button6" id="btn6" value="btn6">
<input type="button" name="button7" id="btn7" value="btn7">
<input type="button" name="button" id="btn8" value="btn8">
<input type="button" name="button2" id="btn9" value="btn9">
<input type="button" name="button3" id="btn10" value="btn10">
<input type="button" name="button4" id="btn11" value="btn11">
<input type="button" name="button5" id="btn12" value="btn12">
<input type="button" name="button6" id="btn13" value="btn13">
<input type="button" name="button7" id="btn14" value="btn14">
</body>
</html>

2005-05-12 16:08 | edison1024

# re: JavaScript中的5种事件使用方式解说回复

我没有试过IE6SP1。不知道会怎么样

2005-05-12 16:10 | edison1024

# re: JavaScript中的5种事件使用方式解说回复

@edison1024
我在xp+sp2 en, ie6+sp1 en下面没有发现反复刷新内存会增长哦。

2005-05-14 14:52 | birdshome

# re: JavaScript中的5种事件使用方式解说回复

这样啊。。。看来sp1以上的就不需要考虑这些问题了。谢谢啊！
不知道你发现没有，打过sp2后原来在sp1还能用的很多东西都不能用了。比如sp2里面就把pop限制在ie窗体里了。

2005-05-14 15:12 | edison1024

# re: JavaScript中的5种事件使用方式解说回复

@edison1024
没有啊，打了sp2我没有发现他对dhtml开发有什么大的影响哦。你说的pop是popup window吗？那个东西还是可以显示在ie窗体之外呀。

2005-05-14 17:54 | birdshome

# re: JavaScript中的5种事件使用方式解说回复

attachEvent("onclick", btnEvent2(this));
上面怎么实现？？？
btnEvent2(rps)

2006-01-25 13:46 | ysee

# re: JavaScript中的5种事件使用方式解说 回复

yty

2006-02-27 12:44 | jhj

http://www.cnblogs.com/birdshome/archive/2005/04/11/109356.html

posted on 2006-08-02 17:50 程序缘阅读(767) 评论(1) 收藏举报

刷新页面返回顶部

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