window.onload使用指南
網(wǎng)頁(yè)中的javascript腳本代碼往往需要在文檔加載完成后才能夠去執(zhí)行，否則可能導(dǎo)致無法獲取對(duì)象的情況，為了避免這種情況的發(fā)生，可以使用以下兩種方式:
一.將腳本代碼放在網(wǎng)頁(yè)的低端，這樣在運(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ù)。簡(jiǎn)單介紹一下語(yǔ)法格式:
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ù)的效果是一樣的，簡(jiǎn)單介紹一下語(yǔ)法格式:
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語(yǔ)句判斷對(duì)象是否具有addEventListener屬性，如果有這使用addEventListener()函數(shù)，否則使用attachEvent()函數(shù)
相關(guān)文章
擴(kuò)展String功能方法...2006-09-09
這篇文章主要介紹了js中l(wèi)et能否完全替代IIFE，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
js實(shí)現(xiàn)無縫循環(huán)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)無縫循環(huán)滾動(dòng)的具體代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
上傳文件時(shí),選擇了文件后想清空文件路徑，經(jīng)搜索發(fā)現(xiàn)個(gè)不錯(cuò)的方法在此與大家分享下，感興趣的朋友不要錯(cuò)過2013-10-10
JsRender for object語(yǔ)法簡(jiǎn)介
這篇文章主要介紹了JsRender for object語(yǔ)法,以實(shí)例形式講述了for Object的用法,需要的朋友可以參考下2014-10-10
十個(gè)你必須要會(huì)的TypeScript技巧分享
學(xué)習(xí)Typescript通常是一個(gè)重新發(fā)現(xiàn)的過程。這篇文章為大家整理了十個(gè)你必須要會(huì)的TypeScript技巧，希望對(duì)大家學(xué)習(xí)TypeScript有所幫助2023-06-06
js用正則表達(dá)式來驗(yàn)證表單(比較齊全的資源)
在學(xué)習(xí)網(wǎng)頁(yè)中的表單驗(yàn)證，順便學(xué)習(xí)下正則表達(dá)式,在網(wǎng)上找了后發(fā)現(xiàn)了一個(gè)比較齊全的資源，稍微進(jìn)行了一下排版，喜歡的朋友可以收藏2013-11-11
JavaScript中setTimeout的那些事兒到底有什么？setTimeout單線程、延遲時(shí)間等，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了在js中如何準(zhǔn)確的判斷一個(gè)變量的類型，文中代碼非常詳細(xì)，幫助大家更好的學(xué)習(xí)，有興趣的朋友可以了解下2020-06-06
原生JS實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕+搜索框功能
這篇文章主要介紹了原生js實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕+搜索框功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12