浏览器支持的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);