有興趣的可以了解下history對象，不感興趣也可以直接跳到手機物理返回鍵監聽部分

******************【history對象】有length屬性，go()/back()/forward()跳轉方法****************************

我們要了解瀏覽器的history對象， history對象保存著用戶上網的歷史記錄，從窗口被打開的那一刻算起；history.length屬性保存著歷史記錄的URL數量。初始時，該值為1。如果當前窗口先後訪問了三個網址，history.length屬性等於3；history對象提供了一系列方法，允許在瀏覽歷史之間移動，包括go()、back()和forward()。

【go()】方法可以在用戶的歷史記錄中任意跳轉。這個方法接收一個參數，表示向後或向前跳轉的頁面數的一個整數值。

go(負整數)：表示向後跳轉(類似於後退按鈕)

go(正整數)：表示向前跳轉(類似於前進按鈕)

示例：

go()方法無參數時，相當於history.go(0)，可以刷新當前頁面

示例：

【back()】

back()方法用於模仿瀏覽器的後退按鈕，相當於history.go(-1)

【forward()】

forward()方法用於模仿瀏覽器的前進按鈕，相當於history.go(1)

示例：

如果移動的位置超出了訪問歷史的邊界，以上三個方法並不報錯，而是靜默失敗

【註意】

********************監聽手機物理返回鍵************************************

示例：

A頁面跳到B頁面，監聽B頁面返回鍵，並做相應操作，那麽就可以在B頁面javascript腳本寫如下監聽事件

pushHistory();

function pushHistory(){　　//剛一進到B頁面就往history歷史記錄pushstate一個url

　　var state = {
　　　　title:"title",　　//可以傳空值""

　　　　url:"#"};

　　window.history.pushState(state,"title","#")

}

window.addEventListener("popstate",function(e){　　//只要B頁面按下手機物理返回鍵，就會被監聽到

　　//該幹嘛幹嘛

　　WeixinJSBridge.invoke(‘closeWindow‘,{},function(res){});　　//js代碼關閉微信端當前網頁

　　//window.location = "http://www.baidu.com";　　//跳轉到百度頁面

},false);

或者

$(function(){
　　window.history.pushState("","","#");
})
window.addEventListener("popstate",function(e){
　　//該幹嘛幹嘛
})

以上代碼就搞定監聽手機物理返回鍵並作處理，下面有興趣的可以了解

大家都知道在瀏覽器頁面中，可以在不知道實際URL的情況下實現後退和前進，但是由於安全方面的考慮，開發人員無法得到用戶瀏覽器的URL也沒辦法修改history裏已有的url鏈接；

HTML5為history對象添加了兩個新方法，history.pushState()和history.replaceState()，用來在瀏覽歷史中添加和修改記錄（兩個方法使用方法都一樣，不同的是pushState會改變history對象length屬性，而replaceState不會）。

pushState（相當於進棧）可以往history裏增加url鏈接，popState（相當於出棧）事件監測從history棧裏彈出url。既然有提供popstate事件監測，那麽我們就可以對popState進行監聽。

【註意】

popState事件當同一個文檔的history發生變化時，就會觸發popState事件；

需要註意的是，僅僅pushState和replaceState不會觸發該事件，只有用戶點擊瀏覽器的前進、後退按鈕才會觸發，或者使用javascript調用go()/back()/forward()才會觸發；另外該事件僅針對同一個文檔有效，如果瀏覽器歷史的切換，導致加載不同的文檔，也不會觸發該事件。

//無刷新頁面切換：使用到如下API

【history.state】:當前url對應的狀態信息

如果當前url不是通過pushState或者replaceState產生的，那麽history.state就為null；

【history.pushState(state, title, url)】：將當前的url和history.state加入到history中,並用新的state和URL替換當前。不會造成頁面刷新；

state：與要跳轉的URL對應的狀態信息

title：傳空字符就可以

url：要跳轉到的地址，不能跨域（跨域會報錯）

【history.replaceState】：用新的state和URL替換當前的，不會造成頁面刷新；

state：與要跳轉的URL對應的狀態信息

title：傳空字符就可以

url：要跳轉到的地址，不能跨域（跨域會報錯）

【window.onpopstate】

history.go和history.back（包括用戶按瀏覽器歷史前進後退按鈕）觸發，並且頁面無刷的時候（由於使用pushState修改了history）會觸發popstate事件，事件發生時瀏覽器會從history中取出URL和對應的state對象替換當

前的URL和history.state。通過event.state也可以獲取history.state。

【往返緩存】

默認情況下，瀏覽器會在當前會話(session)緩存頁面，當用戶點擊“前進”或“後退”按鈕時，瀏覽器就會從緩存中加載頁面；瀏覽器有一個特性叫“往返緩存”(back-forward cache或bfcache)，可以在用戶使用瀏覽器的“後退”和“前進”按鈕時加快頁面的轉換速度。這個緩存中不僅保存著頁面數據，還保存了DOM和javascript的狀態；實際上是將整個頁面都保存在了內存裏。如果頁面位於bfcache中，那麽再次打開該頁面時就不會觸發load事件

addEventListener()方法，事件監聽(removeEventListener()方法移除設定的監聽事件)

語法：element.addEventListener(event,function,useCapture);

參數：

　　element:文檔節點、document、window 或 XMLHttpRequest

　　event:事件類型，如"click" 或 "mousedown"

　　function:事件觸發後調用的函數或者是實現了EventListener接口

　　useCapture:布爾值，用於描述事件是冒泡還是捕獲，參數可選，默認false（冒泡）

註意：event不要使用 "on" 前綴。 例如，使用 "click" ,而不是使用 "onclick"

示例：　

element.addEventListener("click", function(){ alert("Hello World!"); });
等效

element.addEventListener("click", myFunction);

function myFunction() {

 　　alert ("Hello World!");
}
向window對象添加事件

window.addEventListener("resize", function(){

　　document.getElementById("demo").innerHTML = sometext;

});

事件冒泡還是捕獲？

事件傳遞方式有兩種：冒泡、捕獲、

事件傳遞定義了元素觸發的順序，如果你將 <p> 元素插入到 <div> 元素中，用戶點擊 <p> 元素, 哪個元素的 "click" 事件先被觸發呢？

在 冒泡 中，內部元素的事件會先被觸發，然後再觸發外部元素，即： <p> 元素的點擊事件先觸發，然後會觸發 <div> 元素的點擊事件。

在 捕獲 中，外部元素的事件會先被觸發，然後才會觸發內部元素的事件，即： <div> 元素的點擊事件先觸發 ，然後再觸發 <p> 元素的點擊事件。

addEventListener() 方法可以指定 "useCapture" 參數來設置傳遞類型：

addEventListener(event, function, useCapture);

默認值為 false, 即冒泡傳遞，當值為 true 時, 事件使用捕獲傳遞。

示例：

document.getElementById("myDiv").addEventListener("click", myFunction, true);

【removeEventListener()方法】

element.removeEventListener("mousemove", myFunction);

【瀏覽器兼容處理】
var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流瀏覽器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
} 
IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。
但是，對於這類瀏覽器版本可以使用 detachEvent() 方法來移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

*****************************

//手機端彈窗

$.pop.showAlert({
　　content: "提示的信息",

　　yes:function(){　　//點確定之後執行的事件
　　　　window.location.href = "http://www.baidu.com"; 　　//跳轉到百度頁面
　　　　}
});

js history對象 手機物理返回鍵