用 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)聽器呢？該了解一下 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 為我們提供的又一個方便而強大的功能，它的內部實現(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(){});

當然，我們也可以用bind進行事件綁定。我們看到上面的代碼，我們可以在事件后面，以點號，加我們的名字，就是事件命名空間。所謂事件命名空間，就是事件類型后面以點語法附加一個別名，以便引用事件，如”click.a”，其中”a”就是click當前事件類型的別名，即事件命名空間。

假如我們要刪除如下命名空間：

$(“#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及以下的命名空間？

沒關系！ 有如下解決辦法：

如果事件類型后面附加感嘆號，則表示觸發(fā)不包含命名空間的特定事件類型。

假如我們只想觸發(fā)click，可以這么寫：

$(“#haorooms”).trigger("click!")

只觸發(fā)bb，可以這么寫：

$(“#haorooms”).trigger("click.a.bb");

有了命名空間，可以方便我們在同一個事件上面做管理啦?。?！

最新評論