一.hashchange事件的妙用

2017.06.02 22:23:36字数 517阅读 1595

hashchange是什么？

hash即URL中“#”字符后面的部分。使用浏览器访问网页时，如果网页URL中带有hash，页面就会定位到id（或name）与hash值一样的元素的位置，故而又称之为锚点。hash还有另一个特点，它的改变不会导致页面重新加载，因此在单页应用流行的当下，它的用处就更多了。
而hashchange事件，顾名思义，就是hash改变时触发的事件。在 caniuse.com 上查一下兼容性可以发现，IE8就已经支持该事件，但一直以来应用甚少。

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

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

它有什么用？

移动端里有这样一个功能，点击小图时在当前页面上展示大图：

实际应用.jpg
CSS和Javascript具体怎么实现的就不再啰嗦了，这里要考虑的问题是：当进入大图展示状态时，如何返回？这是手机的页面，对于用惯APP的用户来说，他很可能会点击左下角的返回键。然而这是个浏览器，返回就意味着回到上一页而不是退出大图展示状态。
下面讲解一下如何利用hashchange解决这个问题。当URL的hash改变时，虽然页面不会重新加载，但仍然会被记录到浏览器的历史记录中。也就是说，如果依次访问a.html、b.html、b.html#abc，然后点击后退，此时会返回b.html而不是a.html。而且，由于hash改变了，所以会触发hashchange事件。这样一来，只要在进入大图展示状态时加上一个特定的hash，点击返回键触发hashchange时退出此状态即可。代码实现也很简单：

// 假设大图展示状态的hash为imgSlider
window.addEventListener('hashchange', function(e) {
  var re = /#imgSlider$/;
  if ( re.test(e.oldURL) && !re.test(e.newURL) ) {
    // 假设imgSlider为大图展示组件对象
    imgSlider.hide();
  }
}, false);

二.DOMContentLoaded

优于 window.load 执行

DOMContentLoaded

当初始html文档完全加载并解析之后触发，无需等待样式、图片、子frame结束。作为明显的对比，load事件只有一个页面完全被加载时才触发。改用DOMContentLoaded的地方常常是load来代替，这是错误的。
tips: 有许多通用和独立的库提供跨浏览器方法来检测 DOM 是否已准备就绪即ready事件，后面我们可以看下zepto的实现

load

当一个资源及其依赖的资源结束加载时触发。从这里可以看到需要等待依赖资源的结束加载。

readystatechange

document有readyState属性来描述document的loading状态，readyState的改变会触发readystatechange事件.

• loading
  文档仍然在加载
• interactive
  文档结束加载并且被解析，但是想图片，样式，frame之类的子资源仍在加载
• complete
  文档和子资源已经结束加载，该状态表明将要触发load事件。
  

因此，我们同样可以使用该事件来判断dom的加载状态。
但并非所有对象都会经历 readyState 的这几个阶段，有时候需要

beforeunload

当浏览器窗口，文档或其资源将要卸载时，会触发beforeunload事件。这个文档是依然可见的，并且这个事件在这一刻是可以取消的.
如果处理函数为Event对象的returnValue属性赋值非空字符串，浏览器会弹出一个对话框，来询问用户是否确定要离开当前页面（如下示例）。有些浏览器会将返回的字符串展示在弹框里，但有些其他浏览器只展示它们自定义的信息。没有赋值时，该事件不做任何响应。
tip:2011年5月25号起，html5中指出，该事件中调用window.alert(), window.confirm(), and window.prompt()方法将会被忽略。
beforeunload事件在当页面卸载（关闭）或刷新时调用，事件触发的时候弹出一个有确定和取消的对话框，确定则离开页面，取消则继续待在本页；
jquery离开页面弹出提示代码
//绑定beforeunload事件
$(window).bind(``'beforeunload'``,``function``(){
return '您输入的内容尚未保存，确定离开此页面吗？'``;
});
//解除绑定，一般放在提交触发事件中
$(window).unbind(``'beforeunload'``);
js离开页面提示 onbeforeunload事件方法
window.onbeforeunload = ``function``(event) {
return confirm(``"确定退出吗"``);
}
以下操作触发beforeunload，onbeforeunload
1 ·关闭浏览器窗口
2·通过地址栏或收藏夹前往其他页面的时候
3·点击返回，前进，刷新，主页其中一个的时候
4·点击 一个前往其他页面的url连接的时候
5·调用以下任意一个事件的时候：click,document.write()方法（输出内容），document.open() 打开一个新的空白文档，document.close()方法可关闭一个由open()方法打开的输出流，并显示选定的数据。，window close ()，form.submit.
6·当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候。
7·重新赋予location.href的值的时候。
8·通过input type=”submit”按钮提交一个具有指定action的表单的时候。
9.可以用在以下元素：body, frameset, window

// 关闭窗口时弹出确认提示
$(window).bind(‘beforeunload’, function(){
// 只有在标识变量is_confirm不为false时，才弹出确认提示
if(window.is_confirm !== false){
return ‘您可能有数据没有保存’;
}
});
// 提交表单时，不弹出确认提示框
$(‘form’).bind(‘submit’, function(){
is_confirm = true;
});
//页面内的跳转操作均不弹出确认窗口
$(window).bind(‘mouseover mouseleave’, function(event){
is_confirm = event.type == ‘mouseleave’;
});
(function(){
// 关闭窗口时弹出确认提示
$(window).bind(‘beforeunload’, function(){
// 只有在标识变量is_confirm不为false时，才弹出确认提示
if(window.is_confirm !== false)
return ‘您可能有数据没有保存’;
})
// mouseleave mouseover事件也可以注册在body、外层容器等元素上
.bind(‘mouseover mouseleave’, function(event){
　　is_confirm = event.type == ‘mouseleave’;
});
})();