欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

addEventListener()與removeEventListener()解析

 更新時間:2017年04月20日 11:25:24   投稿:lijiao  
這篇文章主要為大家詳細(xì)介紹了addEventListener()與removeEventListener(),用于處理指定和刪除事件處理程序操作,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

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)文章

  • 跨域表單提交狀態(tài)的變相判斷代碼

    跨域表單提交狀態(tài)的變相判斷代碼

    通過表單在iframe內(nèi)向一個跨域的url提交的時候,如何判斷提交成功了呢?這個,基本上,很難,因?yàn)闉g覽器安全沙箱的限制,我們沒有辦法通過獲得iframe內(nèi)部不同域頁面的信息。
    2009-11-11
  • js時間戳與日期格式之間轉(zhuǎn)換詳解

    js時間戳與日期格式之間轉(zhuǎn)換詳解

    這篇文章主要為大家詳細(xì)介紹了js時間戳與日期格式之間轉(zhuǎn)換,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-12-12
  • 瀏覽器解析js生成的html出現(xiàn)樣式問題的解決方法

    瀏覽器解析js生成的html出現(xiàn)樣式問題的解決方法

    接觸css, javascript有三年多了,今天遇到的問題最令我不可思議,很容易給人一種錯覺,那就是js拼成的html結(jié)構(gòu)肯定有問題
    2012-04-04
  • 原生js寫的放大鏡效果

    原生js寫的放大鏡效果

    在淘寶上購物時,總會看到類似放大鏡的效果。以下為原生js寫的一個放大鏡效果,其中肯定有很多不足,請大牛們指正,謝啦
    2012-08-08
  • JavaScript基礎(chǔ)知識及常用方法總結(jié)

    JavaScript基礎(chǔ)知識及常用方法總結(jié)

    JAVASCRIPT是AJAX技術(shù)中不可或缺的一部分,所以想學(xué)好AJAX以及現(xiàn)在流行的AJAX框架,學(xué)好JAVASCRIPT是最重要的,通過本篇文章給大家介紹javascript基礎(chǔ)知識及常用方法總結(jié),對js基礎(chǔ)知識及常用方法相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
    2016-01-01
  • JS實(shí)現(xiàn)中英文混合文字溢出友好截取功能

    JS實(shí)現(xiàn)中英文混合文字溢出友好截取功能

    這篇文章主要介紹了JS實(shí)現(xiàn)中英文混合文字溢出友好截取功能,通常會用到j(luò)s的 substr 或者 substring方法, 以及 字符串的length屬性。需要的朋友可以參考下
    2018-08-08
  • 微信小程序?qū)崿F(xiàn)滑動翻頁效果(完整代碼)

    微信小程序?qū)崿F(xiàn)滑動翻頁效果(完整代碼)

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)滑動翻頁效果,本文通過效果圖展示實(shí)例代碼講解的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-12-12
  • 微信小程序傳值常用的4種方式

    微信小程序傳值常用的4種方式

    微信小程序開發(fā)中的大部分知識點(diǎn)和前端開發(fā)是一模一樣的,這篇文章主要給大家介紹了關(guān)于微信小程序傳值常用的4種方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-05-05
  • xcode中獲取js文件的路徑方法(推薦)

    xcode中獲取js文件的路徑方法(推薦)

    下面小編就為大家?guī)硪黄獂code中獲取js文件的路徑方法(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-11-11
  • JS實(shí)現(xiàn)上傳圖片的三種方法并實(shí)現(xiàn)預(yù)覽圖片功能

    JS實(shí)現(xiàn)上傳圖片的三種方法并實(shí)現(xiàn)預(yù)覽圖片功能

    在用戶注冊頁面,需要用戶在本地選擇一張圖片作為頭像,并同時預(yù)覽,實(shí)現(xiàn)思路有兩種,具體實(shí)現(xiàn)方法和實(shí)例代碼大家參考下本文
    2017-07-07

最新評論