星空网 > 软件开发 > Java

兼容主流浏览器的事件绑定函数

标准dom添加事件是用addEventListener,ie6-8则是attachEvent。

今天写了一个兼容两者的添加事件函数,并且支持同时绑定多种事件类型,代码如下:

 1 var addEvent = (function() { 2   if(window.addEventListener) { 3     return function(elem, type, fn, capture) { 4       if(type.indexOf(",") !== -1) { 5         var types = type.split(/(?:\s+)?\,(?:\s+)?/); 6         for(var i = 0; i < types.length; i++) { 7           elem.addEventListener(types[i], fn, capture); 8         } 9       } else {10         elem.addEventListener(type, fn, capture);11       }12     }13   } else {14     return function(elem, type, fn, capture) {15       if(type.indexOf(",") !== -1) {16         var types = type.split(/(?:\s+)?\,(?:\s+)?/);17         for(var i = 0; i < types.length; i++) {18           elem.attachEvent('on' + types[i], fn);19         }20       } else {21         elem.attachEvent('on' + type, fn);22       }23     }24   }25 })();

 

值得说一下的是这个addEvent函数是通过一个自执行函数定义的。
自执行函数里面先是判断浏览器是否支持addEventListener,如果支持就返回一个函数,这个函数里面是利用addEventListener绑定事件的。如果不支持addEventListener,也返回一个函数,而这个函数是利用attachEvent来绑定事件的。

 

此外还支持同时绑定多种事件类型,通过分号隔开:

1 addEvent(window, 'load, click, mousedown', function() {
  //事件触发后执行
}, false);

 

小细节:因为attachEvent不支持事件捕获,所以绑定的时候直接忽略capture参数。

1  elem.attachEvent('on' + types[i], fn);

 




原标题:兼容主流浏览器的事件绑定函数

关键词:浏览器

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

速卖通资深运营6大经验:助你吸引更多买家!:https://www.ikjzd.com/articles/97416
中美贸易战如何影响海运业?:https://www.ikjzd.com/articles/97417
那么多个KOL,哪一个才是最带货的?!:https://www.ikjzd.com/articles/97418
亚马逊被广大卖家所熟知,无货源模式助你轻松做跨境!:https://www.ikjzd.com/articles/97419
小白如何做跨境电商亚马逊?需要准备什么?:https://www.ikjzd.com/articles/97422
转化与亚马逊CPC不得不说的内容:https://www.ikjzd.com/articles/97423
TikTok退出美国?商家:等等!:https://www.kjdsnews.com/a/1836334.html
越南是你的潜在市场吗?最全越南外贸市场概况!:https://www.kjdsnews.com/a/1836335.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流