- Html5事件
- contextmenu事件
用以表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。
由于此事件时冒泡的，因此可以为document指定一个事件处理程序，用以处理页面中发生的所有此类事件。这个事件的目标是发生用户操作的元素，在浏览器中都可以取消这个事件在兼容DOM的浏览器中，使用event.preventDefaluet()。在ie中，将event.returnValue的值设置为false，因为contextmenu事件属于鼠标事件，所以其事件对象中包含与光标位置有关的所有事项，通常使用contextmenu事件来显示自定义的上下文菜单，而使用onclick事件处理程序来隐藏该菜单。例如：
<!DOCTYPE html> <html> <head> <body> <div id=”myDiv”>Right click or Ctrl+click me to get a custom context menu. Click anywhere else to get the default context menu.</div> <ul id=”myMenu” style=”position:absolute;visibility:hidden;background-color:silver”> <li><a href=”http://www.nczonline.net”>Nicholas’ site</a></li> <li><a href=”http://www.wrox.com”>Wrox site</a></li> <li><a href=”http://www.yahoo.com”>Yahoo!</a></li> </ul> </body> </html>
这里的div元素包含一个自定义的上下文菜单，其中ul元素作为自定义上下文菜单，并且在初始化时隐藏的，js代码如下：
EventUtil.addHandler(window,”load”,function(event){ var div=document.getElementById(“myDiv”); EventUtil.addHandler(div,”contextmenu”,function(event){ Event=EventUtil.getEvent(event); EventUtil.preventDefault(event); var menu=document.getElementById(“myMenu”); menu.style.left=event.clientX+”px”; menu.style.top=event.clientY+”px”; menu.style.visibility=”visible”; }); EventUtil.addHandler(document,”click”,function(event){ Document.getElementById(“myMenu”).style.visibility=”hidden”; }) });
2. beforeunload事件
之所以有发生在window对象上的beforeunload事件，是为了让开发人员有可能在页面卸载前阻止这一操作。这个事件会在浏览器卸载之前触发，可以通过它来取消卸载并继续使用原有页面。
3. DOMContentLoaded事件
window的load事件会在页面中的一切都加载完毕时触发，但这个过程可能会因为要加载的外部资源过多而费时间，而DOMContentLoaded事件则在形成完整的DOM树之后就会触发，不理会图像、JavaScript文件、css文件或其他资源是否已经下载完毕，与load事件不同。
对于不支持DOMContentLoaded的浏览器，我们建议在页面加载期间设置一个时间为0毫秒的定时器，如：
setTimeout(function(){ //在此添加事件处理程序 },0);
这段代码的实际意思就是：“在当前JavaScript处理完成后立即运行这个函数”，在页面下载和构建期间，只有一个JavaScript处理过程，因此定时器会在该过程结束时立即触发，至于这个事件与DOMContentLoaded被触发的时间能否同步，主要还是取决于用户使用的浏览器和页面中的其他代码，为了确保这个方法有效，必须将其作为页面中的第一个超时调用；即便如此，也还是无法保证在所有环境中该超时调用一定会遭遇load事件被触发。
4. readystatechange事件
IE为DOM文档中的某些部分提供了readystatechange事件，这个事件的目的是提供与文档或元素的加载状态有关的信息，但这个事件的行为有时候也是很难预料，支持readystatechange事件的每个对象都有一个readyState属性。
uninitialized（未初始化）：对象存在但未初始化。
loading（正在加载）：对象正在加载数据。
loaded（加载完毕）：对象加载数据完成。
interactive（交互）：可以操作对象了，但还没有完全加载。
complete（完成）：对象已经加载完毕。
这些状态看起来很直观，但并非所有对象都会经历readyState的这几个阶段，如果某个阶段不适用某个对象，则该对象完全可能跳过该阶段，并没有规定哪个阶段适用哪个对象，显然，这意味着readystatechange事件经常会少于4次，而readyState属性的值也不总是连续的。
对应document而言，值为“interactive”的readyState会在于DOMContentLoaded大致相同的时刻触发readystatechange事件，此时，DOM树已经加载完毕，可以安全地操作它，因此就会进入交互阶段。但与此同时，图像及其他外部文件不一定可用。下面来看一段处理readystatechange事件的代码。
EventUtil.addHandler(document,”readystatechange”,function(event){ If(document.readyState==”interactive”){ alert(“Content loaded”); } })
5. pageshow和pagehide事件
Firefox和Opera有一个特性，名叫“往返缓存”，可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度，这个缓存中不仅保存着页面的数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里，如果页面位于bfcache中，那么再次打开该页面时不会触发load事件，尽管由于内存中保存了整个页面的状态，不触发load事件也不应该会导致失明问题。
第一个事件是pageshow，这个事件在页面显示时触发，无论该页面是否来着bfcache，在重新加载的页面中，pageshow会在load事件触发后触发，而对于bfcache中的页面，pageshow会在页面状态完全恢复的那一刻触发。看下面例子：
(function(){ var showCount=0; EventUtil.addHandler(window,”load”,function(){ alert(“Load fired”); }); EventUtil.addHandler(window,”pageshow”,function(){ showCount++; alert(“Show has been fired ”+showCount+”times.”) }) })();
除了通常的属性之外，pageshow事件的event对象还包含一个名为persisted的布尔值属性。如果页面被保存在了bfcache中，则这个属性的值为true；否则，这个属性的值为false，可以像下面这样在事件处理程序中检测这个属性。
(function(){ var showCount=0; EventUtil.addHandler(window,”load”,function(){ alert(“Load fired”); }); EventUtil.addHandler(window,”pageshow”,function(){ showCount++; alert(“Show has been fired ”+showCount+” time. Persisted? ”+event.persisted); }); })();
通过检测persisted属性，就可以根据页面在bfcache中的状态来确定是否需要采取其他操作。
与pageshow事件对应的是pagehide事件，该事件会在浏览器卸载页面的时候触发，而且是在unload事件之前触发，与pageshow事件一样，pagehide在document上触发，但其事件处理程序必须要添加到window对象。这个事件的wvent对象也包含persisted属性，不过其用途稍有不同，例如：
EventUtil.addHandler(window.”pagehide”,function(event){ alert(“Hiding. Persisted?”+event.persisted); });
有时候，可能需要在pagehide事件触发时根据persisted的值采取不同的操作，对应pageshow事件，如果页面是从bfcache中加载的，那么persisted的值就是true；对于pagehide事件，如果页面在卸载之后会被保存在bfcache中，那么persisted的值也会被设置为true，因此，当一次触发pageshow时，persisted的值一定是false，而在第一次触发pagehide时，persisted就会变成true。
- hashchange事件
HTML5新增了haschange事件，以便在URL的参数列表（及URL中“#”号后面的所有字符串）发生变化时通知开发人员，之所以新增这个事件，是因为在ajax应用中，开发人员经常要利用URL参数列来保存状态或导航信息。
必须要把hashchange事件处理程序添加给window对象，然后URL参数列表只要变化就会调用它，此时的event对象应该额外包含两个属性：oldURL和newURL，这两个属性分别保存着参数列表变化前后的完整URL。例如：
EventUtil.addHandler(window,”hashchange”,function(event){ alert(“Old URL:”+event.oldURL+” New URL:”+event.newURL); });
支持haschange事件的浏览器有ie8+、firefox3.6+、safari5+、chrome和opera10.6+。在这些浏览器中，只有Firefox 6+、Chrome和Opera支持oldURL和newURL属性，为此最后是使用location对象确定当前参数列表。
EventUtil.addHandler(window,”hashchange”,function(event){ alert(“Current hash:”+loacation.hash); });
使用以下代码可以检测浏览器是否支持haschange事件：
var isSupported=(“onhashchange” in window);
如果IE8是在IE7文档模式下运行，即使功能无效它也会返回true，为解决这个问题，可以使用一下这个更稳妥的检测方式：
var isSupported=(“onhashchange” in window)&&(document.documentMode===undefined||document.documentMode>7);