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

1.beforeunload 事件

之所以有發(fā)生在 window 對象上的 beforeunload 事件，是為了讓開發(fā)人員有可能在頁面卸載前 阻止這一操作。這個事件會在瀏覽器卸載頁面之前觸發(fā)，可以通過它來取消卸載并繼續(xù)使用原有頁面。 但是，不能徹底取消這個事件，因為那就相當于讓用戶無法離開當前頁面了。為此，這個事件的意圖是 將控制權(quán)交給用戶。顯示的消息會告知用戶頁面行將被卸載(正因為如此才會顯示這個消息)，詢問用 戶是否真的要關(guān)閉頁面，還是希望繼續(xù)留下來如圖所示。 為了顯示這個彈出對話框，必須將 event.returnValue 的值設(shè)置為要顯示給用戶的字符串(對 IE及 Fiefox而言)，同時作為函數(shù)的值返回(對 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 事件，也都會彈出這個對話框詢問用戶是否 真想離開。Opera 11及之前的版本不支持 beforeunload 事件。

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

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

alert("Content loaded.");

});

2.DOMContentLoaded 事件

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

setTimeout(function(){

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

}, 0);

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

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