纯JavaScript实现的兼容各浏览器的添加和移除事件封装

时间:2021-05-18

//事件处理兼容各种浏览器,采用能力检测方法,所谓能力检测,就是有能力就做,没有能力就不做 //定义一个处理事件的对象,兼容各种浏览器,dom2级事件处理和ie事件,如果这两个事件都不兼容,就采用dom0级处理 var eventUtil ={ addEvent:function(element,type,handler){ if (element.addEventListener) { //非IE浏览器采用dom2级事件处理,type为事件类型如:click,handler为事件处理函数,false代表事件采用冒泡处理模型,如果是true代表 采用捕获型处理模型 //除了netbeans采用捕获型处理模型,其他都采用冒泡型处理模型 //如果是非IE浏览器添加事件为:addEventListener element.addEventListener(type,handler,false); }else if (element.attachEvent) { //如果为IE浏览器,添加事件采用 attachEvent element.attachEvent('on'+type,handler); }else{ element['on'+type] = handler; } }, removeEvent:function(element,type,handler){ if (element.removeEventListener) { //非IE浏览器采用dom2级事件处理,type为事件类型如:click,handler为事件处理函数,false代表事件采用冒泡处理模型,如果是true代表 采用捕获型处理模型 //除了netbeans采用捕获型处理模型,其他都采用冒泡型处理模型 //如果是非IE浏览器添加事件为:removeEventListener element.removeEventListener(type,handler,false); }else if (element.detachEvent) { //如果为IE浏览器,添加事件采用 detachEvent element.detachEvent('on'+type,handler); }else{ //dom0级事件处理,如果删除事件采用赋值null element['on'+type] = null; } }, getEvent:function(event){ //获取事件本身 return event?event:window.event; }, getType:function(event){ //获取事件类型 return event.type; }, getElement:function(event){ //获取事件作用元素 return event.target || event.srcElement; }, preventDefault:function(event){ //阻止默认的事件行为 if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } }, stopProPagation:function(event){ //停止事件冒泡 if(event.stopProPagation){ event.stopProPagation(); }else{ event.cancelBubble = true; } } }

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章