关于onhashchange事件

[DeanLk]

onhashchange事件的作用

onhashchange是HTML5中的一个新事件，相对于ajax无刷新页面提交的方式来说，它能带来更好的用户体验。,该事件在location.hash发生改变的时候触发。

location.hash又是什么

在页面的地址栏中我们经常可以看到类似这种带有#符号的地址。比如：http://haier.jd.com/#a

代表网页中的一个位置。其右面的字符，就是该位置的标识符。"http://haier.jd.com/#a" 就代表网页http://haier.jd.com 的a位置。浏览器读取这个URL后，会自动将a位置滚动至可视区域。这个过程中浏览器不会重载网页，只是单纯的滚动位置。

为页面添加标识符的方法有两种，一种是添加锚点。如：HTML <a name="point"></a> 另一种是使用ID属性。如：HTML <div id="point"></div>

location.hash是用来设置或获取页面的标签值的属性。读取时，可以用来判断网页状态是否改变；

写入时，则会在不重载网页的前提下，创造一条访问历史记录

每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位置。

这对于ajax应用程序特别有用，可以用不同的#值，表示不同的访问状态，然后向用户给出可以访问某个状态的链接。

使用onhashchange事件

我们知道，在一个ajax请求中，每次页面更新不能更新地址栏，历史记录也不能记录每次更新的痕迹，地址栏左侧的“前进”和“后退”按钮失去了原有的功能。有了Onhashchange事件，我们在ajax无刷新页面提交的同时，可以很方便的记录每次更新的痕迹。这样用户在浏览页面时，也能通过“前进”或“回退”按钮在同一个页面中来观看自己的浏览记录。从而避免用户中途想要返回浏览时必须重新打开页面逐级检索的情况。下面有个栗子大家剥开看一看

我就是那个栗子

它的使用方法有三种：

HTML 中:

<element onhashchange="myScript">

试一试

JavaScript中：

object.onhashchange=function(){myScript};  

试一试

JavaScript中，使用addEventListener（）方法：

object.addEventListener("hashchange", myScript); 

试一试

我们有时会使用js通过改变hash的方法进行交互，但是通过js改变hash不会出发load事件，所以当点击“返回”按钮时，你会发现除了hash变了以外，其他的没有任何变化。所以此时就要用到onhashchange方法，当用户点击“返回”的时候捕捉变化后的hash通过触发onhashchange方法来执行相应的操作。

## Thanks