JS中window.onload事件詳解

阿新 • • 發佈：2019-01-16

window.onload出現的原因？
我們都知道頁面的程式碼順序是從上往下進行載入，很多時候我們要對頁面中的某一個模組進行操作，這時候我們常常使用javascript程式碼來進行操作。為了能夠保證操作的模組或物件在js程式碼之前就載入了，我們不得不把js程式碼放在頁面的底端。但是我們在設計頁面的時候，為了把js程式碼放在一起，或者一個讓頁面更加簡潔的位置，那就有可能出現程式碼中操作的物件未被載入的情況，那麼我們該如何去解決呢？這時候window.onload就被有了存在的意義了。
window.onload是什麼？
window.onload是一個事件，在文件載入完成後能立即觸發，並且能夠為該事件註冊事件處理函式。將要對物件或者模組進行操作的程式碼存放在處理函式中。即：window.onload =function (){這裡寫操作的程式碼};
發生要對物件進行，而物件還未被載入，導致相當於無操作的例項：

<!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>

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

使用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的結果

JS中window.onload事件詳解

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

js中的 || 與 && 運算子詳解

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

js中typeof和instanceof詳解

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

JS中setTimeout()的用法詳解

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.js中Radial Cluster Dendrogram詳解

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

HTML5中video元素事件詳解

事件的處理方式在利用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.圖

JS中window.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

javascript中mouseover和mouseout事件詳解

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

JS中window.onload事件詳解

相關推薦