码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-05-21 19:24:00      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:

标准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);

 

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

标签:

原文地址:http://www.cnblogs.com/ruleblog/p/4520441.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!