將前段時間自己用到的，比較少見，但是功能很強大的事件在這裡總結下，一來自己重新梳理歸檔下，二來，沒用過的同學也可以嘗試用下。其實，這些都是基礎知識，但是基礎是最重要的。還記得老師說過：`基礎不牢，地動山搖`，很有道理！
想要全面瞭解的，可以檢視菜鳥教程DOM
一、onhashchange事件
1.何為hash?
hash為URL中#後面的部分，可以通過window.location.hash來檢視設定；頁面開啟後可以自動滾動定位到指定位置，這個位置設定可以通過 一 使用錨點，比如 <a name="target"></a>, 二 使用id屬性，比如<span id="target"></span>
2.hash特點
- hash值瀏覽器是不會隨請求傳送到伺服器端的，比如當開啟
http://www.example.com/#print伺服器實際收到的請求地址是http://www.example.com/，是不帶hash值的 - hash還有另一個特點，它的改變不會導致頁面重新載入
3.hashchange事件
當hash變化時，會觸發hashchange事件，觸發時，事件物件有兩個引數
window.onhashchange = function(e){
console.log(`old URL:`, e.oldURL)
console.log(`new URL`, e.newURL)
}二、ontransitionend事件
transitionend 事件在 CSS 完成過渡後觸發
注意： 如果過渡在完成前移除，例如 CSS transition-property 屬性被移除，過渡事件將不被觸發。
三、onbeforeunload事件
onbeforeunload 事件在即將離開當前頁面（重新整理或關閉）時觸發。
該事件可用於彈出對話方塊，提示使用者是繼續瀏覽頁面還是離開當前頁面。
對話方塊預設的提示資訊根據不同的瀏覽器有所不同，標準的資訊類似 “確定要離開此頁嗎？”。該資訊不能刪除。
但你可以自定義一些訊息提示與標準資訊一起顯示在對話方塊。
注意： 如果你沒有在 <body> 元素上指定 onbeforeunload 事件，則需要在 window 物件上新增事件，並使用 returnValue 屬性建立自定義資訊(檢視以下語法例項)。
注意： 在 Firefox 瀏覽器中，只顯示預設提醒資訊（不顯示自定義資訊）。
四、onunload事件
onunload 事件在使用者退出頁面時發生。
onunload 發生於當使用者離開頁面時發生的事件(通過點選一個連線，提交表單，關閉瀏覽器視窗等等。)
注意： onunload 事件同樣觸發了頁面載入事件(+ onload 事件)。
五、onstorage事件
該事件在 Web Storage(HTML 5 Web 儲存)更新時觸發
六、onpopstate事件
該事件在視窗的瀏覽歷史（history 物件）發生改變時觸發
七、onabort事件
onabort 事件在使用者中止載入 <img> 或 <input type=”image”> 元素時觸發。