不經常使用卻頗有妙用的事件及方法

1 visibilitychange事件

觸發條件：瀏覽器標籤頁被隱藏或顯示的時候會觸發visibilitychange事件.

使用場景：當標籤頁顯示或者隱藏時，觸發一些業務邏輯

document.addEventListener("visibilitychange", function() {
  console.log( document.visibilityState );
});

2 storage事件

觸發條件：使用localStorage or sessionStorage存儲或者修改某個本地存儲時

使用場景：標籤頁間通訊

// AB頁面同源
// 在A 頁面
window.addEventListener('storage', (e) => {console.log(e)})

// 在B 頁面，向120打個電話
localStorage.setItem('makeCall','120')

// 而後能夠在A頁面間有輸出, 能夠看出A頁面 收到了B頁面的通知
...key: "makeCall", oldValue: "119", newValue: "120", ...

3 beforeunload事件

觸發條件：當頁面的資源將要卸載(及刷新或者關閉標籤頁前). 當頁面依然可見，而且該事件能夠被取消只時

使用場景：關閉或者刷新頁面時彈窗確認，關閉頁面時向後端發送報告等

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
  return confirmationMessage;              // Gecko, WebKit, Chrome <34
});

4 navigator.sendBeacon

這個方法主要用於知足 統計和診斷代碼 的須要，這些代碼一般嘗試在卸載（unload）文檔以前向web服務器發送數據。過早的發送數據可能致使錯過收集數據的機會。然而， 對於開發者來講保證在文檔卸載期間發送數據一直是一個困難。由於用戶代理一般會忽略在卸載事件處理器中產生的異步 XMLHttpRequest 。

使用 sendBeacon() 方法，將會使用戶代理在有機會時異步地向服務器發送數據，同時不會延遲頁面的卸載或影響下一導航的載入性能。這就解決了提交分析數據時的全部的問題：使它可靠，異步而且不會影響下一頁面的加載。此外，代碼實際上還要比其餘技術簡單！

注意：該方法在IE和safari沒有實現

使用場景：發送崩潰報告

window.addEventListener('unload', logData, false);

function logData() {
    navigator.sendBeacon("/log", analyticsData);
}