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

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

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

最后這個(gè)布爾值參數(shù)是true，表示在捕獲階段調(diào)用事件處理程序；如果是false，表示在冒泡階段調(diào)用事件處理程序。默認(rèn)為false;

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

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

在 冒泡 中，內(nèi)部元素的事件會(huì)先被觸發(fā)，然后再觸發(fā)外部元素，即： <p> 元素的點(diǎn)擊事件先觸發(fā)，然后會(huì)觸發(fā) <div> 元素的點(diǎn)擊事件。

在 捕獲 中，外部元素的事件會(huì)先被觸發(fā)，然后才會(huì)觸發(fā)內(nèi)部元素的事件，即： <div> 元素的點(diǎn)擊事件先觸發(fā) ，然后再觸發(fā) <p> 元素的點(diǎn)擊事件。

假如在一個(gè)按鈕上添加一個(gè)點(diǎn)擊事件，代碼如下：

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

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

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

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

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

在這個(gè)例子中，removeEventListener無法刪除addEventListener所追加的事件，因?yàn)閮蓚€(gè)方法并不相等，內(nèi)存地址已經(jīng)是不同的，如下面的例子所示：

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 事件句柄，鼠標(biāo)在桔紅色的框內(nèi)移動(dòng)時(shí)會(huì)顯示隨機(jī)數(shù)。 <p>點(diǎn)擊按鈕移除 DIV 的事件句柄。</p> <button onclick='removeHandler()' id='myBtn'>點(diǎn)我</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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。