js中addEventListener()與removeEventListener()用法案例分析

更新時間：2020年03月02日 09:54:40 作者：葉落森

這篇文章主要介紹了js中addEventListener()與removeEventListener()用法,結合實例形式分析了js中addEventListener()與removeEventListener()基本功能、用法與操作注意事項,需要的朋友可以參考下

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

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

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

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

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

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

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

在捕獲中，外部元素的事件會先被觸發(fā)，然后才會觸發(fā)內(nèi)部元素的事件，即： <div> 元素的點擊事件先觸發(fā) ，然后再觸發(fā) <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()來移除；移除時傳入的參數(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);

在這個例子中，removeEventListener無法刪除addEventListener所追加的事件，因為兩個方法并不相等，內(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 事件句柄，鼠標在桔紅色的框內(nèi)移動時會顯示隨機數(shù)。
 <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相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調(diào)試技巧總結》

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

您可能感興趣的文章: