网页浏览相关的 window/document 事件

2016-12-30 09:53:00来源:作者:Chrisyue's Blog人点击

第七城市

在 DOM 的世界里有很多很多的事件,有些因为极易被感知,大家都比较熟悉,比如说 click 事件,而有些因为事件作用对象相对抽象,或者触发的时机并不是那么好描述,关注的人就比较少了,比如 window 和 document 两个对象里大量的页面浏览相关事件。

目前为未完成版本,请访问 http://www.chrisyue.com/?p=2613查看原文是否更新。

document readystatechange

看起来跟 Ajax 的 readystatechange事件名一模一样,不仅如此 document 上的确也有类似 XMLHttpRequest 的 readyState的属性 document.readyState,并且同样的,当这个属性发生变化的时候,就会触发一次 readystatechange事件。不过与 Ajax 不同的是, document.readyState并不表示链接状态,它有完全不同于 Ajax 的 readyState 的三个值:

"loading"

表示 DOM 还在加载中。实际上我自己测试的时候,浏览器从来没触发过这个状态,我猜想是在 loading 状态时 javascript 还没有开始执行,事件处理器还没有被注册。

"interactive"

表示 DOM 已经加载完毕,但还没有加载完 css 文件,图片文件,以及 iframe 里的页面。jQuery 里推荐执行代码的时机是放在 $(document).ready()里,其实就是 document.readyState === 'interactive'这个时候。

说到 interactive这个状态,不得不提到 document 的 DOMContentLoaded事件,这个事件之后会提到。

"complete"

表示 DOM 已经完全加载完毕,包括加载完所有的 css,图片,以及 iframe 里的内容。说道 complete 状态,又必须得提到 window 的 load 事件,其实 load 事件就发生在 document.readyState变成 complete的那个时候。之所以 jQuery 不推荐在 window 的 load 事件执行代码,而推荐 ready方法,就是因为 load 事件可能要等若干外部文件加载完,触发得相对较晚。其实大部分情况,javascript 代码在 interactive 状态执行就已经完全没问题了。

DOMContentLoaded

如上所说,此事件完全等同于 document.readyState === "interactive"时触发的 onreadystatechange 事件。需要注意的是,此事件在 document 下并没有对应的 onXxxx 属性,不能通过类似 document.ondomcontentloaded = function() {}的方式注册事件监听,而必须使用 addEventListener方法:

document.addEventListener("DOMContentLoaded", function(e) {    console.log("dom loaded");});

比较奇怪的是这个事件的命名方式居然不是常见的全小写,第一眼看到这个事件的时候我还以为看错了……

visibilitychange

可能很多人都不知道这个事件,从名字上可以看得出来它是跟隐藏/显示有关系的,另外 document 上还有一个两个属性跟这个事件关系非常紧密,一个是 document.hidden,还有一个是 document.visibilityState。hidden 这个属性就是字面意思,布尔值,没啥好解释的,但 visibilityState 除了一看就懂的 "visible"和 "hiden",还有:

"prerender"页面被渲染前的状态 "unloaded"页面从内存里清除掉后的状态

目前浏览器对此属性的支持不太一样,Firefox 测试的结果是连后退前进也会触发此事件,而 Google Chrome 不会,但正常的标签页切换以及窗口最小化,两个浏览器都是可以的。

注意:此事件处理器也只能通过 document.addEventListener来注册

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台