快捷導(dǎo)航

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

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

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

本文實(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è)事件處理程序。來(lái)看下面的例子：

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

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

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

在這個(gè)例子中，removeEventListener無(wú)法刪除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測(cè)試上述代碼運(yùn)行效果。

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

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

您可能感興趣的文章: