<搜索引擎賴上了我們的日常生活，而搜索引擎上的鏈接點擊是每時每刻都在進行著的事件。可以想象一下，用戶在瀏覽我們的網頁的時候，有時候會忽然離開我們的網頁，我們如何知道他們的離開操作？或者我們想要在用戶離開頁面后自動保存用戶操作，應該怎么做呢？ 答案是：我們需要監聽頁面跳轉事件。 一、監聽頁面跳轉事件 當瀏覽器的地址更改時，就會觸發一個頁面跳轉事件。要想監聽此事件，我們可以使用window對象的beforeunload事件、unload事件或者popstate事件來完成頁面跳轉事件的監聽。 1.1 beforeunload事件 beforeunload事件會在用戶離開當前頁面之前觸發。它通常用于詢問用戶是否確認要離開頁面或者提醒用戶有未保存的數據。比如下面的代碼運行之后，當用戶關閉當前頁面時會彈出確認提示框。 ```html

這是一個測試頁面

``` 1.2 unload事件 unload事件會在頁面被卸載之后觸發。它通常用于保存用戶痕跡（比如發送一個請求或者寫入一個cookie），當頁面卸載時觸發這個事件可以確保我們保存下用戶數據。下面的代碼運行之后，可以在控制臺中看到"unloading..."信息，證明unload事件得到了觸發。 ```html

這是一個測試頁面

``` 1.3 popstate事件 popstate事件會在使用瀏覽器的前進或后退按鈕時觸發。我們可以使用popstate事件監聽瀏覽器的歷史記錄變化，這樣我們就可以在用戶歷史記錄發生變化的時候作一些響應。 ```html

這是一個測試頁面

``` 二、注意事項 2.1 beforeunload事件的問題 beforeunload事件可以防止用戶離開頁面，但是同時它也會阻止一些不可避免的情況，比如用戶重啟電腦或者瀏覽器崩潰。在這些情況下，beforeunload事件不會被觸發，而且我們也不能做什么控制。因此，我們不應該完全依賴beforeunload事件來處理用戶離開頁面的事件。 2.2 使用unload事件要小心 unload事件的觸發時刻不太可靠，而且它也不會等到所有的資源都被回收才進行。因此，如果我們在它上面進行太多操作，則可能造成一些問題，最好是只用它來保存必要的數據，或者進行一些輕微的操作。 2.3 popstate事件與pushState()方法 pushState()方法可以向瀏覽器的歷史記錄中添加一個新的狀態。如果我們使用了這個方法，則最好要結合popstate事件監測歷史記錄的改變。 ```html

這是一個測試頁面

``` 在上述代碼中，我們使用了pushState()方法來向瀏覽器的歷史記錄中添加一個狀態，同時在popstate事件里輸出了這個狀態，我們可以看到輸出結果為{foo: "bar"}。 三、總結 對于前端工程師來說，監聽頁面跳轉事件是一個非?；A的操作。在本文中，我們介紹了三種監聽頁面跳轉事件的方法：beforeunload事件、unload事件和popstate事件。但是在使用這些方法的時候，我們要注意它們的觸發時機和使用方法。我們希望本文能夠對你有所幫助。