window.onload使用指南_javascript技巧
- WBOY原創
- 2016-05-16 15:39:401814瀏覽
網頁中的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()函數