caoporm97国产在线视频|欧美性XXXXX精品|一本一道久久a久久精品综合开|精品久久久久久久久久久AⅤ|

十年專注于品牌網(wǎng)站建設(shè) 十余年專注于網(wǎng)站建設(shè)_小程序開(kāi)發(fā)_APP開(kāi)發(fā)，低調(diào)、敢創(chuàng)新、有情懷！
南昌百恒網(wǎng)絡(luò)微信公眾號(hào) 掃一掃關(guān)注
小程序
tel-icon全國(guó)服務(wù)熱線：400-680-9298,0791-88117053
掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號(hào)
掃一掃打開(kāi)百恒網(wǎng)絡(luò)微信小程序

百恒網(wǎng)絡(luò)

南昌百恒網(wǎng)絡(luò)

結(jié)合實(shí)例詳細(xì)介紹javascript中l(wèi)oad事件使用方法

baiheng 2016-12-03 8894

JavaScript 中最常用的一個(gè)事件就是 load。當(dāng)頁(yè)面完全加載后（包括所有圖像、JavaScript 文件、 CSS 文件等外部資源），就會(huì)觸發(fā) window 上面的 load 事件。有兩種定義 onload 事件處理程序的方式。
第一種方式是使用如下所示的 JavaScript 代碼：
EventUtil.addHandler(window, "load", function(event){
alert("Loaded!");
});
? ? ? ?這是通過(guò) JavaScript 來(lái)指定事件處理程序的方式，使用了本章前面定義的跨瀏覽器的 EventUtil 對(duì)象。與添加其他事件一樣，這里也給事件處理程序傳入了一個(gè) event 對(duì)象。這個(gè) event 對(duì)象中不包含有關(guān)這個(gè)事件的任何附加信息，，但在兼容 DOM 的瀏覽器中，event.target 屬性的值會(huì)被設(shè)置為 document，而 IE 并不會(huì)為這個(gè)事件設(shè)置 srcElement 屬性。 第二種指定 onload 事件處理程序的方式是為元素添加一個(gè) onload 特性，如下面的例子 所示：
? ? ? ?
? ? ? ?
? ? ? ?
? ? ? ? ? ? ? Load Event Example
? ? ? ?
? ? ? ? ? ? ?
? ? ? ? ? ? ?
? ? ? ?
? ? ? ?一般來(lái)說(shuō)，在 window 上面發(fā)生的任何事件都可以在元素中通過(guò)相應(yīng)的特性來(lái)指定，因?yàn)?在 HTML 中無(wú)法訪問(wèn) window 元素。實(shí)際上，這只是為了保證向后兼容的一種權(quán)宜之計(jì)，但在此南昌網(wǎng)站制作公司百恒網(wǎng)絡(luò)開(kāi)發(fā)工程提示大家所有瀏覽器 都能很好地支持這種方式。我們建議讀者盡可能使用 JavaScript 方式。
? ? ? ?圖像上面也可以觸發(fā) load 事件，無(wú)論是在 DOM中的圖像元素還是 HTML 中的圖像元素。因此， 可以在 HTML 中為任何圖像指定 onload 事件處理程序，例如：?
? ? ? ?
? ? ? ?這樣，當(dāng)例子中的圖像加載完畢后就會(huì)顯示一個(gè)警告框。同樣的功能也可以使用 JavaScript 來(lái)實(shí)現(xiàn)， 例如：?
? ? ? ?var image = document.getElementById("myImage");
? ? ? ?EventUtil.addHandler(image, "load", function(event){
? ? ? ?event = EventUtil.getEvent(event);
? ? ? ?alert(EventUtil.getTarget(event).src);
? ? ? ?});
? ? ? ?這里，使用 JavaScript 指定了 onload 事件處理程序。同時(shí)也傳入了 event 對(duì)象，盡管它也不包含 什么有用的信息。不過(guò)，事件的目標(biāo)是元素，因此可以通過(guò) src 屬性訪問(wèn)并顯示該信息。 在創(chuàng)建新的元素時(shí)，可以為其指定一個(gè)事件處理程序，以便圖像加載完畢后給出提示。此時(shí)， 最重要的是要在指定 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";
? ? ? ?});
? ? ? ?在這個(gè)例子中，首先為 window 指定了 onload 事件處理程序。原因在于，我們是想向 DOM中添 加一個(gè)新元素，所以必須確定頁(yè)面已經(jīng)加載完畢——如果在頁(yè)面加載前操作 document.body 會(huì)導(dǎo)致錯(cuò) 誤。然后，創(chuàng)建了一個(gè)新的圖像元素，并設(shè)置了其 onload 事件處理程序。最后又將這個(gè)圖像添加到頁(yè)面中，還設(shè)置了它的 src 屬性。這里有一點(diǎn)需要格外注意： 新圖像元素不一定要從添加到文檔后才開(kāi)始下載，只要設(shè)置了 src 屬性就會(huì)開(kāi)始下載。 ? ? ? ?

同樣的功能也可以通過(guò)使用 DOM0 級(jí)的 Image 對(duì)象實(shí)現(xiàn)。在 DOM 出現(xiàn)之前，開(kāi)發(fā)人員經(jīng)常使用 Image 對(duì)象在客戶端預(yù)先加載圖像?？梢韵袷褂?img>元素一樣使用 Image 對(duì)象，只不過(guò)無(wú)法將其添加到 DOM 樹(shù)中。下面來(lái)看一個(gè)例子。
? ? ? ?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)建了一個(gè)新圖像的實(shí)例，然后又為它指定了事件處理程序。有的瀏覽器將 Image 對(duì)象實(shí)現(xiàn)為元素，但并非所有瀏覽器都如此，所以最好將它們區(qū)別對(duì)待。還有一些元素也以非標(biāo)準(zhǔn)的方式支持 load 事件。在 IE9+、Firefox、Opera、Chrome和 Safari 3+及 更高版本中，

400-680-9298,0791-88117053
掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號(hào)
掃一掃打開(kāi)百恒網(wǎng)絡(luò)小程序

歡迎您的光顧，我們將竭誠(chéng)為您服務(wù)×