jQuery 事件的命名空間簡單了解

更新時間：2013年11月22日 16:19:15 作者：

用 jQuery 綁定和解綁事件監(jiān)聽器都是非常簡單的，怎樣精確地解綁其中一個監(jiān)聽器？我們需要了解一下事件的命名空間，感興趣的朋友不要錯過

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

看下面這段代碼：

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

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

如果你想解綁其中一個監(jiān)聽器，比如 doSomething，怎么做呢？

是這樣嗎？

復制代碼代碼如下:

$('#element').off('click');

注意！上面這行代碼會把元素的 click 事件的所有監(jiān)聽器全部解綁，而這并不是我們要的結果。

幸運的是 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)聽器呢？
先上代碼：

復制代碼代碼如下:

 
$('#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 為我們提供的又一個方便而強大的功能，它的內部實現(xiàn)肯定很有意思！

您可能感興趣的文章: