javascript中l(wèi)oad事件如何使用

發(fā)布時間：2022-03-24 16:18:19 來源：億速云閱讀：904 作者：iii 欄目：web開發(fā)

本篇內(nèi)容介紹了“javascript中l(wèi)oad事件如何使用”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

JavaScript 中最常用的一個事件就是 load。當頁面完全加載后（包括所有圖像、JavaScript 文件、 CSS 文件等外部資源），就會觸發(fā) window 上面的 load 事件。有兩種定義 onload 事件處理程序的方式。
第一種方式是使用如下所示的 JavaScript 代碼：
EventUtil.addHandler(window, "load", function(event){
alert("Loaded!");
});
這是通過 JavaScript 來指定事件處理程序的方式，使用了本章前面定義的跨瀏覽器的 EventUtil 對象。與添加其他事件一樣，這里也給事件處理程序傳入了一個 event 對象。這個 event 對象中不包含有關(guān)這個事件的任何附加信息，，但在兼容 DOM 的瀏覽器中，event.target 屬性的值會被設(shè)置為 document，而 IE 并不會為這個事件設(shè)置 srcElement 屬性。第二種指定 onload 事件處理程序的方式是為<body>元素添加一個 onload 特性，如下面的例子所示：
<!DOCTYPE html>
<html>
<head>
<title>Load Event Example</title>
</head>
<body onload="alert('Loaded!')">
</body>
</html>
一般來說，在 window 上面發(fā)生的任何事件都可以在<body/>元素中通過相應(yīng)的特性來指定，因為在 HTML 中無法訪問 window 元素。
圖像上面也可以觸發(fā) load 事件，無論是在 DOM中的圖像元素還是 HTML 中的圖像元素。因此，可以在 HTML 中為任何圖像指定 onload 事件處理程序，例如：
<img src="smile.gif" onload="alert('Image loaded.')">
這樣，當例子中的圖像加載完畢后就會顯示一個警告框。同樣的功能也可以使用 JavaScript 來實現(xiàn)，例如：
var image = document.getElementById("myImage");
EventUtil.addHandler(image, "load", function(event){
event = EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
這里，使用 JavaScript 指定了 onload 事件處理程序。同時也傳入了 event 對象，盡管它也不包含什么有用的信息。不過，事件的目標是<img>元素，因此可以通過 src 屬性訪問并顯示該信息。在創(chuàng)建新的<img>元素時，可以為其指定一個事件處理程序，以便圖像加載完畢后給出提示。此時，最重要的是要在指定 src 屬性之前先指定事件，如下面的例子所示。
EventUtil.addHandler(window, "load", function(){
var image = document.createElement("img");
EventUtil.addHandler(image, "load", function(event){
event = EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
document.body.appendChild(image);
image.src = "smile.gif";
});
在這個例子中，首先為 window 指定了 onload 事件處理程序。原因在于，我們是想向 DOM中添加一個新元素，所以必須確定頁面已經(jīng)加載完畢——如果在頁面加載前操作 document.body 會導致錯誤。然后，創(chuàng)建了一個新的圖像元素，并設(shè)置了其 onload 事件處理程序。最后又將這個圖像添加到頁面中，還設(shè)置了它的 src 屬性。這里有一點需要格外注意：新圖像元素不一定要從添加到文檔后才開始下載，只要設(shè)置了 src 屬性就會開始下載。

同樣的功能也可以通過使用 DOM0 級的 Image 對象實現(xiàn)。在 DOM 出現(xiàn)之前，開發(fā)人員經(jīng)常使用 Image 對象在客戶端預先加載圖像。可以像使用<img>元素一樣使用 Image 對象，只不過無法將其添加到 DOM 樹中。下面來看一個例子。
EventUtil.addHandler(window, "load", function(){
var image = new Image();
EventUtil.addHandler(image, "load", function(event){
alert("Image loaded!");
});
image.src = "smile.gif";
});
在此，我們使用 Image 構(gòu)造函數(shù)創(chuàng)建了一個新圖像的實例，然后又為它指定了事件處理程序。有的瀏覽器將 Image 對象實現(xiàn)為<img>元素，但并非所有瀏覽器都如此，所以最好將它們區(qū)別對待。還有一些元素也以非標準的方式支持 load 事件。在 IE9+、Firefox、Opera、Chrome和 Safari 3+及更高版本中，<script>元素也會觸發(fā) load 事件，以便開發(fā)人員確定動態(tài)加載的 JavaScript 文件是否加載完畢。與圖像不同，只有在設(shè)置了<script>元素的 src 屬性并將該元素添加到文檔后，才會開始下載 JavaScript 文件。換句話說，對于<script>元素而言，指定 src 屬性和指定事件處理程序的先后順序就不重要了。以下代碼展示了怎樣為<script>元素指定事件處理程序。
EventUtil.addHandler(window, "load", function(){
var script = document.createElement("script");
EventUtil.addHandler(script, "load", function(event){
alert("Loaded");
});
script.src = "example.js";
document.body.appendChild(script);
});
這個例子使用了跨瀏覽器的EventUtil對象為新創(chuàng)建的<script>元素指定了onload事件處理程序。此時，大多數(shù)瀏覽器中 event 對象的 target 屬性引用的都是<script>節(jié)點，而在 Firefox 3 之前的版本中，引用的則是 document。IE8 及更早版本不支持<script>元素上的 load 事件。
IE 和 Opera 還支持<link>元素上的 load 事件，以便開發(fā)人員確定樣式表是否加載完畢。例如：
EventUtil.addHandler(window, "load", functio
EventUtil.addHandler(window, "load", function(){
var link = document.createElement("link");
link.type = "text/css";
link.rel= "stylesheet";
EventUtil.addHandler(link, "load", function(event){
alert("css loaded");
});
link.href = "example.css";
document.getElementsByTagName("head")[0].appendChild(link);
});
與<script>節(jié)點類似，在未指定 href 屬性并將<link>元素添加到文檔之前也不會開始下載樣式表。

“javascript中l(wèi)oad事件如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

向AI問一下細節(jié)

javascript中l(wèi)oad事件如何使用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽