javascript中beforeunload事件及DOMContentLoaded事件怎么用

本篇內容介紹了“javascript中beforeunload事件及DOMContentLoaded事件怎么用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

1.beforeunload 事件

之所以有發生在 window 對象上的 beforeunload 事件，是為了讓開發人員有可能在頁面卸載前 阻止這一操作。這個事件會在瀏覽器卸載頁面之前觸發，可以通過它來取消卸載并繼續使用原有頁面。 但是，不能徹底取消這個事件，因為那就相當于讓用戶無法離開當前頁面了。為此，這個事件的意圖是 將控制權交給用戶。顯示的消息會告知用戶頁面行將被卸載(正因為如此才會顯示這個消息)，詢問用 戶是否真的要關閉頁面，還是希望繼續留下來如圖所示。 為了顯示這個彈出對話框，必須將 event.returnValue 的值設置為要顯示給用戶的字符串(對 IE及 Fiefox而言)，同時作為函數的值返回(對 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 事件會在頁面中的一切都加載完畢時觸發，但這個過程可能會因為要 加載的外部資源過多而頗費周折。而 DOMContentLoaded 事件則在形成完整的 DOM樹之后就會觸發， 不理會圖像、JavaScript 文件、CSS 文件或其他資源是否已經下載完畢。與 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 事件，通常這個事件 既可以添加事件處理程序，也可以執行其他 DOM操作。這個事件始終都會在 load 事件之前觸發。 對于不支持 DOMContentLoaded 的瀏覽器，我們建議在頁面加載期間設置一個時間為 0毫秒的超 時調用，如下面的例子所示。

setTimeout(function(){

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

}, 0);

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

“javascript中beforeunload事件及DOMContentLoaded事件怎么用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！