兼容主流瀏覽器的事件綁定函數

標準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);
相關文章
相關標籤/搜索