在做H5開(kāi)過(guò)程中，交互響應(yīng)事件是經(jīng)常要用到的，前面我們通過(guò)《contextmenu事件在H5中應(yīng)方法及實(shí)例》介紹了contextmenu事件在H5中的應(yīng)用，接下由南昌APP開(kāi)發(fā)公司百恒網(wǎng)絡(luò)技術(shù)人員向大家介紹beforeunload 事件和DOMContentLoaded事件。

1.beforeunload 事件

之所以有發(fā)生在 window 對(duì)象上的 beforeunload 事件，是為了讓開(kāi)發(fā)人員有可能在頁(yè)面卸載前 阻止這一操作。這個(gè)事件會(huì)在瀏覽器卸載頁(yè)面之前觸發(fā)，可以通過(guò)它來(lái)取消卸載并繼續(xù)使用原有頁(yè)面。 但是，不能徹底取消這個(gè)事件，因?yàn)槟蔷拖喈?dāng)于讓用戶(hù)無(wú)法離開(kāi)當(dāng)前頁(yè)面了。為此，這個(gè)事件的意圖是 將控制權(quán)交給用戶(hù)。顯示的消息會(huì)告知用戶(hù)頁(yè)面行將被卸載(正因?yàn)槿绱瞬艜?huì)顯示這個(gè)消息)，詢(xún)問(wèn)用 戶(hù)是否真的要關(guān)閉頁(yè)面，還是希望繼續(xù)留下來(lái)如圖所示。 為了顯示這個(gè)彈出對(duì)話(huà)框，必須將 event.returnValue 的值設(shè)置為要顯示給用戶(hù)的字符串(對(duì) IE及 Fiefox而言)，同時(shí)作為函數(shù)的值返回(對(duì) Safari和 Chrome而言)，如下面的例子所示。

EventUtil.addHandler(window, "beforeunload", function(event){

event = EventUtil.getEvent(event);

var message = "I'm really going to miss you if you go.";

event.returnValue = message;

return message;

});

IE和 Firefox、Safari和 Chrome都支持 beforeunload 事件，也都會(huì)彈出這個(gè)對(duì)話(huà)框詢(xún)問(wèn)用戶(hù)是否 真想離開(kāi)。Opera 11及之前的版本不支持 beforeunload 事件。

DOMContentLoaded 事件 如前所述，window 的 load 事件會(huì)在頁(yè)面中的一切都加載完畢時(shí)觸發(fā)，但這個(gè)過(guò)程可能會(huì)因?yàn)橐? 加載的外部資源過(guò)多而頗費(fèi)周折。而 DOMContentLoaded 事件則在形成完整的 DOM樹(shù)之后就會(huì)觸發(fā)， 不理會(huì)圖像、JavaScript 文件、CSS 文件或其他資源是否已經(jīng)下載完畢。與 load 事件不同， DOMContentLoaded 支持在頁(yè)面下載的早期添加事件處理程序，這也就意味著用戶(hù)能夠盡早地與頁(yè)面 進(jìn)行交互。 要處理 DOMContentLoaded 事件，可以為 document 或 window 添加相應(yīng)的事件處理程序(盡管 這個(gè)事件會(huì)冒泡到 window，但它的目標(biāo)實(shí)際上是 document)。來(lái)看下面的例子。

EventUtil.addHandler(window, "DOMContentLoaded", function(event){

alert("Content loaded.");

});

2.DOMContentLoaded 事件

對(duì)象不會(huì)提供任何額外的信息(其 target 屬性是 document)。 IE9+、Firefox、Chrome、Safari 3.1+和 Opera 9+都支持 DOMContentLoaded 事件，通常這個(gè)事件 既可以添加事件處理程序，也可以執(zhí)行其他 DOM操作。這個(gè)事件始終都會(huì)在 load 事件之前觸發(fā)。 對(duì)于不支持 DOMContentLoaded 的瀏覽器，我們建議在頁(yè)面加載期間設(shè)置一個(gè)時(shí)間為 0毫秒的超 時(shí)調(diào)用，如下面的例子所示。

setTimeout(function(){

//在此添加事件處理程序

}, 0);

這段代碼的實(shí)際意思就是：“在當(dāng)前 JavaScript 處理完成后立即運(yùn)行這個(gè)函數(shù)。”在頁(yè)面下載和構(gòu)建 期間，只有一個(gè) JavaScript 處理過(guò)程，因此超時(shí)調(diào)用會(huì)在該過(guò)程結(jié)束時(shí)立即觸發(fā)。至于這個(gè)時(shí)間與 DOMContentLoaded 被觸發(fā)的時(shí)間能否同步，主要還是取決于用戶(hù)使用的瀏覽器和頁(yè)面中的其他代碼。 為了確保這個(gè)方法有效，必須將其作為頁(yè)面中的第一個(gè)超時(shí)調(diào)用;即便如此，也還是無(wú)法保證在所有環(huán) 境中該超時(shí)調(diào)用一定會(huì)早于 load 事件被觸發(fā)。

本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣大技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò)http://m.51yjwy.com/如轉(zhuǎn)載請(qǐng)注明出處!