1.4 瀏覽器相關事件介紹

1.4.1 popstate事件

在history.pushState或history.replaceState產生的歷史棧記錄中，當移動棧指針或單擊瀏覽器的“前進”或“后退”按鈕時，將觸發popstate事件，可通過window.addEventListener監聽該事件。

監聽函數的參數為對應popstate事件的事件對象。對于事件對象event，event.state是重點需要關注的，其為移動后對應棧中記錄的state對象，如圖1-6所示。

當調用history.go(-1)時，事件回調中得到的event.state為{a:1}；當調用history.go(1)時，事件回調中得到的event.state為{a:3}。

使用history.pushState或history.replaceState不會觸發popstate事件。單擊瀏覽器的“后退”或“前進”按鈕，或者調用history的go、back、forward等方法，或者更改部分瀏覽器的hash，都會觸發此事件。在導航跳轉完成后，除了可以從popstate事件對象中獲取當前的state對象，還可以直接從history中獲取當前的state對象，即讀取history.state變量的值即可。

需要注意的是，由于部分瀏覽器對popstate事件的實現不一致，當網頁加載完成后，部分瀏覽器會觸發popstate事件，而部分瀏覽器不會觸發popstate事件。當編碼時，對于這種情況，可使用history.state獲取狀態對象state，而不是從popstate事件對象中獲取state對象。

注意，在事件中更改event.state，history.state不會被改變，如：

但是直接更改history.state，將會更改history.state的值：

在歷史棧指針變化后，history.state將會重新被賦值，即便已經修改過history.state：

由此可知，history.state同步的是棧記錄中的值，每次導航都會獲得新的state對象。棧記錄中的state對象是深拷貝存儲在瀏覽器中的，無論在瀏覽器中進行導航，還是刷新當前頁面，抑或是關閉瀏覽器頁簽再恢復，歷史棧內的內容都存在且不會被銷毀。

當前后兩次設置相同的location.hash值時，不會觸發兩次popstate事件。

若通過location.href設置hash值，如location.href='#/123'，則無論前后設置的值是否相同，都會觸發popstate事件。當前后兩次設置的值相同時，只添加一個歷史棧。