實例講解jQuery中對事件的命名空間的運用
用 jQuery 綁定和解綁事件監(jiān)聽器都是非常簡單的。但是當(dāng)你為一個元素的一個事件綁定了多個監(jiān)聽器時,怎樣精確地解綁其中一個監(jiān)聽器?我們需要了解一下事件的命名空間。
看下面這段代碼:
$(“#element”) .on(“click”, doSomething) .on(“click”, doSomethingElse);
像上面這樣綁定事件監(jiān)聽器,當(dāng)元素被點擊時,doSomething 和 doSomethingElse 這兩個監(jiān)聽器都會被觸發(fā)。這是使用 jQuery 的一個便利之處,可以隨時給元素的同一個事件添加不同的監(jiān)聽器。不像用 onclick 那樣,新的監(jiān)聽器會覆蓋舊的。
如果你想解綁其中一個監(jiān)聽器,比如 doSomething,怎么做呢?
是這樣嗎?
$(“#element”).off(“click”);
注意!上面這行代碼會把元素的 click 事件的所有監(jiān)聽器全部解綁,而這并不是我們要的結(jié)果。
幸運的是 jQuery 的 .off() 方法可以接受第二個參數(shù),就像 .on() 一樣。只要把監(jiān)聽器函數(shù)的名字作為第二個參數(shù)傳入 .off() 方法,就能夠解綁指定的監(jiān)聽器。
$(“#element”).off(“click”, doSomething);
但是如果你不知道這個函數(shù)的名字,或者你用的是匿名函數(shù):
$(“#element”) .on(“click”, function() { console.log(“doSomething”); });
怎樣才能精確地解綁某一個 click 事件監(jiān)聽器呢?該了解一下 jQuery 的事件命名空間了!
先上代碼:
$(“#element”) .on(“click.myNamespace”, function() { console.log(“doSomething”); });
這里不只是把 click 事件作為參數(shù)傳入 .on() 方法,而是給 click 事件指定了一個命名空間,然后監(jiān)聽了這個命名空間里的 click 事件。此時,即使監(jiān)聽器是匿名函數(shù),實際上它也是“有名”的了?,F(xiàn)在你可以像下面這樣解綁某一個具體的命名空間里的事件監(jiān)聽器了。
$(“#element”).off(“click.myNamespace”);
這是 jQuery 為我們提供的又一個方便而強大的功能,它的內(nèi)部實現(xiàn)肯定很有意思!
我們再來看一些代碼:
$(“#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(){});
當(dāng)然,我們也可以用bind進(jìn)行事件綁定。我們看到上面的代碼,我們可以在事件后面,以點號,加我們的名字,就是事件命名空間。所謂事件命名空間,就是事件類型后面以點語法附加一個別名,以便引用事件,如”click.a”,其中”a”就是click當(dāng)前事件類型的別名,即事件命名空間。
假如我們要刪除如下命名空間:
$(“#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觸發(fā)click事件,也就是觸發(fā)第一個,豈不是把click.a和click.a.bb都觸發(fā)了,那如何解決這個問題呢,我只想觸發(fā)click,而不觸發(fā)click.a及以下的命名空間?
沒關(guān)系! 有如下解決辦法:
如果事件類型后面附加感嘆號,則表示觸發(fā)不包含命名空間的特定事件類型。
假如我們只想觸發(fā)click,可以這么寫:
$(“#haorooms”).trigger("click!")
只觸發(fā)bb,可以這么寫:
$(“#haorooms”).trigger("click.a.bb");
有了命名空間,可以方便我們在同一個事件上面做管理啦?。?!
- jquery利用命名空間移除綁定事件的方法
- jQuery 事件的命名空間簡單了解
- 在jquery中處理帶有命名空間的XML數(shù)據(jù)
- jQuery中綁定事件的命名空間詳解
- javascript,jquery閉包概念分析
- jQuery事件綁定.on()簡要概述及應(yīng)用
- 關(guān)于jQuery新的事件綁定機(jī)制on()的使用技巧
- jquery 事件冒泡的介紹以及如何阻止事件冒泡
- jquery事件機(jī)制擴(kuò)展插件 jquery鼠標(biāo)右鍵事件
- jquery新的綁定事件機(jī)制on方法的使用方法
- jQuery的緩存機(jī)制淺析
- jQuery命名空間與閉包用法示例
相關(guān)文章
jquery中封裝函數(shù)傳遞當(dāng)前元素的方法示例
這篇文章主要給大家介紹了關(guān)于jquery中封裝函數(shù)傳遞當(dāng)前元素的方法,文中給出了詳細(xì)的示例代碼,對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-05-05jQuery實現(xiàn)百葉窗焦點圖動畫效果代碼分享(附源碼下載)
這篇文章主要介紹了jQuery實現(xiàn)百葉窗焦點圖動畫效果代碼分享(附源碼下載)的相關(guān)資料,需要的朋友可以參考下2016-03-03BootStrap的table表頭固定tbody滾動的實例代碼
本文給大家分享一段關(guān)于BootStrap的table表頭固定tbody滾動的實例代碼,代碼簡單易懂,需要的朋友可以參考下2016-08-08