Dom中高big 事件總結（持續更新中）

Alfred發表於2019-01-12
事件

將前段時間自己用到的，比較少見，但是功能很強大的事件在這裡總結下，一來自己重新梳理歸檔下，二來，沒用過的同學也可以嘗試用下。其實，這些都是基礎知識，但是基礎是最重要的。還記得老師說過：`基礎不牢，地動山搖`，很有道理！

想要全面瞭解的，可以檢視菜鳥教程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”> 元素時觸發。

相關文章