jQuery 事件的命名空間簡單了解_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 事件監聽器呢？ 先上程式碼：

複製程式碼

程式碼如下:

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

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

複製程式碼

程式碼如下:

$('#element').off('click .myNamespace'); 這是jQuery 為我們提供的另一個方便而強大的功能，它的內部實作肯定很有趣！