JavaScript 事件——“事件类型”中“HTML5事件”的注意要点 - 前端学习笔记
contextmenu事件
该事件用以表示何时应该显示上下文菜单，以便开发者取消默认的上下文菜单，转而提供自定义的菜单。
因为该事件属于鼠标事件，所以其事件对象中包含与光标位置有关的所有属性。如：
<body> <ul id="menu" > <li>item1</li> <li>item2</li> <li>item3</li> </ul> <script type="text/javascript"> window.addEventListener("contextmenu", function () { event.preventDefault(); var menu = document.getElementById("menu"); menu.style.top = event.clientY + "px"; menu.style.left = event.clientX + "px"; menu.style.visibility = "visible"; }); window.addEventListener("click", function () { var menu = document.getElementById("menu"); menu.style.visibility = "hidden"; }) </script></body>chrome现在支持该事件，部分浏览器都支持。
beforeunload事件
该事件是为了让开发者有可能在页面卸载前阻止这一操作。event.returnValue设置的值是显示给用户的字符串（对于IE以及Firefox而言），同时作为函数的值返回（对safari和chrome而言），如：
window.addEventListener("beforeunload", function () { var message = "do you realy want to leave?"; event.returnValue = message; return message;}); //当离开时会显示信息和两个按钮；当刷新时也会提示；DOMContentLoaded事件
该事件在形成完整的DOM树之后就会触发，不理会图像、js文件、css文件等其他资源下载完毕。
readystatechange事件
IE提供的事件，支持该事件的每个对象都有一个readyState属性，可能包含下列5个值中的一个：
uninitialized（未初始化）：对象存在但尚未初始化；
loading（正在加载）：对象正在加载数据；
loaded（加载完毕）：对象加载数据完成；
interactive（交互）：可以操作对象，但还没有完全加载；
complete（完成）：对象已经加载完毕；
并非每个对象都会经历这些阶段；值为interactive的readyState会在与DOMContentLoaded大致相同的时刻触发readystatechange事件。事件的event对象不会提供任何信息。
switch (document.readyState) { case "loading": // 正在加载 console.log("loading"); case "interactive": // 交互阶段 可以操作对象了 var span = document.createElement("span"); span.textContent = "A <span> element."; document.body.appendChild(span); console.log("The document has finished loading. We can now access the DOM elements.") case "complete": // 完成阶段 完全加载完毕了 console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText); console.log("The page is fully loaded.") break;}如：
document.addEventListener("readystatechange", function () { if (document.readyState == "loading") { var newP = document.createElement("p"); newP.appendChild(document.createTextNode("data1")); document.body.appendChild(newP); } if (document.readyState == "interactive") { var newP = document.createElement("p"); newP.appendChild(document.createTextNode("data2")); document.body.appendChild(newP); }});//上述代码的第一段并没有在document.body下创建一个新的p，因为readyState为loading的时候并不能操作对象；又如：
document.addEventListener("readystatechange", function () { if (document.readyState == "loading") { var newP = document.createElement("p"); newP.appendChild(document.createTextNode("data1")); document.body.appendChild(newP); console.log(document.styleSheets[0].cssRules[0].cssText); //无效，因为loading的时候，对象没有加载完全加载完毕（complete） } if (document.readyState == "interactive") { var newP = document.createElement("p"); newP.appendChild(document.createTextNode("data2")); document.body.appendChild(newP); console.log(document.styleSheets[0].cssRules[0].cssText); //可能有效，外部资源少的情况下完成阶段很可能在交互阶段之前出现；而在外部资源较多的情况下完成阶段很可能在交互阶段之后出现。 } });//上述代码的第一段并没有在document.body下创建一个新的p，因为readyState为loading的时候并不能操作对象；交互阶段可能早于或晚于完成阶段出现，无法确保顺序。在包含较多外部资源的页面中，交互阶段更有可能出现的早；在包含较少外部资源的页面中，完成阶段更有可能出现的早。因此，为了尽可能抢到先机，有必要同时检测交互和完成阶段，如：
document.addEventListener("readystatechange", function ready () { if (document.readyState == "interactive" || document.readyState == "complete") { document.removeEventListener("readystatechange", ready; console.log("Content loaded"); }});见《js高级程序设计》第十三章事件类型html5事件中readystatechange事件，第二版391页
这样编写的代码，可以达到与使用DOMContentLoaded十分接近的效果。
另外，关于script元素和link元素的加载情况参考：
就绪状态(readystatechange)事件
pageshow和pagehide事件
“往返缓存（back-forward cache或bfcache）”——可以在用户使用浏览器的“前进”、“后退”按钮时加快页面的转换速度。如果页面位于bgcache中，那么再次打开该页面时就不会触发load事件。
pageshow事件和event.persisted属性
该事件在页面显示时触发，虽然这个事件的目标是document，但是必须将其事件处理程序添加到window。如：
window.addEventListener('pageshow', function(event) { console.log('pageshow:'); console.log(event); //PageTransitionEvent});属性是一个布尔值，如果页面保存在了bfcache中，则这个属性的值为true；否则为false。
hashchange事件
该事件以便在URL的参数列表（及URL中“#”号后面的所有字符串）发生变化时通知开发人员。必须把这个事件的事件处理程序添加给window对象。event对象中有两个属性：oldURL和newURL。这两个属性分别保存着参数列表变化前后的完整URL：
window.addEventListener("hashchange", function () { console.log("Old URL:" + event.oldURL + "\nNew URL: " + event.newURL);});检测：
如果IE8是在IE7文档模式下运行，即使功能无效也会返回true：
var isSupported = ("onhashchange" in window) && (document.documentMode === undefined || document.documentMode > 7);