麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > JavaScript > 正文

實例講解jQuery中對事件的命名空間的運用

2019-11-20 09:56:09
字體:
來源:轉載
供稿:網友

用 jQuery 綁定和解綁事件監聽器都是非常簡單的。但是當你為一個元素的一個事件綁定了多個監聽器時,怎樣精確地解綁其中一個監聽器?我們需要了解一下事件的命名空間。

看下面這段代碼:

$(“#element”)  .on(“click”, doSomething)  .on(“click”, doSomethingElse);

像上面這樣綁定事件監聽器,當元素被點擊時,doSomething 和 doSomethingElse 這兩個監聽器都會被觸發。這是使用 jQuery 的一個便利之處,可以隨時給元素的同一個事件添加不同的監聽器。不像用 onclick 那樣,新的監聽器會覆蓋舊的。

如果你想解綁其中一個監聽器,比如 doSomething,怎么做呢?

是這樣嗎?

$(“#element”).off(“click”);

注意!上面這行代碼會把元素的 click 事件的所有監聽器全部解綁,而這并不是我們要的結果。

幸運的是 jQuery 的 .off() 方法可以接受第二個參數,就像 .on() 一樣。只要把監聽器函數的名字作為第二個參數傳入 .off() 方法,就能夠解綁指定的監聽器。

$(“#element”).off(“click”, doSomething);

但是如果你不知道這個函數的名字,或者你用的是匿名函數:

$(“#element”)  .on(“click”, function() {    console.log(“doSomething”);  });

怎樣才能精確地解綁某一個 click 事件監聽器呢?該了解一下 jQuery 的事件命名空間了!

先上代碼:

$(“#element”)  .on(“click.myNamespace”, function() {    console.log(“doSomething”);  });

這里不只是把 click 事件作為參數傳入 .on() 方法,而是給 click 事件指定了一個命名空間,然后監聽了這個命名空間里的 click 事件。此時,即使監聽器是匿名函數,實際上它也是“有名”的了。現在你可以像下面這樣解綁某一個具體的命名空間里的事件監聽器了。

$(“#element”).off(“click.myNamespace”);

這是 jQuery 為我們提供的又一個方便而強大的功能,它的內部實現肯定很有意思!

我們再來看一些代碼:

$(“#haorooms”).on("click.a",function(){});$(“#haorooms”).on("click.a.bb",function(){});$(“#haorooms”).on("dbclick.a",function(){});$(“#haorooms”).on("mouseover.a",function(){});$(“#haorooms”).on("mouseout.a",function(){});

當然,我們也可以用bind進行事件綁定。我們看到上面的代碼,我們可以在事件后面,以點號,加我們的名字,就是事件命名空間。所謂事件命名空間,就是事件類型后面以點語法附加一個別名,以便引用事件,如”click.a”,其中”a”就是click當前事件類型的別名,即事件命名空間。

假如我們要刪除如下命名空間:

$(“#haorooms”).on("click.a.bb",function(){});

我們可以用:

$(“#haorooms”).off("click.a.bb");//直接刪除bb命名空間 【推薦】$(“#haorooms”).off(".bb"); //直接刪除bb命名空間 【推薦】$(“#haorooms”).off(".a"); //刪除.a命名空間下面所有的子空間【包括.a.bb  .a.cc等等,.a是.bb的父級,因此.a下面的都會刪掉】$(“#haorooms”).off("click");//直接解綁click,下面的命名空間都會刪除。

要注意的是:

假如我們寫了如下代碼:

$(“#haorooms”).on("click",function(){});$(“#haorooms”).on("click.a",function(){});$(“#haorooms”).on("click.a.bb",function(){});

那么我們要用trigger觸發click事件,也就是觸發第一個,豈不是把click.a和click.a.bb都觸發了,那如何解決這個問題呢,我只想觸發click,而不觸發click.a及以下的命名空間?

沒關系! 有如下解決辦法:

如果事件類型后面附加感嘆號,則表示觸發不包含命名空間的特定事件類型。

假如我們只想觸發click,可以這么寫:

$(“#haorooms”).trigger("click!")

只觸發bb,可以這么寫:

$(“#haorooms”).trigger("click.a.bb");

有了命名空間,可以方便我們在同一個事件上面做管理啦!!!

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 日本黄色一级视频 | 精品中文字幕久久久久四十五十骆 | 91精品国产乱码久久桃 | 成人勉费视频 | 国产精品久久77777 | 免费亚洲视频在线观看 | 国产一级在线看 | 久久综合网址 | 欧美三级短视频 | 国产一级毛片高清 | 久久经典国产视频 | 免费一级片观看 | 亚洲视屏在线 | 黄色片网站在线看 | 国产a级久久 | 成年人黄视频 | av在线免费播放网站 | 久久久久久久亚洲精品 | 91亚洲免费视频 | 午夜免费网 | 国产精品久久久久久久午夜片 | 久久精品国产一区二区电影 | 免费一级毛片电影 | 97视频| 欧美aaaaa一级毛片在线 | 一级片九九| 久久国产精品久久久久 | 草妞视频 | 色人阁在线视频 | 国产精品91久久久 | 久久久久久久久国产 | 综合在线一区 | 日本不卡一区二区在线观看 | 国产成人77亚洲精品www | 日本人乱人乱亲乱色视频观看 | 91麻豆精品国产91久久久更新资源速度超快 | 久久影城| 国产又白又嫩又紧又爽18p | 国产美女视频黄a视频免费 日韩黄色在线播放 | 日本中文字幕电影在线观看 | 国产a级网站 |