由于html是從上至下加載的，通常我們如果在head部分引入javascript文件，那么我們都會在javascript的開頭添加window.onload事件，防止在文檔問加載完成時進行DOM操作所出現的錯誤。如果有多個javascript文件，那么極有可能出現多個window.onload事件，但是最后起作用的只有一個，這時候就需要使用事件綁定來解決這個問題了。
IE方式
attachEvent(事件名稱, 函數)，綁定事件處理函數
detachEvent(事件名稱, 函數)，解除綁定
DOM方式
addEventListener(事件名稱,函數, 捕獲)
removeEventListener(事件名稱, 函數, 捕獲)
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <script> window.onload=function () { var oBtn=document.getElementById('btn1'); oBtn.onclick=function () { alert('a'); }; oBtn.onclick=function () { alert('b'); }; }; </script> </head> <body> <input id="btn1" type="button" value="按鈕" /> </body> </html> 這段代碼，運行結果是彈出b，因為有兩個oBtn的點擊事件，但是只執行了最后一個，這時候就體現出事件綁定的重要性了。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <script> window.onload=function () { var oBtn=document.getElementById('btn1'); //IE瀏覽器 if(oBtn.attachEvent) { oBtn.attachEvent('onclick', function () { alert('a'); }); oBtn.attachEvent('onclick', function () { alert('b'); }); } //其他瀏覽器 else { oBtn.addEventListener('click', function () { alert('a'); }, false); oBtn.addEventListener('click', function () { alert('b'); }, false); } }; </script> </head> <body> <input id="btn1" type="button" value="按鈕" /> </body> </html> 當你使用事件綁定的時候，那么兩次點擊事件都會執行，只是執行順序在不同瀏覽器是不同的。在IE中是自下而上執行，而在其他瀏覽器中是自上而下，不過由于alert的特殊性我們可以看出差別，其他語句基本等同于沒有差別，但是在對于一些對時間要求嚴格是事件的使用時還是需要注意的，比如之前有一篇文章圖片輪播中的setInterval對時間的細微的差別最后導致滾動混亂。 基于原生javascript的圖片輪播domo
最后將我們的代碼整理成函數，便于之后的使用
function myAddEvent(obj, ev, fn) { if(obj.attachEvent) { obj.attachEvent('on'+ev, fn); } else { obj.addEventListener(ev, fn, false); } } 這時候如果需要使用多個window.onload事件其實就和使用多個oBtn.onclick事件差不多了。如下調用函數即可。
myAddEvent(window,'load',function () { alert('a'); }); myAddEvent(window,'load',function () { alert('b'); 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
