資訊專欄INFORMATION COLUMN
摘要：三事件事件在即將離開當前頁面刷新或關閉時觸發。四事件事件在用戶退出頁面時發生。五事件該事件在存儲更新時觸發六事件該事件在窗口的瀏覽歷史對象發生改變時觸發七事件事件在用戶中止加載或元素時觸發。
將前段時間自己用到的，比較少見，但是功能很強大的事件在這里總結下，一來自己重新梳理歸檔下，二來，沒用過的同學也可以嘗試用下。其實，這些都是基礎知識，但是基礎是最重要的。還記得老師說過："基礎不牢，地動山搖"，很有道理！
想要全面了解的，可以查看菜鳥教程DOM
一、onhashchange事件1.何為hash?
hash為URL中#后面的部分，可以通過window.location.hash來查看設置；頁面打開后可以自動滾動定位到指定位置，這個位置設定可以通過 一 使用錨點，比如 , 二 使用id屬性，比如
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 事件，則需要在 window 對象上添加事件，并使用 returnValue 屬性創建自定義信息(查看以下語法實例)。注意： 在 Firefox 瀏覽器中，只顯示默認提醒信息（不顯示自定義信息）。
四、onunload事件onunload 事件在用戶退出頁面時發生。
onunload 發生于當用戶離開頁面時發生的事件(通過點擊一個連接，提交表單，關閉瀏覽器窗口等等。)
注意： onunload 事件同樣觸發了頁面載入事件(+ onload 事件)。
五、onstorage事件該事件在 Web Storage(HTML 5 Web 存儲)更新時觸發
六、onpopstate事件該事件在窗口的瀏覽歷史（history 對象）發生改變時觸發
七、onabort事件onabort 事件在用戶中止加載 或 元素時觸發。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100954.html
摘要：整理收藏一些優秀的文章及大佬博客留著慢慢學習原文協作規范中文技術文檔協作規范阮一峰編程風格凹凸實驗室前端代碼規范風格指南這一次，徹底弄懂執行機制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環有何區別筆試題事件循環機制異步編程理解的異步 better-learning 整理收藏一些優秀的文章及大佬博客留著慢慢學習 原文:https://www.ahwgs.cn/youxiuwenzhan...
摘要：想要自己實現一個簡易版框架，并不是非常難。為了防止出現這種情況，我們需要改變整體的策略。上面這段話，說的就是版本和架構的區別。 showImg(https://segmentfault.com/img/bVbwfRh); 想要自己實現一個React簡易版框架，并不是非常難。但是你需要先了解下面這些知識點如果你能閱讀以下的文章，那么會更輕松的閱讀本文章： 優化你的超大型React應用 ...
摘要：想要自己實現一個簡易版框架，并不是非常難。為了防止出現這種情況，我們需要改變整體的策略。上面這段話，說的就是版本和架構的區別。 showImg(https://segmentfault.com/img/bVbwfRh); 想要自己實現一個React簡易版框架，并不是非常難。但是你需要先了解下面這些知識點如果你能閱讀以下的文章，那么會更輕松的閱讀本文章： 優化你的超大型React應用 ...
摘要：這個系列的文章的第二篇，繼續總結這是從一個問題上衍生出的知識體系，這個問題是從輸入到頁面加載的過程。先梳理下這個流程第一步從瀏覽器接收到開啟網絡請求線程瀏覽器的進程線程模型，的運行機制瀏覽器的進程瀏覽器是多進程的。 這個系列的文章的第二篇，繼續總結~~ 這是從一個問題上衍生出的知識體系，這個問題是從輸入URL到頁面加載的過程。先梳理下這個流程 第一步 從瀏覽器接收url到開啟網絡請求線...
摘要：這個系列的文章的第二篇，繼續總結這是從一個問題上衍生出的知識體系，這個問題是從輸入到頁面加載的過程。先梳理下這個流程第一步從瀏覽器接收到開啟網絡請求線程瀏覽器的進程線程模型，的運行機制瀏覽器的進程瀏覽器是多進程的。 這個系列的文章的第二篇，繼續總結~~ 這是從一個問題上衍生出的知識體系，這個問題是從輸入URL到頁面加載的過程。先梳理下這個流程 第一步 從瀏覽器接收url到開啟網絡請求線...
閱讀 904·2023-04-26 02:16
閱讀 1214·2019-08-30 15:55
閱讀 2795·2019-08-30 15:53
閱讀 3389·2019-08-29 15:38
閱讀 2895·2019-08-29 13:42
閱讀 1986·2019-08-26 13:34
閱讀 1845·2019-08-26 10:10
閱讀 3082·2019-08-23 14:40
