• addEventListener共有3個參數，如下所示：
element.addEventListener(type,listener,useCapture);
| 參數 | 參數說明 |
|---|---|
| element | 要綁定事件的對象，及HTML節點。 |
| type | 事件名稱，注意去掉事件前邊的“on”，比如“onclick”要寫成“click”，“onmouseover”要寫成“mouseover”。 |
| listener | 要綁定的事件監聽函數，注意只寫函數名，不要帶括號。 |
| userCapture | 事件監聽方式，只能是true和false：true，採用capture(捕獲)模式；false，採用bubbling(冒泡)模式。如無特殊要求，一般是false。 |
這裡有必要說一下捕獲模式和冒泡模式的區別。
如圖所示，有兩層div元素，而且都設定有click事件，一般來說，如果我在內層藍色的元素上click不只會觸發藍色元素的click事件，還會同時觸發紅色元素的click事件，而useCapture這個參數就是在控制這時候兩個click事件的先後順序。如果是false，那就會使用bubbling(冒泡)模式，他是從內而外的流程，所以會先執行藍色元素的click事件再執行紅色元素的click事件，如果是true，那就是capture(捕獲)模式，和bubbling(冒泡)模式相反是由外而內，會先執行紅色元素的click事件才執行藍色元素的click事件。
如果不同層的元素使用的useCapture不同，會先從最外層元素往目標元素尋找設定為capture(捕獲)模式的事件，到達目標元素執行目標元素的事件後，再尋原路往外尋找設定為bubbling(冒泡)模式的事件。
•attachEvent共有2個參數，如下所示：
element.attachEvent(type,listener);
| 參數 | 參數說明 |
|---|---|
| element | 要綁定事件的對象，及HTML節點。 |
| type | 事件名稱，注意加上事件前邊的“on”，比如“onclick”和“onmouseover”，這是與addEventListener的區別。 |
| listener | 要綁定的事件監聽函數，注意只寫函數名，不要帶括號。 |
addEventListener()是標準的綁定事件監聽函數的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持該函數；但是，IE8.0及其以下版本不支持該方法，它使用attachEvent()來綁定事件監聽函數。所以，這種綁定事件的方法必須要處理瀏覽器兼容問題。
兼容IE和非IE瀏覽器事件綁定的代碼：
function addEvent(obj,type,handle){ try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本obj.addEventListener(type,handle,false); }catch(e){ try{ // IE8.0及其以下版本obj.attachEvent('on' + type,handle); }catch(e){ // 早期瀏覽器obj['on' + type] = handle; } }}或者
function regEvent(ele, event_name, fun){ if (window.attachEvent) ele.attachEvent(event_name, fun); //IE瀏覽器else { event_name = event_name.replace(/^on/, “”); //如果on開頭，刪除on，如onclick->click ele.addEventListener(event_name, fun, false); //非IE瀏覽器}}以上這篇淺談addEventListener和attachEvent的區別就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。