欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

實(shí)例講解jQuery中對(duì)事件的命名空間的運(yùn)用

 更新時(shí)間:2016年05月24日 14:51:29   作者:哈哈胡子  
jQuery支持帶命名空間的事件,這樣就可以方便地對(duì)同一事件使用不同的監(jiān)聽器并進(jìn)行管理,接下來我們就以實(shí)例講解jQuery中對(duì)事件的命名空間的運(yùn)用

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

看下面這段代碼:

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

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

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

是這樣嗎?

$(“#element”).off(“click”);

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

幸運(yùn)的是 jQuery 的 .off() 方法可以接受第二個(gè)參數(shù),就像 .on() 一樣。只要把監(jiān)聽器函數(shù)的名字作為第二個(gè)參數(shù)傳入 .off() 方法,就能夠解綁指定的監(jiān)聽器。

$(“#element”).off(“click”, doSomething);

但是如果你不知道這個(gè)函數(shù)的名字,或者你用的是匿名函數(shù):

$(“#element”)
  .on(“click”, function() {
    console.log(“doSomething”);
  });

怎樣才能精確地解綁某一個(gè) click 事件監(jiān)聽器呢?該了解一下 jQuery 的事件命名空間了!

先上代碼:

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

這里不只是把 click 事件作為參數(shù)傳入 .on() 方法,而是給 click 事件指定了一個(gè)命名空間,然后監(jiān)聽了這個(gè)命名空間里的 click 事件。此時(shí),即使監(jiān)聽器是匿名函數(shù),實(shí)際上它也是“有名”的了?,F(xiàn)在你可以像下面這樣解綁某一個(gè)具體的命名空間里的事件監(jiān)聽器了。

$(“#element”).off(“click.myNamespace”);

這是 jQuery 為我們提供的又一個(gè)方便而強(qiáng)大的功能,它的內(nèi)部實(shí)現(xiàn)肯定很有意思!

我們?cè)賮砜匆恍┐a:

$(“#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(){});

當(dāng)然,我們也可以用bind進(jìn)行事件綁定。我們看到上面的代碼,我們可以在事件后面,以點(diǎn)號(hào),加我們的名字,就是事件命名空間。所謂事件命名空間,就是事件類型后面以點(diǎn)語法附加一個(gè)別名,以便引用事件,如”click.a”,其中”a”就是click當(dāng)前事件類型的別名,即事件命名空間。

假如我們要?jiǎng)h除如下命名空間:

$(“#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的父級(jí),因此.a下面的都會(huì)刪掉】
$(“#haorooms”).off("click");//直接解綁click,下面的命名空間都會(huì)刪除。

要注意的是:

假如我們寫了如下代碼:

$(“#haorooms”).on("click",function(){});
$(“#haorooms”).on("click.a",function(){});
$(“#haorooms”).on("click.a.bb",function(){});

那么我們要用trigger觸發(fā)click事件,也就是觸發(fā)第一個(gè),豈不是把click.a和click.a.bb都觸發(fā)了,那如何解決這個(gè)問題呢,我只想觸發(fā)click,而不觸發(fā)click.a及以下的命名空間?

沒關(guān)系! 有如下解決辦法:

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

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

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

只觸發(fā)bb,可以這么寫:

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

有了命名空間,可以方便我們?cè)谕粋€(gè)事件上面做管理啦!?。?/p>

相關(guān)文章

最新評(píng)論