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

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