您好,登錄后才能下訂單哦!
本文實例講述了js中addEventListener()與removeEventListener()用法。分享給大家供大家參考,具體如下:
所有的DOM節(jié)點中都包含addEventListener()與removeEventListener()這兩種方法,用于追加事件和刪除追加。
接受參數(shù):要處理的事件名、作為事件處理程序的函數(shù)和一個布爾值。 (3個)
最后這個布爾值參數(shù)是true,表示在捕獲階段調(diào)用事件處理程序;如果是false,表示在冒泡階段調(diào)用事件處理程序。默認(rèn)為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 事件句柄,鼠標(biāo)在桔紅色的框內(nèi)移動時會顯示隨機(jī)數(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測試上述代碼運行效果。
更多關(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錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。