想要兼容IE678，少用原型，因为它们没有完全实现ECMA-262规范
1 (function(window){ 2 //兼容IE678时少用原型，因为它没有完全遵循ECMA-262规范 3 4 //衬垫代码：isArray方法的兼容方案 5 if (!Array.isArray) { 6 Array.isArray = function(arg) { 7 return Object.prototype.toString.call(arg) === '[object Array]'; 8 }; 9 } 10 11 //衬垫代码：every数组过滤方法的兼容方案 12 if (!Array.prototype.every){ 13 Array.prototype.every = function(fun /*, thisArg */) 14 { 15 'use strict'; 16 17 if (this === void 0 || this === null) 18 throw new TypeError(); 19 20 var t = Object(this); 21 var len = t.length >>> 0; 22 if (typeof fun !== 'function') 23 throw new TypeError(); 24 25 var thisArg = arguments.length >= 2 ? arguments[1] : void 0; 26 for (var i = 0; i < len; i++) 27 { 28 if (i in t && !fun.call(thisArg, t[i], i, t)) 29 return false; 30 } 31 32 return true; 33 }; 34 } 35 36 var bear = { 37 //该函数是一个全兼容的事件绑定函数，但只能处理一个事件回调函数 38 addListener: function(node,name,fn){ 39 if(node.addEventListener){ 40 node.addEventListener(name,fn); 41 }else{ 42 node.attachEvent("on"+name,function(){ 43 fn.call(node); 44 }) 45 } 46 }, 47 48 //该函数是一个全兼容的事件绑定函数，能处理一个回调数组 49 addMoreListener: function(node,name,arr){ 50 if(typeof arr === "function"){ 51 bear.addListener(node,name,arr); 52 }else if(Array.isArray(arr)&&arr.length){ 53 if(node.addEventListener){ 54 55 }else if(node.attachEvent){ 56 arr = arr.reverse(); 57 } 58 var flag = arr.every(function(item){ 59 return typeof item === "function"; 60 }) 61 if(flag){ 62 for(var i=0;i<arr.length;i++){ 63 bear.addListener(node,name,arr[i]); 64 } 65 }else{ 66 throw new Error("数组内元素类型有误"); 67 } 68 }else{ 69 throw new Error("第三参数类型有误或为空数组"); 70 } 71 } 72 } 73 74 window.bear = bear; 75 })(window)
测试代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #app{ 12 width: 100px; 13 height: 100px; 14 background: #F4A460; 15 position: absolute; 16 left: 0; 17 right: 0; 18 bottom: 0; 19 top: 0; 20 margin: auto; 21 font: 20px/100px helvetica; 22 text-align: center; 23 24 } 25 </style> 26 27 28 <script src="./js/bear-extend-event2.js"></script> 29 <script> 30 window.onload = function(){ 31 32 var appNode = document.getElementById("app"); 33 var arr = [function(){console.log(1);},function(){console.log(2);}] 34 //debugger 35 bear.addMoreListener(appNode,"click",arr); 36 } 37 </script> 38 </head> 39 <body> 40 <div id="app">app</div> 41 </body> 42 </html>