本文實例講述了js中addEventListener()與removeEventListener()用法。分享給大家供大家參考，具體如下：

所有的DOM節點中都包含addEventListener()與removeEventListener()這兩種方法，用于追加事件和刪除追加。

接受參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。 (3個)

最后這個布爾值參數是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。默認為false;

事件傳遞有兩種方式：冒泡與捕獲。

事件傳遞定義了元素事件觸發的順序。 如果你將 <p> 元素插入到 <div> 元素中，用戶點擊 <p> 元素, 哪個元素的 'click' 事件先被觸發呢？

在 冒泡 中，內部元素的事件會先被觸發，然后再觸發外部元素，即： <p> 元素的點擊事件先觸發，然后會觸發 <div> 元素的點擊事件。

在 捕獲 中，外部元素的事件會先被觸發，然后才會觸發內部元素的事件，即： <div> 元素的點擊事件先觸發 ，然后再觸發 <p> 元素的點擊事件。

假如在一個按鈕上添加一個點擊事件，代碼如下：

var btn = document.getElementById('myBtn');btn.addEventListener('click', function () { alert(this.id);}, false);

使用DOM2級方法添加事件處理程序的主要好處是可以添加多個事件處理程序。來看下面的例子：

var btn = document.getElementById('myBtn');btn.addEventListener('click', function () { alert(this.id);}, false);btn.addEventListener('click', function () { alert('Hello World');}, false);

通過addEventListener()添加的事件處理程序只能使用removeEventListener()來移除；移除時傳入的參數與添加處理程序時使用的參數相同。通過addEventListener()添加的匿名函數無法移除，如下面的例子所示：

var btn = document.getElementById('myBtn');btn.addEventListener('click', function () { alert(this.id);}, false);btn.removeEventListener('click', function () { //無效！ alert(this.id);}, false);

在這個例子中，removeEventListener無法刪除addEventListener所追加的事件，因為兩個方法并不相等，內存地址已經是不同的，如下面的例子所示：

var btn = document.getElementById('myBtn');var handler = function () { alert(this.id); };btn.addEventListener('click', handler, false);btn.removeEventListener('click', handler, false); //有效！

案例：

<div id='myDIV'> div 元素添加了 onmousemove 事件句柄，鼠標在桔紅色的框內移動時會顯示隨機數。 <p>點擊按鈕移除 DIV 的事件句柄。</p> <button onclick='removeHandler()' id='myBtn'>點我</button></div><p id='demo'></p><script>document.getElementById('myDIV').addEventListener('mousemove', myFunction);function myFunction() { document.getElementById('demo').innerHTML = Math.random();}function removeHandler() { document.getElementById('myDIV').removeEventListener('mousemove', myFunction);}</script>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。