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
阅读全文
0 0
- HTML5事件器
- HTML5事件
- HTML5事件
- HTML5事件
- 使用 HTML5 视频事件
- 使用 HTML5 视频事件
- HTML5 事件属性
- HTML5参考手册之事件
- 10.HTML5 JavaScript 事件
- HTML5中的拖放事件
- HTML5 video 事件
- HTML5 事件属性大全
- 【HTML5】DOMContentLoaded事件
- 使用 HTML5 video 事件
- HTML5中的onload事件
- 【HTML5】DOMContentLoaded事件
- 【Html5 WebSocket】WebSocket事件
- html5 滑动事件
- 线程之间的先行关系
- H
- MySQL更新锁(for update)摘要
- UEditor上传图片和上传文件(基于jquery)
- 20170719
- HTML5事件器
- Java基本类型和包装类型总结
- python库管理工具pip,pygame安装及环境变量配置
- hdu5826
- 安装.net framework 4.0失败,出现HRESULT 0xc8000222错误代码
- R语言之三种左连接
- Ehcache缓存框架入门级使用
- 堕落退散之日,奋斗开始之时!
- PHP获取curl传输进度