JS的onload执行顺序

本文介绍了解决JavaScript中window.onload与body.onload冲突的方法,通过使用attachEvent和addEventListener实现多个事件处理函数的绑定。此外还提供了不同浏览器环境下事件监听的兼容性解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

可能你也碰到过这种情况,就是在js的代码中用了window.onload,可能会影响到body中的onload事件。你可以全写在body中,也可以全放到window.onload中,但是这样并不是很方便,有时我们需要两个同时用到。这时就要用window.attachEventwindow.addEventListener来解决一下。

下面是一个解决方法。

if (document.all){

window.attachEvent('onload',函数名)//IE

}

else{

window.addEventListener('load',函数名,false);//firefox

}在近来的工作中,用到了attachEvent方法,该方法可以为某一事件附加其它的处理事件,有时候可能比较有用,这里将其基本用法总结一下。

其语法可以查看《DHTML手册》,里面有详细的说明,这里贴一个例子,该例子来自互联网:

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

综合实例:

window.onload=function(){function1();function2();}

function addLoadEvent(func){

var oldonload=window.onload;

if(typeof window.onload!='function'){

window.onload=func;

}else{

window.onload=function(){

oldonload();

func();

}

}

}

添加要加载执行的事件:

addLoadEvent(aaa);

addLoadEvent(bbb);

因此要想在你的程序中给一个事件指派多个处理过程的话,只要首先判断一下浏览器,然后根据不同的浏览器,选择使用attachEvent还是addEventListener就可以了。实例如下

if (document.all) {

window.attachEvent('onload', handler1);

window.attachEvent('onload', handler2);

} else {

window.addEventListener('load', handler1, false);

window.addEventListener('load', handler2, false);

}

<script type="text/javascript">

window.onload = function(){

var SDmodel = new scrollDoor();

SDmodel.sd(["m01","m02","m03","m04","m05"],["c01","c02","c03","c04","c05"],"sd01","sd02");

MqObj(leftnext,"960","109","10","")

}

</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值