引子：用javascript給元素綁定事件，我們可以用addEventListener這個方法，然而這個方法有相容問題，比如在IE瀏覽器上面就無效，在IE上面要用attachEvent這個方法 一、addEventListener和attachEvent的區別： 1、addEventListener ...
引子：用javascript給元素綁定事件，我們可以用addEventListener這個方法，然而這個方法有相容問題，比如在IE瀏覽器上面就無效，在IE上面要用attachEvent這個方法
一、addEventListener和attachEvent的區別：
1、addEventListener有3個參數，attachEvent只有2個參數，預設是冒泡
2、addEventListener的第一個參數是事件類型（例如：click）,attachEvent的第一個參數是事件處理函數名稱（例如：onclick）
3、this的指向不同，addEventListener中的this,指的是觸發的元素，attachEvent中的this指的window
4、為一個事件添加多個事件處理程式，執行的順序不同，addEventListener會按照添加的處理程式順序執行，attachEvent的執行順序是隨機的
二、相容性封裝處理：
舉例的HTML結構如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>test001</title>
<style type="text/css">
.red{color:red;}
</style>
</head>
<body class="l-bg2">
<button id="cnt" class="btn">1111</button>
<button class="btn">2222</button>
<button class="btn">3333</button>
<div class="page-coat">
</div>
</body>
js代碼封裝如下:
var eles = document.querySelectorAll('.btn') //類數組 //var eles = document.getElementById('cnt') //單個 function addEvent(ele,type,callback){ if(!ele){ return false }; if(!ele.length){ if(ele.addEventListener){ ele.addEventListener(type,callback,false) return true; }else if(ele.attachEvent){ ele['e'+type+callback] = callback; ele[type+callback] = function(){ ele['e'+type+callback](window.event) }; ele.attachEvent('on'+type,ele[type+callback]) return true } return false }else{ for(var i=0;i<ele.length;i++){ eventBody(i) } } //處理類數組元素同時綁定事件方法 function eventBody(i){ if(ele[i].addEventListener){ ele[i].addEventListener(type,callback,false); }else if(ele[i].attachEvent){ ele[i]['e'+type+callback] = callback; ele[i][type+callback] = function(){ ele[i]['e'+type+callback](window.event) } ele[i].attachEvent('on'+type,ele[i][type+callback]) } } } function func1(){ alert(this.innerText) }
//使用方法 addEvent(eles,'click',func1)
這樣就解決瞭解決了上面提到的addEventListener和attachEvent的區別問題。
註意：1、this指向的知識，以上巧妙運用了this指向調用這個函數的對象（比如ele），來保證在IE瀏覽器中，this指向調用次事件的元素
2、閉包的知識，把for迴圈的每個 i 值，通過閉包保存，如果是ES6，可以用let,就更方便了
以上目的為了討論學習，有不完善的地方希望大家原諒，並提出更好的方法，謝謝
