1. 程式人生 > >JS的onload執行順序

JS的onload執行順序

可能你也碰到過這種情況 就是在 js 的程式碼中用了 window.onload  可能會影響到 body 中的onload 事件。你可以全寫在 body 中,也可以全放到 window.onload 中,但是這樣並不是很方便,有時我們需要兩個同時用到。這時就要用 window.attachEvent  window.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>