window.onload使用指南
網(wǎng)頁中的javascript腳本代碼往往需要在文檔加載完成后才能夠去執(zhí)行,否則可能導(dǎo)致無法獲取對(duì)象的情況,為了避免這種情況的發(fā)生,可以使用以下兩種方式:
一.將腳本代碼放在網(wǎng)頁的低端,這樣在運(yùn)行腳本代碼的時(shí)候,可以確保要操作的對(duì)象已經(jīng)加載完成。
二.通過window.onload來執(zhí)行腳本代碼。
第一種方式感覺比較凌亂(其實(shí)推薦使用),往往我們需要將腳本代碼放在一個(gè)更為合適的地方,那么window.onload方式就是一個(gè)更好的選擇。window.onload是一個(gè)事件,當(dāng)文檔加載完成之后就會(huì)觸發(fā)該事件,可以為此事件注冊(cè)事件處理函數(shù),并將要執(zhí)行的腳本代碼放在事件處理函數(shù)中,于是就可以避免獲取不到對(duì)象的情況。先看一段代碼實(shí)例:
<!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>
以上代碼的初衷是向?qū)iv的背景顏色設(shè)置為#F90,但是并沒有實(shí)現(xiàn)此效果,這是因?yàn)榇a是順序執(zhí)行的,當(dāng)執(zhí)行到document.getElementById("#bg").style.backgroundColor="#F90"這一句的時(shí)候,還沒有加載到此div對(duì)象,所以設(shè)置也就不能夠成功。代碼修改如下:
<!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>
原因就是講設(shè)置背景顏色的代碼放置在window.onload的事件處理函數(shù)中,只有當(dāng)文檔加載完成后,才會(huì)執(zhí)行事件處理函數(shù),也才會(huì)執(zhí)行設(shè)置背景顏色的腳本代碼。
事件處理函數(shù)綁定:
方式一:
window.onload=function(){},在以上代碼中就是使用此種方式為window.onload事件綁定事件處理函數(shù),這里綁定的是一個(gè)匿名函數(shù),當(dāng)然也可以綁定非匿名函數(shù),代碼實(shí)例如下:
<!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事件上,但是不能以以下方式為此事件綁定多個(gè)事件處理函數(shù):
window.onload=function a(){}
window.onload=function b(){}
以上代碼并不能為window.onload事件綁定多個(gè)事件處理函數(shù),而是最后一個(gè)會(huì)覆蓋前面的所有函數(shù)。不過代碼可以變通一下:
<!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>
以上代碼實(shí)現(xiàn)了綁定多個(gè)事件處理函數(shù)同樣的效果。
方式二:
可以使用addEventListener()和attachEvent()為onload事件綁定事件處理函數(shù),下面分別介紹一下:
addEventListener()是當(dāng)前標(biāo)準(zhǔn)的一種事件處理函數(shù)綁定方式,但是IE8和IE8以下的瀏覽器并不支持此方式,實(shí)例如下:
<!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事件綁定多個(gè)事件處理函數(shù)。簡單介紹一下語法格式:
addEventListener("type",函數(shù)名,false)
addEventListener()函數(shù)具有三個(gè)參數(shù),第一個(gè)參數(shù)事件類型,需要注意的是,事件類型名稱前面不能有on,例如window.onload事件,在這個(gè)地方只能寫作load,第二個(gè)參數(shù)是要綁定的函數(shù)名稱,第三個(gè)參數(shù)一般為false。
使用attachEvent()函數(shù)綁定事件處理函數(shù):
IE9之前的的IE瀏覽器不支持addEventListener()函數(shù),所以attachEvent()函數(shù)就有了用武之地了,代碼實(shí)例如下:
<!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()函數(shù)的效果是一樣的,簡單介紹一下語法格式:
addEventListener("type",函數(shù)名)
此函數(shù)只有兩個(gè)參數(shù),第一個(gè)參數(shù)是事件類型,不過它和addEventListener()的第一個(gè)參數(shù)的作用是一樣,但是名稱有所區(qū)別,名稱前面是具有"on",第二個(gè)參數(shù)就是要綁定的事件處理函數(shù)名稱。為了兼容各瀏覽器,需要將以上代碼進(jìn)行改造,實(shí)例如下:
<!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>
以上代碼代碼解決了各大瀏覽器的兼容性問題。在上面代碼中使用以下代碼進(jìn)行判斷:
if(object.addEventListener){ object.addEventListener(); } else{ object.attachEvent(); }
通過if語句判斷對(duì)象是否具有addEventListener屬性,如果有這使用addEventListener()函數(shù),否則使用attachEvent()函數(shù)
相關(guān)文章
JavaScript?中什么時(shí)候使用?Map?更好
這篇文章主要介紹了JavaScript中什么時(shí)候使用Map更好,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08JavaScript常用截取字符串的三種方式用法區(qū)別實(shí)例解析
本文給大家分享JavaScript常用截取字符串的三種方式及每種用法的區(qū)別解析,感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05JavaScript 消息框效果【實(shí)現(xiàn)代碼】
下面小編就為大家?guī)硪黄狫avaScript 消息框效果【實(shí)現(xiàn)代碼】。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-04JS注釋所產(chǎn)生的bug 即使注釋也會(huì)執(zhí)行
寫js時(shí)出現(xiàn)個(gè)bug一直提示我JAVA類中的一個(gè)屬性沒有,可是明明注釋掉了,后來才知道,JS里即使注釋也會(huì)執(zhí)行2013-11-11讓getElementsByName適應(yīng)IE和firefox的方法
讓getElementsByName適應(yīng)IE和firefox的方法...2007-09-09十分鐘打造AutoComplete自動(dòng)完成效果代碼
十分鐘打造山寨版谷歌AutoComplete,因?yàn)槭鞘昼姶蛟斐鰜淼?,所以只考慮表面效果,其他全部忽略,絕對(duì)的山寨。2009-12-12js判斷手機(jī)系統(tǒng)是android還是ios
本文主要介紹了js判斷手機(jī)系統(tǒng)是android還是ios的方法,具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03十個(gè)開發(fā)人員面臨的最常見的JavaScript問題總結(jié)
今天,JavaScript?是幾乎所有現(xiàn)代?Web?應(yīng)用的核心。這就是為什么JavaScript問題,以及找到導(dǎo)致這些問題的錯(cuò)誤,是?Web?發(fā)者的首要任務(wù)。本文總結(jié)了十個(gè)常見的問題及解決方法,需要的可以參考一下2022-11-11