在Nicholas C.Zakas"《Professional JavaScript for Web Developer》一书中,对于解决event对象兼容性问题进行了归纳封装。
优点:无需过多考虑不同浏览器对event对象的差异,统一采用DOM标准调用event对象的方法和属性
跨平台的事件
1-创建Eventutil对象(工具包)
</>复制代码
var Eventutil=new Object(); //OR var Eventutil={};
2-添加事件处理函数
</>复制代码
Eventutil.addEventHandler=function(obj,type,fnName){
if(obj.addEventListener){//for DOM
obj.addEventListener(type,fnName,false);
}else if(obj.attachEvent){//for IE
obj.attachEvent("on"+type,fnName);
}else{//for others
obj["on"+type]=fnName;
}
}
3-删除事件处理函数
</>复制代码
Eventutil.removeEventHandler=function(obj,type,fnName){
if(obj.removeEventListener){//for DOM
obj.removeEventListener(type,fnName,false);
}else if(obj.detachEvent){//for IE
obj.detachEvent("on"+type,fnName);
}else{//for others
obj["on"+type]=null;
}
}
3-格式化event对象
</>复制代码
Eventutil.formatEvent=function (oEvent){
if(document.all){
//IE字符代码用keyCode,而DOM用charCode
oEvent.charCode=(oEvent.type=="keypress")?oEvent.keyCode:0;
//eventphase:1-Event.CAPTURING_PHASE..
//2-Event.AT_TARGET,3-Event.BUBBLING_PHASE
oEvent.eventPhase=2;
oEvent.isChar=(oEvent.charCode>0);
//pageX,pageY和clientX,clientY(IE no pageX/Y)
oEvent.pageX=oEvent.clientX+document.body.scrollLeft;
oEvent.pageY=oEvent.clientY+document.body.scrollTop;
//阻止默认行为,IE:returnValue=false;DOM:preventDefault();
oEvent.preventDefault=function(){
this.returnValue=false;//?能不能用oEvent 当然可以
};
//取消事件冒泡,IE:cancelBubble=true;DOM:stopPropagation()
oEvent.stopPropagation=function(){
this.cancelBubble=true;
};
//引起事件的元素,IE:srcElement;DOM:target
oEvent.target=oEvent.srcElement;
//事件的第二目标
//IE:fromElement(鼠标所要离开的元素)-toElement(鼠标所要移入的元素)
//DOM标准:relatedTarget
if(oEvent.type=="onmouseover"){
oEvent.relatedTarget=oEvent.fromElement;
}else if(oEvent.type=="onmouseout"){
oEvent.relatedTarget=oEvent.toElement;
}
//事件发生的时间,IE:no,DOM:timestamp(时间戳)
oEvent.timeStamp=(new Date().getTime());
}
return oEvent;
}
4-获取事件对象
在IE中,事件对象时window对象的一个属性event
在DOM标准中,event对象必须作为唯一的参数传递给事件处理函数
关于caller的具体用法请参考click here
</>复制代码
Eventutil.getEvent=function(){
if(window.event){
return this.formatEvent(window.event);
}else{
//caller-每一个函数都有的属性,它包含了指向了调用它的方法的引用
return Eventutil.getEvent.caller.arguments[0];
}
}
5-使用方法
DEMO-阻止右键菜单JavaScript代码(HTML省略,请读者自行加上)
</>复制代码
var oDiv=document.getElementById("demo");
document.oncontextmenu=function(){
var e=Eventutil.getEvent();
e.preventDefault();
}
最后的话:
如有错误或者不妥还请斧正!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/87551.html
摘要:什么是继承继承是一种减少重复性代码的一种设计模式,尽量弱化对象间耦合,开闭原则的一种很好的实现。三掺元类这种继承方式是为了扩充类的一些重复函数而不重写代码,这个也是一种多继承的效果。所以在使用的继承前,最好可以很好的理解下原型链这个概念。 什么是继承 继承是一种减少重复性代码的一种设计模式,尽量弱化对象间耦合,开闭原则的一种很好的实现。 javascript继承 由于javascrip...
摘要:而就是产品具体实现某一种语言和文化的过程。货币的符号,以及数字分割方式各个国家都存在不同。那么有没有其他的复数形式回答当然是肯定的,比如波兰语。但这个是自己的语法,并非标准,同时这个语法还会破坏的测试,并不是一个很好的选择。 记得我刚来我们公司的时候,接手现在负责的项目的时候,我就发觉了一个问题:所有的文本资源都是硬编码在代码里面。这当然会带来很多问题。但考虑到我负责的这个项目是公司内...
摘要:該支持下列事件當到的連接已建立時觸發。取得該調試協議描述符。在關閉請求收到響應后執行,他將獲得下列參數一個對象,指明成功狀態當缺省時,將返回一個對象。當缺省時,將返回一個對象,並且狀態取決于屬性。 本文翻譯自:chrome-remote-interface原文更新時間:July 21,2017譯者:Pandorym Chrome 調試協議 的接口,他提供一個使用 JavaScript ...
阅读 1900·2021-10-12 10:12
阅读 2644·2021-09-29 09:42
阅读 2906·2021-09-03 10:28
阅读 2328·2019-08-30 15:54
阅读 1235·2019-08-30 15:53
阅读 1481·2019-08-30 11:26
阅读 3427·2019-08-30 11:02
阅读 2218·2019-08-30 11:02