页面

事件对象的一些常用属性

• target：产生该事件的对象（DOM）
• type：事件的类型（事件名）
• bubbles：该事件是否冒泡
• cancelable：该事件是否可以取消

——————————————————————————

DOMContent​Loaded

• IE9支持该事件
• 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。
• DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。
  • 同步 JavaScript 会暂停 DOM 的解析。

<link rel="stylesheet" href="css.php">
<script>
document.addEventListener('DOMContentLoaded',function(){ // 需要等待上面的link被加载解析完成后才触发，如果该script还有其他代码，由于这些JS会阻碍页面解析，所以该事件只是被注册，并不会被立即触发。
    console.log('3 seconds passed');
});

for(var i=0; i<1000000000; i++){
      // 这个同步脚本将延迟DOM的解析。
      // 所以DOMContentLoaded事件稍后将启动。
} 
</script>

——————————————————————————

readystatechange

• 当文档的readyState属性发生改变，readystatechange事件会被触发。

document.onreadystatechange = function () {
    if (document.readyState === "interactive") {
        initApplication();
    }
}

readyState

• 一个document 的 Document.readyState 属性描述了文档的加载状态。
• 值
  • loading：document 仍在加载。
  • interactive：文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。
  • complete：文档和所有子资源已完成加载。状态表示 load 事件即将被触发。

——————————————————————————

load

• 当一个资源及其依赖资源已完成加载时，将触发load事件。

——————————————————————————

pageshow

• 当一条会话历史记录被执行的时候将会触发目标页面的页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发)
• 在popstate之前触发

事件对象特殊属性

• persisted：表示网页是否是来自缓存.

——————————————————————————

popstate

• 在pageshow之后触发
• 无论什么时候用户导航到新的状态，popstate事件就会被触发（这个状态和pushState状态对象并不是同一个，它包括了状态对象）
  • 这句似乎不对，当state从有值到null时触发（会在新页面加载前触发），但是从null到有值时不会触发
• popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).无论history.state是否为null
• 当网页加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会.
  • 纠错，谷歌在页面加载时不会触发popstate事件
  • 怀疑这句有误
• 调用history.pushState()或者history.replaceState()不会触发popstate事件.

事件对象特殊属性

• 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

——————————————————————————

hashchange

• 在popstate事件后调用
• 当URL的片段标识符更改时，将触发hashchange事件 (跟在＃符号后面的URL部分，包括＃符号)
• 注意 pushState() 绝对不会触发 hashchange 事件，即使新的URL与旧的URL仅哈希不同也是如此。

事件对象特殊属性

• oldURL：窗口的上一个URL
• newURL