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