js中的addEventListener

　addEventListener()方法:

　　addEventListener() 方法為指定元素指定事件處理程序。

　　addEventListener() 方法為元素附加事件處理程序而不會覆蓋已有的事件處理程序。

　　您能夠向一個元素添加多個事件處理程序。

　　您能夠向一個元素添加多個相同類型的事件處理程序，例如兩個 "click" 事件。

　　您能夠向任何 DOM 對象添加事件處理程序而非僅僅 HTML 元素，例如 window 對象。

　　addEventListener() 方法使我們更容易控制事件如何對冒泡作出反應。

　　當使用 addEventListener() 方法時，JavaScript 與 HTML 標記是分隔的，已達到更佳的可讀性；即使在不控制 HTML 標記時也允許您添加事件監聽器。

　　您能夠通過使用 removeEventListener() 方法輕松地刪除事件監聽器。

語法:

　　目標源.addEventListener(“事件”,函數處理,布爾類型)

　　　　第一個參數是事件的類型（比如 "click" 或 "mousedown"）。

　　　　第二個參數是當事件發生時我們需要調用的函數。

　　　　第三個參數是布爾值，指定使用事件冒泡還是事件捕獲。此參數是可選的。

　　　　注意：請勿對事件使用 "on" 前綴；請使用 "click" 代替 "onclick"。

　　例如:

　　

document.addEventListener("click",function(ev){
    alert(”aaa“);
})
//當點擊整個文檔時，彈出aaa

第三個參數:

　　默認值是 false，將使用冒泡傳播，如果該值設置為 true，則事件使用捕獲傳播。

想要更了解冒泡與捕獲機制看我另一篇隨筆，這里就不介紹了。

 

removeEventListener() 方法

removeEventListener() 方法會刪除已通過 addEventListener() 方法附加的事件處理程序。

語法:

　　事件源.removeEventListener(事件,事件名);

　　注意： 如果要移除事件句柄，addEventListener() 的執行函數必須使用外部函數，如上實例所示 (myFunction)。

　　匿名函數，類似 "document.removeEventListener("event", function(){ myScript });" 該事件是無法移除的。

 版本兼容:

　　IE 8、Opera 6.0 及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。不過，對於這些特殊的瀏覽器版本，您可以使　　　　用 attachEvent() 方法向元素添加事件處理程序，並由 detachEvent() 方法刪除：