在移动端做单页切换时，hashchange事件就会经常用到，例如：点击相册中某一张图片时，浏览完成后需要返回，那我们就需要响应hashchange事件。接下由南昌网站制作公司百恒网络前端开发工程师向大家介绍hashchange事件及pageshow 和 pagehide 事件 ，希望对开发人员有所帮助。

1.hashchange 事件

HTML5新增了 hashchange 事件，以便在 URL的参数列表(及 URL中“#”号后面的所有字符串) 发生变化时通知开发人员。之所以新增这个事件，是因为在 Ajax应用中，开发人员经常要利用 URL参 数列表来保存状态或导航信息。

必须要把 hashchange 事件处理程序添加给 window 对象，然后 URL参数列表只要变化就会调用 它。此时的 event 对象应该额外包含两个属性：oldURL 和 newURL。这两个属性分别保存着参数列表 变化前后的完整 URL。例如：

EventUtil.addHandler(window, "hashchange", function(event){

alert("Old URL: " + event.oldURL + "nNew URL: " + event.newURL); });

支持 hashchange 事件的浏览器有 IE8+、Firefox 3.6+、Safari 5+、Chrome和 Opera 10.6+。在这些 浏览器中，只有 Firefox 6+、Chrome和 Opera支持 oldURL 和 newURL 属性。为此，好是使用 location 对象来确定当前的参数列表。

EventUtil.addHandler(window, "hashchange", function(event){

alert("Current hash: " + location.hash);

});

使用以下代码可以检测浏览器是否支持 hashchange 事件：

var isSupported = ("onhashchange" in window); //这里有 bug

如果 IE8 是在 IE7 文档模式下运行，即使功能无效它也会返回 true。为解决这个问题南昌APP开发公司百恒网络开发工程师建议大使用以下这个更稳妥的检测方式：

var isSupported = ("onhashchange" in window) && (document.documentMode === undefined || document.documentMode > 7);

2. pageshow 和 pagehide 事件

Firefox 和 Opera 有一个特性，名叫“往返缓存”(back-forward cache，或 bfcache)，可以在用户使 用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据，还保存 了 DOM和 JavaScript的状态;实际上是将整个页面都保存在了内存里。如果页面位于 bfcache中，那么 再次打开该页面时就不会触发 load 事件。尽管由于内存中保存了整个页面的状态，不触发 load 事件 也不应该会导致什么问题，但为了更形象地说明 bfcache的行为，Firefox还是提供了一些新事件。

第一个事件就是 pageshow，这个事件在页面显示时触发，无论该页面是否来自 bfcache。在重新加 载的页面中，pageshow 会在 load 事件触发后触发;而对于 bfcache中的页面，pageshow 会在页面状 态完全恢复的那一刻触发。另外要注意的是，虽然这个事件的目标是 document，但必须将其事件处理 程序添加到 window。来看下面的例子。

(function(){

var showCount = 0;

EventUtil.addHandler(window, "load", function(){

alert("Load fired");

});

EventUtil.addHandler(window, "pageshow", function(){

showCount++;

alert("Show has been fired " + showCount + " times. ");

});

})();

这个例子使用了私有作用域，以防止变量 showCount 进入全局作用域。当页面首次加载完成时， showCount 的值为 0。此后，每当触发 pageshow 事件，showCount 的值就会递增并通过警告框显示 出来。如果你在离开包含以上代码的页面之后，又单击“后退”按钮返回该页面，就会看到 showCount 每次递增的值。这是因为该变量的状态，乃至整个页面的状态，都被保存在了内存中，当你返回这个页 面时，它们的状态得到了恢复。如果你单击了浏览器的“刷新”按钮，那么 showCount 的值就会被重 置为 0，因为页面已经完全重新加载了。

除了通常的属性之外，pageshow 事件的 event 对象还包含一个名为 persisted 的布尔值属性。 如果页面被保存在了 bfcache中，则这个属性的值为 true;否则，这个属性的值为 false。可以像下面 这样在事件处理程序中检测这个属性。

(function(){

var showCount = 0;

EventUtil.addHandler(window, "load", function(){

alert("Load fired");

});

EventUtil.addHandler(window, "pageshow", function(event){

showCount++;

alert("Show has been fired " + showCount + " times. Persisted? " + event.persisted);

});

EventUtil.addHandler(window, "pagehide", function(event){

alert("Hiding. Persisted? " + event.persisted);

});

})();

通过检测 persisted 属性，就可以根据页面在 bfcache中的状态来确定是否需要采取其他操作。 与 pageshow 事件对应的是 pagehide 事件，该事件会在浏览器卸载页面的时候触发，而且是在 unload 事件之前触发。与 pageshow 事件一样，pagehide 在 document 上面触发，但其事件处理程 序必须要添加到 window 对象。这个事件的 event 对象也包含 persisted 属性，不过其用途稍有不同。 来看下面的例子。

EventUtil.addHandler(window, "pagehide", function(event){

alert("Hiding. Persisted? " + event.persisted);

});

有时候，可能需要在 pagehide 事件触发时根据 persisted 的值采取不同的操作。对于 pageshow 事件，如果页面是从 bfcache中加载的，那么 persisted 的值就是 true;对于 pagehide 事件，如果 页面在卸载之后会被保存在 bfcache中，那么 persisted 的值也会被设置为 true。因此，当第一次触 发 pageshow 时，persisted 的值一定是 false，而在第一次触发 pagehide 时，persisted 就会变 成 true(除非页面不会被保存在 bfcache中)。

支持 pageshow 和 pagehide 事件的浏览器有 Firefox、Safari 5+、Chrome和 Opera。IE9及之前版 本不支持这两个事件。

指定了 onunload 事件处理程序的页面会被自动排除在 bfcache之外，即使事件 处理程序是空的。原因在于，onunload 常用于撤销在 onload 中所执行的操作， 而跳过 onload 后再次显示页面很可能就会导致页面不正常。

本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络http://www.jxbh.cn/如转载请注明出处!