JS事件添加和移出的兼容写法示例
本文实例讲述了JS事件添加和移出的兼容写法。分享给大家供大家参考,具体如下:
varEventUtil={ addHandler:function(element,type,handler{ if(element.addEventListener){ element.addEventListener(type,handler,false); }elseif(element.attachEvent){ element.attachEvent("on"+type,handler); }else{ element["on"+type]=handler; } }, getEvent:function(event){ returnevent?event:window.event; }, preventDefault:function(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue=false; } }, removeHandsler:function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false); }elseif(element.detachEvent){ element.detachEvent("on"+type,handler); }else{ element["on"+type]=handler; } } stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } }, getRelatedTarget:function(event){ if(event.relatedTarget){ returnevent.relatedTarget; }elseif(event.toElement){ returnevent.toElement; }elseif(event.fromElement){ returnevent.fromElement; }esle{ returnnull; } }, getButton:function(event){ if(document.implementation.hasFeature("MouseEvents","2.0")){ returnevent.button; }else{ switch(event.button){ case0: case1: case3: case5: case7: return0; case2: case6: return2; case4: return1; } } } };
其中,addHandler和removeHandsler个方法首先都会检测传入的元素中是否存在DOM2级方法.如果存在DOM2级方法,则使用该方法:传入事件类型,事件处理程序函数和第三个参数fasle(表示冒泡阶段).如果存在的是IE的方法,则采取第二种方案.注意此时的事件类型必须加上"on"前缀.最后一种可能就是使用DOM0级方法(在现代浏览器中,应该不会执行这里的代码).此时,我们使用的是方括号语法来将属性名指定为事件处理程序,或者将属性设置为null.
可以像下面这样使用EventUtil对象:
varbtn=document.getElementById("myBtn"); varhandler=function(){ alert("Clicked"); }; EventUtil.addHandler(btn,"click",handler); //略去其他代码 EventUtil.removeHandler(btn,"click",handler);
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。