标签:
标准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