hashchange事件

h5新增了hashchange事件，以便在URL参数列表（及URL中‘#’号后面的所有字符串），发生变化时通知开发人员。

之所以要添加这个事件，是因为在Ajax应用中，开发人员经常要利用URL参数列表来保存状态或导航信息。

必须把hashchange事件处理程序添加给window对象，然后URL列表只要发生变化就会调用他，此时的event对象应该额外包含两个属性：oldURL和newURL。

这两个属性分别保存着参数列表变化前后的完整的URL。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>history 测试</title> 
</head> 
<body> 

<p><input type="text" value="0" id="oTxt" /></p> 
<p><input type="button" value="+" id="oBtn" /></p> 

<script> 
    var otxt = document.getElementById("oTxt"); 
    var oBtn = document.getElementById("oBtn"); 
    var n = 0; 

    oBtn.addEventListener("click",function(){ 
        n++; 
        add(); 
    },false); 
    get(); 

    function add(){ 
        if("onhashchange" in window){ //如果浏览器的原生支持该事件
        window.location.hash = "#"+n; 
        } 
    } 

    function get(){ 
        if("onhashchange" in window){ //如果浏览器的原生支持该事件
            window.addEventListener("hashchange",function(e){ 
                var hashVal = window.location.hash.substring(1); 
                if(hashVal){ 
                    n = hashVal; 
                    otxt.value = n; 
                } 
            },false); 
        } 
    } 
</script> 
</body> 
</html>

1、hash即URL中"#"字符后面的部分。

　　①使用浏览器访问网页时，如果网页URL中带有hash，页面就会定位到id（或name）与hash值一样的元素的位置；

　　②hash还有另一个特点，它的改变不会导致页面重新加载；

　　③hash值浏览器是不会随请求发送到服务器端的；

　　④通过window.location.hash属性获取和设置hash值。

　　window.location.hash值的变化会直接反应到浏览器地址栏（#后面的部分会发生变化），同时，浏览器地址栏hash值的变化也会触发window.location.hash值的变化，从而触发onhashchange事件。

2、hashchange事件（IE8已支持该事件）

　　①当URL的片段标识符更改时，将触发hashchange事件（跟在#符号后面的URL部分，包括#符号）

　　②hashchange事件触发时，事件对象会有hash改变前的URL（oldURL）和hash改变后的URL（newURL）两个属性：

window.addEventListener('hashchange',function(e) { console.log(e.oldURL); console.log(e.newURL) },false);