浏览器常用事件解析

• 用户提交时触发。比如，从下列列表(select)完成选择，在日期或文件输入框完成选择。

• 当文本框或textarea元素的值发生改变，并且丧失焦点时触发。

• reset事件当表单重置(所有表单成员变回默认值)时由form元素触发。

• submit事件当表单数据向服务器提交时由form元素触发。

文档事件:

---

beforeunload

beforeunload 事件当窗口将要关闭，或者 document 和网页资源将要卸载时触发。它可以用来防止用户不当心关闭网页。该事件的默认动作就是关闭当前窗口或文档。如果在监听函数中，调用了 event.preventDefault()，或者对事件对象的 returnValue 属性赋予一个非空的值，就会自动跳出一个确认框，让用户确认是否关闭网页。如果用户点击“取消”按钮，网页就不会关闭。监听函数所返回的字符串，会显示在确认对话框之中:

window.addEventListener(‘beforeunload’, function(event) {

if(event.preventDefault){

event.preventDefault();

} else {

event.returnValue = ‘你确认要离开吗？’;

}

});

unload 与 load

unload 事件在窗口关闭或者 document 对象将要卸载时触发，发生在 window, body, frameset 等对象上面。它的触发顺序排在 beforeunload, pagehide 事件后面。unload 事件只在页面没有被浏览器缓存时才会触发，换言之，如果通过按下“前进/后退”导致页面卸载，并不会触发 unload 事件。当 unload 事件发生时，document 对象处于一个特殊状态。所有资源依然存在，但是对用户来说都不可见，UI互动(window.open, alert, confirm方法等)全部无效。这时即使抛出错误，也不能停止文档的卸载。

load事件在页面加载成功时触发，error事件在页面加载失败时触发。注意，页面从浏览器缓存加载，并不会触发load事件。

这两个事件实际上属于进度事件，不仅发生在 document 对象，还发生在各种外部资源上面。浏览网页就是一个加载各种资源的过程，图像(image), 样式表(style sheet), 脚本(script), 视频(video), 音频(audio), Ajax请求(XMLHttpRequest)等等。这些资源和document对象, window对象, XMLHttpRequestUpload对象，都会触发 load 事件和 error 事件。

pageshow 与 pagehide

pageshow事件，pagehide事件: 默认情况下，浏览器会在当前会话(session)缓存页面，当用户点击“前进/后退”按钮时，浏览器就会从缓存中加载页面。

pageshow 事件在页面加载时触发，包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码，可以放在这个事件的监听函数。第一次加载时，它的触发顺序排在load事件后面。从缓存加载时，load 事件不会触发，因为网页在缓存中的样子通常是 load 事件的监听函数运行后的样子，所以不必重复执行。同理，如果是从缓存中加载页面，网页内初始化的 JavaScript 脚本(比如 DOMContentLoaded 事件的监听函数)也不会执行。pageshow 事件有一个 persisted 属性，返回一个布尔值。页面第一次加载时，这个属性是false；当页面从缓存加载时，这个属性是true。

document.onpageshow = function(event){}

if(event.persisted){

//如果存缓存加载

}

}

同样的，将这个属性设为 true，就表示页面要保存在缓存中；设为 false ，表示网页不保存在缓存中，这时如果设置了 unload 事件的监听函数，该函数将在 pagehide 事件后立即运行。如果页面包含 frame ，则 frame 页面的 pageshow 事件和 pagehide 事件，都会在主页面之前触发。

DOMContentLoaded 和 readystatechange

DOMContentLoaded 事件当 HTML 文档下载并解析完成以后，就会在 document 对象上触发 DOMContentLoaded 事件。这时，仅仅完成了 HTML 文档的解析(整张页面的DOM生成)，所有外部资源(样式表, 脚本, i