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);

hashchange事件的更多相关文章

  1. hashchange事件的认识

    写过路由的同学都知道其原理是通过URL的改变,由导航信息来决定页面信息...表述的好像有点不准确 这么说吧,只要URL参数列表只要变化就会调用hashchange事件,此时event对象包括oldUR ...

  2. jQuery不支持hashchange事件？

    $(window) .bind( 'hashchange', onHashchange ) .trigger( 'hashchange' ); jQuery版本是1.9.1的,去源码里没找到hashc ...

  3. js中hash、hashchange事件

    1.hash即URL中"#"字符后面的部分. ①使用浏览器访问网页时,如果网页URL中带有hash,页面就会定位到id(或name)与hash值一样的元素的位置: ②hash还有另 ...

  4. hash、hashchange事件

    1.hash即URL中"#"字符后面的部分. ①使用浏览器访问网页时,如果网页URL中带有hash,页面就会定位到id(或name)与hash值一样的元素的位置: ②hash还有另 ...

  5. 解密jQuery事件核心 - 绑定设计（一）

    说起jQuery的事件,不得不提一下Dean Edwards大神 addEvent库,很多流行的类库的基本思想从他那儿借来的 jQuery的事件处理机制吸取了JavaScript专家Dean Edwa ...

  6. JavaScript事件流原理解析

    一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...

  7. JavaScipt 事件体系

    事件机制 jQuery对事件的绑定分别有几个API .bind()/.live()/.delegate()/.on() 不管是用什么方式绑定,归根到底还是用addEventListener/attac ...

  8. DOM事件类型详解

    一.表单事件: input事件当<input>.<textarea>的值发生变化时触发.此外,打开contenteditable属性的元素,只要值发生变化,也会触发input事 ...

  9. 详细的JavaScript事件使用指南

       事件流 事件流描述的是从页面中接收事件的顺序,IE和Netscape提出来差不多完全相反的事件流的概念,IE事件流是事件冒泡流,Netscape事件流是事件捕获流. 事件冒泡 IE的事件流叫做事 ...

随机推荐

  1. Django的Rbac介绍3

    今天的博客主要是记录一下如何实现左侧菜单,这里我们想实现的效果就是,如果用户有查看用户的权限,则显示查看用户的左侧菜单,如果用户有查看角色的权限,则显示查看角色的左侧菜单,如果两者都有,则需要显示两个 ...

  2. 使用GitHub管理代码

    第一步:注册GitHub账户. 第二步:下载GitHub desktop. 第三步:打开软件界面之后请使用鼠标点击左上角的“file”选项按钮,选择添加本地文件. 第四步:导入文件 第五步:在左下角大 ...

  3. day 11 生成器

    生成器生成器本质就是迭代器,生成器是自己用python代码写的迭代器 将函数变成生成器yield用next 取值一个next,对应一个yield def func(): yield 111 yield ...

  4. Head First Servlets & JSP 学习笔记 第三章 —— MVC迷你教程

    临渊羡鱼,不如退而结网!是时候动手搞事情了! 我们的四大步骤: ①分析用户的视图(也就是浏览器要显示的东西),以及高层体系结构: (这个就是所谓的前端吧?用JSP?JSP可以当成Html来用吧?高层体 ...

  5. webpack.base.conf.js

    var path = require('path')var utils = require('./utils')var config = require('../config')var vueLoad ...

  6. vue.js路由vue-router

    学习网址:https://segmentfault.com/blog/vueroad 转载至:https://segmentfault.com/a/1190000009350679#articleHe ...

  7. PAT 1068 万绿丛中一点红（20）（测试点分析+思路分析）

    1068 万绿丛中一点红(20 分) 对于计算机而言,颜色不过是像素点对应的一个 24 位的数值.现给定一幅分辨率为 M×N 的画,要求你找出万绿丛中的一点红,即有独一无二颜色的那个像素点,并且该点的 ...

  8. hdu 1754(基础线段树) I Hate It

    http://acm.hdu.edu.cn/showproblem.php?pid=1754 数据比较大,暴力会超时,所以明显是线段树,普通的线段树,结构体中多开一个值sum储存每个子区间的最大成绩, ...

  9. spring batch遇到的一些问题

    1.Spring Batch - A job instance already exists: JobInstanceAlreadyCompleteException 这是因为JobParameter ...

  10. 洛谷1462(重题1951) 通往奥格瑞玛的道路(收费站_NOI导刊2009提高(2))

    1462原题链接 1951原题链接 显然答案有单调性,所以可以二分答案,用\(SPFA\)或\(dijkstra\)跑最短路来判断是否可行即可. 注意起点也要收费,\(1462\)数据较水,我一开始没 ...