HTML5事件器

来源:互联网 发布:航天金税官网开票软件 编辑:程序博客网 时间:2024/05/29 08:17

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

原创粉丝点击