jQuery 事件的命名空間
用 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 為我們提供的又一個方便而強大的功能,它的內部實現肯定很有意思!
編譯自:CSS-Tricks
您可能感興趣的文章:
jQuery中綁定事件的命名空間詳解
jQuery 事件的命名空間簡單了解
jQuery bind事件使用詳解
jQuery學習筆記之jQuery的事件
讀jQuery之十二 刪除事件核心方法
使用jQuery全局事件ajaxStart為特定請求實現提示效果的代碼
JQuery自定義事件的應用 JQuery最佳實踐
DB2實驗教程:創建數據庫/表空間
jQuery編寫widget的一些技巧分享
鋒利的jQuery 要點歸納(三) jQuery中的事件和動畫(上:事件篇)