頁面狀態改變會觸發的一些事件

原文地址：github.com/Monine/stud…

按照頁面加載、切換、關閉三個動做講解頁面狀態改變會觸發的一些事件

加載頁面

1. 文檔解析完成觸發 readystatechange 事件，document.readyState === 'interactive'，接着當即觸發 DOMContentLoaded 事件。

   以上兩個事件是相同的，表示同一個意思，文檔已經完成加載，文檔已被解析，可是諸如圖像，樣式表和框架之類的子資源仍在加載。惟一的不一樣點在於全部瀏覽器都支持 readystatechange 事件，IE8 及如下不支持 DOMContentLoaded 事件。

2. 全部依賴資源加載完畢觸發 readystatechange 事件，document.readyState === 'complete'，接着當即觸發 load 事件。

   以上兩個事件也是相同的，表示同一個意思，文檔和全部依賴資源都已加載完成。

3. 觸發 pageshow 事件

   此事件除了在 load 事件觸發後初始化頁面時觸發以外，當一條會話歷史記錄被執行的時候也將會觸此事件（包括 後退 / 前進 按鈕操做）。

頁面可見狀態切換

當用戶最小化網頁或者瀏覽到其餘標籤的網頁時，API 將發送一個關於當前頁面的可見信息的事件 visibilitychange，對應的狀態標識是 document.visibilityState。

常見使用場景如視頻或音樂播放頁面，當用戶改變當前頁面可見狀態時，自動開啓或暫停播放。

詳細參考：Page Visibility API

關閉頁面

1. 頁面關閉以前觸發 beforeunload 事件

   當瀏覽器窗口關閉或者刷新時，會觸發 beforeunload 事件。當前頁面不會直接關閉，能夠點擊肯定按鈕關閉或刷新，也能夠取消關閉或刷新（取消默認行爲）。

   若是處理函數的 event 對象的 returnValue 屬性賦值非空字符串，瀏覽器會彈出一個對話框，來詢問用戶是否肯定要離開當前頁面。有些瀏覽器會將返回的字符串展現在彈框裏，但有些其餘瀏覽器只展現它們自定義的信息。沒有賦值時，該事件不作任何響應。

   須要注意的是，爲了不沒必要要的彈窗，若是頁面並無發生交互瀏覽器可能不會展現在 beforeunload 事件中引起的彈框，甚至可能即便發生交互了也直接不顯示。

2. 觸發 pagehide 事件

   與 pageshow 事件大同小異，在 beforeunload 事件以後 unload 事件以前觸發，一樣在會話歷史記錄被執行的時候也將會觸此事件（包括 後退 / 前進 按鈕操做）。

3. 頁面被卸載時觸發 unload 事件

   當文檔或一個子資源（iframe）正在被卸載時，觸發 unload事件，父 iframe 會在子 iframe 卸載以前卸載。

   詳細參考：unload

---

還有更多其它事件嗎？