1. 程式人生 > >JS中window.onload事件詳解

JS中window.onload事件詳解

  1. window.onload出現的原因?
     我們都知道頁面的程式碼順序是從上往下進行載入,很多時候我們要對頁面中的某一個模組進行操作,這時候我們常常使用javascript程式碼來進行操作。為了能夠保證操作的模組或物件在js程式碼之前就載入了,我們不得不把js程式碼放在頁面的底端。但是我們在設計頁面的時候,為了把js程式碼放在一起,或者一個讓頁面更加簡潔的位置,那就有可能出現程式碼中操作的物件未被載入的情況,那麼我們該如何去解決呢?這時候window.onload就被有了存在的意義了。

  2. window.onload是什麼?
     window.onload是一個事件,在文件載入完成後能立即觸發,並且能夠為該事件註冊事件處理函式。將要對物件或者模組進行操作的程式碼存放在處理函式中。即:window.onload =function (){這裡寫操作的程式碼};

  3. 發生要對物件進行,而物件還未被載入,導致相當於無操作的例項:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>操作物件未被載入</title>
<script type="text/javascript">
document.getElementById("s").style.color="green"; </script> </head> <body> <span id="s">要堅強,當然是選擇原諒他啊!!!</span> </body> </html>

 
結果:操作物件被未載入的結果
 

  1. 使用window.onload()方法處理的情況的例項:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>使用window.onload(),操作物件 已被載入</title> <script type="text/javascript"> window.onload = function(){ document.getElementById("s").style.color="green"; }; </script> </head> <body> <span id="s">要堅強,當然是選擇原諒他啊!!!</span> </body> </html>

 
使用window.onload()方法事件的結果:
使用window.onload的結果

相關推薦

JSwindow.onload事件

window.onload出現的原因?  我們都知道頁面的程式碼順序是從上往下進行載入,很多時候我們要對頁面中的某一個模組進行操作,這時候我們常常使用javascript程式碼來進行操作。為了能夠保

js的 || 與 && 運算子

這篇文章主要介紹了js中的 || 與 && 運算子詳解,需要的朋友可以參考下 一 js中邏輯運算子在開發中可以算是比較常見的運算子了,主要有三種:邏輯與&&、邏輯或||和邏輯非!。 當&&和|| 連線語句時,兩邊的

jstypeof和instanceof

類陣列物件和物件 文章開始先來看一下js中陣列物件和類陣列物件。在js中陣列是一個物件,陣列物件繼承自Array物件 var arr1 = []; var arr2 = new Array(); 這兩種方式定義出來的陣列,由於Array.p

JSsetTimeout()的用法

setTimeout( ) 是屬於 window 的 method, 但我們都是略去 window 這頂層容器名稱, 這是用來設定一個時間, 時間到了, 就會執行一個指定的 method 請先看以下一個簡單, 這是沒有實際用途的例子, 只是用來示範 setTimeout(

JS正則表示式及最基本的判斷手機號,郵箱,身份證

    首先最基本的符號型別及含義整理一下。     1,最基本的符號:^  $  *  +  ?         ^    代表字串的開始位置 &nbs

JS的this原理

this的用法 需要關注的是,不同調用位置上的呼叫形式,決定了this的指向; 獨立呼叫 預設繫結規則:this繫結給window; 在嚴格模式下,預設繫結規則會把this繫結undefined上; function foo() { consol

js的$.ajax()方法

1.url: 要求為String型別的引數,(預設為當前頁地址)傳送請求的地址。 2.type: 要求為String型別的引數,請求方式(post或get)預設為get。注意其他http請求方法,例如put和delete也可以使用,但僅部分瀏覽器支援。 3.timeou

D3.jsRadial Cluster Dendrogram

Radial Cluster Dendrogram 上一篇聊了Cluster Dendrogram,這一篇對照著聊一聊Radial Cluster Dendrogram. “radial”意思為放射狀的,因此,估計你也能猜到Radial Cluster Den

HTML5video元素事件

事 件的處理方式 在利用video元素或audio元素讀取或播放媒體資料的時候,會觸發一系的事件,如果使用JavaScript指令碼來捕捉這些事件,就可以對這些事件進行處理了。對這些事件的捕捉及處理,可以按兩種方式來進行。 第一種是監聽的方式,使用video元素或au

【2017-11+10】 JS正則表示式

在JS的開發過程中,很多時候都需要驗證表單的正確性;使用正則表示式能夠很好的簡化表單的驗證過程。 在JS中,內建了 RegExp 物件,用來進行正則匹配。 一. RegExp 物件的使用

html body的onload事件

       瀏覽器是邊載入邊執行的,先載入head 再載入body。瞭解body的onload事件的執行時間是非常重要的。onload事件是在網頁載入完畢時執行的。當我們在JavaScript中想要操作某元素時而此元

Python-JS事件

err 右鍵 win 樣式 重新 形參 stop can 失去 目錄一、JS中的事件二、JS中的事件分類: 1.事件初級: 2.事件參數 Event 3.鼠標事件 4.鍵盤事件 *** 5.表單事件 *** 6.文檔事件 * 7.圖

JSwindow.showModalDialog()

window.showModalDialog()方法用來建立一個顯示HTML內容的模態對話方塊。  window.showModelessDialog()方法用來建立一個顯示HTML內容的非模態對話方塊。  使用方法: vReturnValue = window.sho

頁面載入完成之後執行js函式window.onload 和 $().ready(function) 以及 的同級函式

頁面載入完成之後執行js函式window.onload 和 $().ready(function) 以及 <body onload="">的同級函式詳解 1.window.onlo

js keyup、keypress和keydown事件

rgs spa 小鍵盤 ansi 使用方法 form 單個 sage ges js keyup、keypress和keydown事件都是有關於鍵盤的事件 當一個按鍵被pressed 或released在每一個現代瀏覽器中,都可能有三種客戶端事件。 keydown even

利用chrome瀏覽器進行js除錯並找出元素繫結的點選事件

大家有沒有遇到這樣的一個問題,我們在分析一些大型電子商務平臺的Web前端指令碼時,想找到一個元素繫結的點選事件,並不是那麼容易,因為有些前端指令碼封裝的比較隱蔽,甚至有些加密指令碼,用傳統的查詢元素ID、或者頁面原始碼方法去找,可能最後徒勞無功。下面我來介紹利用chrome瀏覽器來查詢元素繫

【轉載】C# 的委託和事件(:簡單易懂的講解) C# 的委託和事件()

本文轉載自http://www.cnblogs.com/SkySoot/archive/2012/04/05/2433639.html C# 中的委託和事件(詳解) C# 中的委託和事件

js事件js事件封裝函式,js跨瀏覽器事件處理機制

一、事件流 事件流描述的是從頁面中接受事件的順序。 IE的事件流是事件冒泡流,而Netscape的事件流是事件捕獲流 1、事件冒泡 事件冒泡,即事件最開始由最具體的元素(文件中巢狀層次最深的那個節點)接收,然後逐級向上轉播至最不具體的節點(文件)。 2、事件捕獲 事件捕獲的

JS事件(二) —— 事件處理程式(事件的繫結)

事件繫結方法 方法一:直接在HTML標籤中繫結 在html標籤中新增“on”+事件名稱的屬性來繫結事件 事件處理程式可直接寫在屬性值當中 <div class="demo" onclick="console.log(this)">&l

javascriptmouseover和mouseout事件

  與 mouseenter 事件不同,不論滑鼠指標穿過被選元素或其子元素,都會觸發 mouseover 事件。只有在滑鼠指標穿過被選元素時,才會觸發 mouseenter 事件。   與 mouseout 事件不同,只有在滑鼠指標離開被選元素時,才會觸發