addEventListener()與removeEventListener()解析
addEventListener()與removeEventListener()用于處理指定和刪除事件處理程序操作。
所有的DOM節(jié)點(diǎn)中都包含這兩種方法,并且它們都接受3個參數(shù):要處理的事件名、作為事件處理程序的函數(shù)和一個布爾值。
最后這個布爾值參數(shù)是true,表示在捕獲階段調(diào)用事件處理程序;
如果是false(false- 默認(rèn)),表示在冒泡階段調(diào)用事件處理程序。
addEventListener的參數(shù)一共有三個,語法為:
element.addEventListener(type,listener,useCapture)
下面是詳解:
1、其中element是要綁定函數(shù)的對象。
2、type是事件名稱,要注意的是"onclick"要改為"click","onblur"要改為"blur",也就是說事件名不要帶"on"。
3、listener當(dāng)然就是綁定的函數(shù)了,記住不要跟括號
4、最后一個參數(shù)是個布爾值,表示該事件的響應(yīng)順序,下面重點(diǎn)介紹一下addEventListener的第3個參數(shù)(useCapture)。
要在按鈕上為click事件添加事件處理程序,可以使用下列代碼:
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);
在這個例子中,我使用addEventListener()添加一個事件處理程序。
雖然調(diào)用removeEventListener看似使用了相同的參數(shù)
但實(shí)際上,第二個參數(shù)與傳入addEventListener()中的是完全不同的函數(shù)。
而傳入removeEventListener()中的事件處理程序函數(shù)必須與傳入addEventListener()中的相同,
下面的例子所示:
var btn = document.getElementById("myBtn"); var handler = function () { alert(this.id); }; btn.addEventListener("click", handler, false); btn.removeEventListener("click", handler, false); //有效!
重寫后的這個例子沒有問題,是因?yàn)樵赼ddEventListener()和removeEventListener()中用來相同的函數(shù)。
實(shí)驗(yàn)結(jié)果是,用戶點(diǎn)擊button時,每次都會輸出"I have been clicked!",說明removeEventListener()函數(shù)沒有起到作用。
通過查找資料,得出結(jié)論。在使用removeEventListener()函數(shù)時,handler函數(shù),必須和使用addEventListener()里面的handler函數(shù)必須相同。
所以上面寫的代碼是錯誤的。修正之后的代碼應(yīng)該如下:
//addEventListener()和removeEventListener()中handler函數(shù)必須相同,移除事件函數(shù)才有效。 function myhandler(){ console.log("I have been clicked!"); document.getElementById('info').removeEventListener('click',myhandler,false); } var target=document.getElementById('info'); target.addEventListener("click", myhandler, false); target.removeEventListener("click", myhandler, false); //有效!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
瀏覽器解析js生成的html出現(xiàn)樣式問題的解決方法
接觸css, javascript有三年多了,今天遇到的問題最令我不可思議,很容易給人一種錯覺,那就是js拼成的html結(jié)構(gòu)肯定有問題2012-04-04JavaScript基礎(chǔ)知識及常用方法總結(jié)
JAVASCRIPT是AJAX技術(shù)中不可或缺的一部分,所以想學(xué)好AJAX以及現(xiàn)在流行的AJAX框架,學(xué)好JAVASCRIPT是最重要的,通過本篇文章給大家介紹javascript基礎(chǔ)知識及常用方法總結(jié),對js基礎(chǔ)知識及常用方法相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01JS實(shí)現(xiàn)中英文混合文字溢出友好截取功能
這篇文章主要介紹了JS實(shí)現(xiàn)中英文混合文字溢出友好截取功能,通常會用到j(luò)s的 substr 或者 substring方法, 以及 字符串的length屬性。需要的朋友可以參考下2018-08-08JS實(shí)現(xiàn)上傳圖片的三種方法并實(shí)現(xiàn)預(yù)覽圖片功能
在用戶注冊頁面,需要用戶在本地選擇一張圖片作為頭像,并同時預(yù)覽,實(shí)現(xiàn)思路有兩種,具體實(shí)現(xiàn)方法和實(shí)例代碼大家參考下本文2017-07-07