網頁中的javascript腳本代碼往往需要在文檔加載完成后才能夠去執行，否則可能導致無法獲取對象的情況，為了避免這種情況的發生，可以使用以下兩種方式:
一.將腳本代碼放在網頁的低端，這樣在運行腳本代碼的時候，可以確保要操作的對象已經加載完成。
二.通過window.onload來執行腳本代碼。
第一種方式感覺比較凌亂（其實推薦使用），往往我們需要將腳本代碼放在一個更為合適的地方，那么window.onload方式就是一個更好的選擇。window.onload是一個事件，當文檔加載完成之后就會觸發該事件，可以為此事件注冊事件處理函數，并將要執行的腳本代碼放在事件處理函數中，于是就可以避免獲取不到對象的情況。先看一段代碼實例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>window.onload用法</title><style type="text/css">#bg{ width:100px; height:100px; border:2px solid red;}</style><script type="text/javascript">document.getElementById("bg").style.backgroundColor="#F90";</script></head><body> <div id="bg"></div></body></html>以上代碼的初衷是向將div的背景顏色設置為#F90，但是并沒有實現此效果，這是因為代碼是順序執行的，當執行到document.getElementById("#bg").style.backgroundColor="#F90"這一句的時候，還沒有加載到此div對象，所以設置也就不能夠成功。代碼修改如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>位置高度div垂直居中</title><style type="text/css">#bg{ width:100px; height:100px; border:2px solid red;}</style><script type="text/javascript">window.onload=function(){ document.getElementById("bg").style.backgroundColor="#F90";}</script></head><body> <div id="bg"></div></body></html>原因就是講設置背景顏色的代碼放置在window.onload的事件處理函數中，只有當文檔加載完成后，才會執行事件處理函數，也才會執行設置背景顏色的腳本代碼。
事件處理函數綁定:
方式一:
window.onload=function(){}，在以上代碼中就是使用此種方式為window.onload事件綁定事件處理函數，這里綁定的是一個匿名函數，當然也可以綁定非匿名函數，代碼實例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>window.onload用法詳解</title><script type="text/javascript">window.onload=function myalert(){");}</script></head><body></body></html>以上代碼可以將為名myalert方法綁定到window.onload事件上，但是不能以以下方式為此事件綁定多個事件處理函數:
window.onload=function a(){}
window.onload=function b(){}
以上代碼并不能為window.onload事件綁定多個事件處理函數，而是最后一個會覆蓋前面的所有函數。不過代碼可以變通一下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>window.onload用法</title><style type="text/css">#bg{ width:100px; height:100px; border:2px solid red;}</style><script type="text/javascript">window.onload=function(){ function a(){ document.getElementById("bg").style.backgroundColor="#F90"; } function b(){ document.getElementById("bg").style.width="200px"; } a(); b();}</script></head><body> <div id="bg"></div></body></html>以上代碼實現了綁定多個事件處理函數同樣的效果。
方式二:
可以使用addEventListener()和attachEvent()為onload事件綁定事件處理函數，下面分別介紹一下：
addEventListener()是當前標準的一種事件處理函數綁定方式，但是IE8和IE8以下的瀏覽器并不支持此方式，實例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>window.onload用法</title><style type="text/css">#bg{ width:100px; height:100px; border:2px solid red;}</style><script type="text/javascript">window.addEventListener("load",bg,false);window.addEventListener("load",changeW,false);function bg(){ document.getElementById("bg").style.backgroundColor="#F90";}function changeW(){ document.getElementById("bg").style.width="200px";}</script></head><body> <div id="bg"></div></body></html>以上代碼可以為window.onload事件綁定多個事件處理函數。簡單介紹一下語法格式:
addEventListener("type",函數名,false)
addEventListener()函數具有三個參數，第一個參數事件類型，需要注意的是，事件類型名稱前面不能有on，例如window.onload事件，在這個地方只能寫作load，第二個參數是要綁定的函數名稱，第三個參數一般為false。
使用attachEvent()函數綁定事件處理函數:
IE9之前的的IE瀏覽器不支持addEventListener()函數，所以attachEvent()函數就有了用武之地了，代碼實例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>window.onload用法</title><style type="text/css">#bg{ width:100px; height:100px; border:2px solid red;}</style><script type="text/javascript">window.attachEvent("onload",bg);window.attachEvent("onload",changeW);function bg(){ document.getElementById("bg").style.backgroundColor="#F90";}function changeW(){ document.getElementById("bg").style.width="200px";}</script></head><body> <div id="bg"></div></body></html>以上代碼的效果和使用addEventListener()函數的效果是一樣的，簡單介紹一下語法格式:
addEventListener("type",函數名)
此函數只有兩個參數，第一個參數是事件類型，不過它和addEventListener()的第一個參數的作用是一樣，但是名稱有所區別，名稱前面是具有"on"，第二個參數就是要綁定的事件處理函數名稱。為了兼容各瀏覽器，需要將以上代碼進行改造，實例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>window.onload用法</title><style type="text/css">#bg{ width:100px; height:100px; border:2px solid red;}</style><script type="text/javascript">if(window.addEventListener){ window.addEventListener("load",bg,false); window.addEventListener("load",changeW,false);}else{ window.attachEvent("onload",bg); window.attachEvent("onload",changeW);}function bg(){ document.getElementById("bg").style.backgroundColor="#F90";}function changeW(){ document.getElementById("bg").style.width="200px";}</script></head><body> <div id="bg"></div></body></html>以上代碼代碼解決了各大瀏覽器的兼容性問題。在上面代碼中使用以下代碼進行判斷:
if(object.addEventListener){ object.addEventListener();}else{ object.attachEvent();}通過if語句判斷對象是否具有addEventListener屬性，如果有這使用addEventListener()函數，否則使用attachEvent()函數
新聞熱點
疑難解答
