JavaScript执行window.onload和body onload多个处理过程的方法

haiyang5210

浏览: 7650 次
性别:
来自: 深圳

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

DHMTL JavaScript IE Firefox Opera

以前写 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 就可以了。实例如下：

Java代码
if (document.all) {
window.attachEvent('onload', handler1);
window.attachEvent('onload', handler2);
}
else {
window.addEventListener('load', handler1, false);
window.addEventListener('load', handler2, false);
}

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 对象，其他的一些对象也支持该方法。

另外为了方便我也写了个function sunet_addEvent(obj, evType, fn)，如下：

Java代码
function sunet_addEvent(obj, evType, fn)
{
if (obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
}else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
}else{
return false;
}
}

function sunet_addEvent(obj, evType, fn)
{
if (obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
}else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
}else{
return false;
}
}
// 调用例子：Java代码
sunet_addEvent(window,"locad",init);

sunet_addEvent(window,"locad",init);

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。什么意思呢？不明白参看这里。

如果你在页面上做一次点击例如点击一个按钮，那么你是首先点击了该按钮然后动作传入了按钮的容器，最后传入整个页面Document还是首先点击了页面Document，然后是按钮的容器，最后导致按钮的点击呢？
　　 JavaScript对这种问题的处理方式可以称之为事件流即事件的传播机制。对于事件流IE跟FF有不同的解释。IE下的解决方案称之为：冒泡型事件，而FF下称之为：捕获型事件。顾名思义冒泡型事件是从低而上的触发机制，而捕获型事件则是从上到下的触发机制。《JavaScript高级程序设计》一书提到:
　　 DOM事件流同时支持两种事件触发机制，但是捕获型事件先发生。注意因为事件的目标（也就是DOM树最深的节点）是最精确的元素，实际上它会连续接收两次事件，一次是在捕获过程中，一次是在冒泡过程中。事情到底是不是这样呢？观察下面的程序：
　　<html onclick=" clickHandle('html'); ">
　　 <head>
　　 <title>JAVASCRIPT事件流</title>
　　 <meta http-equiv="content-type" content="text/html; charset=GBK">
　　 <script type="text/javascript">
　　 function clickHandle(ele){
　　 alert(ele);
　　 }
　　 </script>
　　 </head>
　　 <body onclick=" clickHandle('body'); ">
　　 <div style="bgcolor:red" onclick=" clickHandle('div'); ">click me!</div>
　　 </body>
　　</html>
　　IE：点击 click me 运行顺序为：DIV-->BODY-->HTML 点击页面其他部分：BODY-->HTML
　　FF: 点击 click me 运行顺序为：DIV-->HTML-->BODY 点击页面其他部分：HTML-->BODY
　　呵呵，好像跟书上说的不太一样哦！程序的运行结果告诉我们：不管是在IE下还是在FireFox下，事件总是由最精确的元素（也就是DOM树中最深的节点）首先触发，然后才开始IE下的冒泡和FireFox下的捕获。
　　 JavaScript为我们提供了三种事件处理函数的分配方式，第一种就像上面的程序一样，是在HTML代码中分配事件处理函数。
　　第二种方法是在JavaScript中分配事件处理函数，这种方法首先必须得获得要分配事件处理函数的元素的引用，参考以下程序：
　　1 window.onload = function(){
　　2 var oDiv = document.getElementById("contentDiv");
　　3 oDiv.onclick = function(){
　　4 alert(oDiv.innerHTML);
　　5 }
　　6 }就像上面提到的，该方法在分配事件处理函数时必须保证已经获得对该元素的引用，所以这个程序才把oDiv的onclick事件放在了onload事件的内部，否则会报oDiv未被定义。还有一个需要注意的地方是使用这种事件处理函数的分配方式时只能为某个特定的事件分配一个函数且事件函数的签名必须小写，否则前面分配的函数会被后面的函数所覆盖，如果想为同一个事件分配两个以上的处理函数，需要采用第三种事件处理函数分配方式。
　　在IE中我们使用obj.attachEvent()方法为某个元素分配函数，使用obj.detachEvent()方法为某个元素分离事件处理函数，而在DOM（以FireFox为例）中我们使用addEventListener()方法分配函数，使用removeEventListener()方法分离函数。
　　参考一下代码：
　　1 window.onload = function(){
　　2 var oDiv = document.getElementById("contentDiv");
　　3 var func1 = function(){
　　4 alert(oDiv.innerHTML);
　　5 }
　　6 var func2 = function(){
　　7 alert("also " + oDiv.innerHTML);
　　8 }
　　9 //IE
　　10 if(oDiv.attachEvent){
　　11 oDiv.attachEvent("onclick",func1);
　　12 oDiv.attachEvent("onclick",func2);
　　13 //oDiv.detachEvent("onclick",func1);
　　14 } else if(oDiv.addEventListener){
　　15 //FireFox
　　16 oDiv.addEventListener("click",func1,true);
　　17 oDiv.addEventListener("click",func2,true);
　　18 //oDiv.removeEventListener("click",func1,true);
　　19 }
　　20
　　21 }我们来说明一下IE下与FireFox下这种事件处理函数的不同点：
　　1、在函数的第一个参数中，IE下必须有"on"做为前缀，而FF下不用，两种情况下处理函数签名必须小写。
　　2、FireFox下的addEventListener()函数的第三个参数表示的是：true表示在捕获阶段增加事件处理函数，false表示在冒泡阶段增加事件处理函数，但是由于FireFox不支持冒泡事件流，所以这里我们设成True或者Flase好像没什么区别。但是要注意的一点就是，如果在 addEventListener()中第三个参数设为true,那么在removeEventListener()方法中的第三个参数一定也要设为相同的值，否则方法失效。
　　3、在运行时阶段，IE首先执行的是最后边一个被增加的事件处理函数然后才是倒数第二个以此类推，但是在FireFox下与IE相反，他会按照事件处理函数的添加顺序执行。

分享到：

http://devblog.eduhub.nl/frontend-develo ...

2009-06-08 21:52
浏览 3688
评论(1)
查看更多

1 楼 haiyang5210 2011-05-16

http://www.everbox.com/f/VObO2Ruw2T4uyAVEq14ehHppDl

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论