window.onload用法詳解

時間  2020-08-03
標籤 window.onload window onload 用法 詳解 欄目 JavaScript 简体版
原文   原文鏈接

    網頁中的javaScript腳本代碼每每須要在文檔加載完成後纔可以去執行，不然可能致使沒法獲取對象的狀況，爲了不這種狀況的發生，可使用如下兩種方式:javascript

一.將腳本代碼放在網頁的底端，這樣在運行腳本代碼的時候，能夠確保要操做的對象已經加載完成。php

二.經過window.onload來執行腳本代碼。css

第一種方式感受比較凌亂（其實推薦使用），每每咱們須要將腳本代碼放在一個更爲合適的地方，那麼window.onload方式就是一個良好的選擇。window.onload是一個事件，當文檔加載完成以後就會觸發該事件，能夠爲此事件註冊事件處理函數，並將要執行的腳本代碼放在事件處理函數中，因而就能夠避免獲取不到對象的狀況。先看一段代碼實例:html

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/"/> 
<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對象，因此設置也就不可以成功。代碼修改以下:  
java

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/"/> 
<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>

    以上代碼實現了將div背景顏色設置爲#F90的目的。緣由就是講設置背景顏色的代碼放置在window.onload的事件處理函數中，只有當文檔加載完成後，纔會執行事件處理函數，也纔會執行設置背景顏色的腳本代碼。
瀏覽器

事件處理函數綁定:ide

方式一:
window.onload=function(){}，在以上代碼中就是使用此種方式爲window.onload事件綁定事件處理函數，這裏綁定的是一個匿名函數，固然也能夠綁定非匿名函數，代碼實例以下:
函數

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/"/> 
<title>window.onload用法詳解-螞蟻部落</title>
<script type="text/javascript">
window.onload=function myalert()
{
  alert("綁定成功！");
}
</script>
</head>
<body>
 
</body>
</html>

以上代碼能夠將爲名myalert方法綁定到window.onload事件上，可是不能以如下方式爲此事件綁定多個事件處理函數:
spa

window.onload=function a(){}
window.onload=function b(){}

以上代碼並不能爲window.onload事件綁定多個事件處理函數，而是最後一個會覆蓋前面的全部函數。不過代碼能夠變通一下:
xml

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/"/> 
<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">   
<meta name="author" content="http://www.softwhy.com/"/> 
<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">   
<meta name="author" content="http://www.softwhy.com/"/> 
<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">   
<meta name="author" content="http://www.softwhy.com/"/> 
<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()函數。

 

原文來源：http://www.softwhy.com/forum.php?mod=viewthread&tid=6191

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程