瀏覽器支持的html5事件
一：阻止鼠標右鍵的contextmenu事件？
用來顯示上下文菜單，用來讓開發人員取消默認的上下文菜單，而提供自定義的菜單。這個事件可以冒泡。
下面的EventUtil.js爲解決兼容性的事件類，地址爲：
http://blog.csdn.net/flyingpig2016/article/details/53392688
下面是一個自己製作的右鍵菜單，代碼展示如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#myMenu{position: absolute;visibility: hidden;background:silver;}
</style>
</head>
<body>
<div id="myDiv">I am a programmer!</div>
<ul id="myMenu">
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.taobao.com">阿里</a></li>
<li><a href="http://www.jd.com">京東</a></li>
</ul>
</body>
<script src="../EventUtil.js"></script>
<script>
EventUtil.addHandler(window,"load",function(event){
var div = document.getElementById('myDiv');
var menu = document.getElementById("myMenu");
EventUtil.addHandler(div,"contextmenu",function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
menu.style.left = event.clientX + "px";
menu.style.top = event.clientY + "px";
menu.style.visibility = "visible";
})
EventUtil.addHandler(menu,"click",function(event){
event.stopPropagation();
})
EventUtil.addHandler(document,"click",function(event){
document.getElementById("myMenu").style.visibility = "hidden";
})
})
</script>
</html>二：退出頁面時的挽留事件beforeunload事件？
在：IE和Firefox中爲了顯示這個彈出對話框，必須將event.returnValue的值設置爲想要顯示的字符串,同時作爲返回值返回。但是Opera11及以前都不支持beforeunload事件。
EventUtil.addHandler(window,"beforeunload",function(event){
event = EventUtil.getEvent(event);
var message = "I am a teacher";
event.returnValue = message;
return message;
})三：比load觸發地還早的事件DOMContentLoaded事件？
DOMContentLoaded事件在形成完整的DOM樹之後就會觸發，不理會圖像、JavaScript文件、css文件或其他資源是否已經下載完畢。比load事件更先觸發。IE9、Firefox、Chrome、Safari3.1+和Opera9.0+都支持該事件。比較的程序如下：
EventUtil.addHandler(window,'load',function(event){
alert("window is loaded"); //最後觸發load事件
})
EventUtil.addHandler(document,'DOMContentLoaded',function(event){
alert("Content loaded"); //最先觸發DOMContentLoaded事件
})四：readystatechange事件用法？
我們在ajax中使用readystatechange，但是這次我們來單獨看一下readystatechange事件究竟怎麼使用，這個事件是提供和文檔或元素加載狀態有關的信息。支持readystatechange事件的每個對象都有一個readyState屬性。它可能包含5種值：
- uninitialized(未初始化)：對象存在但沒有初始化。
- loading：對象正在加載數據；
- loaded：對象數據加載完畢；
- interactive：可以操作對象，但是還沒有完全加載；
- complete：對象加載完畢了。
支持readystatechange事件的瀏覽器有：IE、Firefox4+和Opera。
- 當需要查看當前對象是否已經進入交互階段或完成階段，實現的代碼爲：
//其中註釋的序號爲觸發的順序
EventUtil.addHandler(window,'load',function(event){
alert("window is loaded"); //3
});
EventUtil.addHandler(document,'DOMContentLoaded',function(event){
alert("DOMContentLoaded"); //2
});
EventUtil.addHandler(document,"readystatechange",function(event){
if(document.readyState=="interactive" || document.readyState=="complete"){
//arguments.callee 在哪一個函數中運行，它就代表哪一個函數
EventUtil.removeHandler(document,"readystatechange",arguments.callee);
alert("readystatechange"); //1
}
});五：pageshow和pagehide事件檢測頁面是否來自“往返緩存”？
普通頁面pageshow在load事件後觸發，但是在緩存中的頁面pageshow會在頁面狀態完全回覆的那一刻觸發。檢測頁面是否被緩存到“往返緩存”中的方法是pageshow事件的persisted屬性。例子如下：
(function(){
var showCount = 0;
EventUtil.addHandler(window,"load",function(){//先觸發
alert("load fired");
});
EventUtil.addHandler(window,"pageshow",function(event){//後觸發
showCount ++ ;
alert("頁面是否被緩存到緩存中？ " + event.persisted + "觸發pageshow事件的次數：" + showCount);
})
})();與pageshow相反的事件是pagehide事件，該事件會在瀏覽器卸載頁面的時候觸發，而且是在unload事件之前觸發。它也包含persisted屬性：
EventUtil.addHandler(window,"pagehide",function(event){//後觸發
alert("頁面是否被緩存到緩存中？ " + event.persisted);
})支持pageshow和pagehide事件的瀏覽器有Firefox、Safari5+、Chrome和Opera。IE9以及以前版本。
六：hashchange事件？
HTML5事件新增了；hashchange事件，以便檢測URL的參數列表（或者URL“#”後面的所有字符串）的變化。使用的地方爲ajax應用中，開發人員需要利用URL參數列表來保存狀態或導航信息。
EventUtil.addHandler(window,"hashchange",function(event){
alert("Old URL: " + event.oldURL + "\nNew URL:" + event.newURL);
})
console.log(location);檢測瀏覽器是否支持hashchange事件的方法是：
這裏寫代碼片 var isSupported = ("onhashchange" in window) && (document.documentMode === undefined || document.documentMode >7);