HTML5事件器

1. contextmenu事件

目的：用以表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。
属于鼠标事件，其事件对象中包含与光标位置有关的所有属性。

<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>
    <script type="text/javascript">
        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";
            });//通过鼠标点击来隐藏菜单
        });

    </script>

---

2. beforeunload事件

目的：卸载页面前提醒用户

    <div id="myDiv">Try to navigate away from this page.</div>
    <script type="text/javascript">
        EventUtil.addHandler(window, "beforeunload", function(event){
            event = EventUtil.getEvent(event);
            var message = "I'm really going to miss you if you go.";
            event.returnValue = message;
            return message;
        });
    </script>

疑惑：最后出现的提示内容是系统自带的中文，不是我们自己写的英文。这是为什么？？

---

3. DOMContentLoaded事件

目的：在页面下载的早期添加事件处理程序(用户能够尽早地与页面进行交互。)

1. load事件：页面的一切都加载完时才能触发

2. DOMContentLoaded：则在形成完整的DOM树之后就会触发（不理会图像、js文件、css文件或者其他资源）

对于不支持DOMContentLoaded的浏览器，在页面加载期间设置一个事件为0的超时调用

//在当前js处理完成后，立即运行这个程序
 setTimeout(function(){
     //在此添加事件处理程序
}，0);

---

4. readystatechange事件

目的：提供与文档或元素状态有关的信息
支持readystatechange事件的每个对象都有一个readyState属性

---

5. pageshow和pagehide事件

概念：bfcache –往返缓存

（1） pageshow:页面显示时触发.

目的：重新加载的页面中，pageshow会在load事件触发后触发；对于bfcache中的页面，pageshow会在页面状态完全恢复的那一刻触发。

（2） pagehide

---

5. hashchange事件

目的：在URL的参数列表发生变化时通知开发人员
在ajax中，开发人员经常要用URL参数列表来保存状态或导航信息
包含属性： odlURL、newURL