网页浏览相关事件

2016-12-27 10:21:57来源:作者:Chrisyue's Blog人点击

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

目前为未完成版本,请访问 http://www.chrisyue.com/events-about-page-loading-and-viewing.html 查看原文是否更新。

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 状态执行就已经完全没问题了。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台