window.addEventListener來解決讓一個js事件執行多個函數

可能你也碰到過這種情況,就是在js的代碼中用了window.onload後,可能會影響到body中的onload事件。你可以全寫在body中,也可以全放到window.onload中,但是這樣並不是很方便,有時我們需要兩個同時用到。這時就要用window.attachEvent和window.addEventListener來解決一下。 

下面是一個解決方法。至於attachEvent和addEventListener的用法,可以自己Google或百度一下。 
複製代碼代碼如下:

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

發佈了17 篇原創文章 · 獲贊 23 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章