標準dom添加事件是用addEventListener,ie6-8則是attachEvent。瀏覽器
今天寫了一個兼容二者的添加事件函數,而且支持同時綁定多種事件類型,代碼以下:dom
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來綁定事件的。函數
此外還支持同時綁定多種事件類型,經過分號隔開:spa
1 addEvent(window, 'load, click, mousedown', function() {
//事件觸發後執行
}, false);
小細節:由於attachEvent不支持事件捕獲,因此綁定的時候直接忽略capture參數。code
1 elem.attachEvent('on' + types[i], fn);