談談jquery的事件名稱和命名空間

2016-12-02 1608 0 編輯:網站前端設計伍林 來源:網站程序書籍

在jquery的官方API中,有對命名空間的一些描述,地址是:http://api.jquery.com/on/ 這里面有一些英文介紹,題目是“Event names and namespaces”下面有一些介紹。 假如一些朋友不是很理解的話,深正互聯在這里簡單的介紹一下(深正互聯,是一家高端品牌網站建設公司,專注手機移動端網站開發)!

jQuery事件命名空間

我們先看一些代碼:

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

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

$(“#szhulian”).on("dbclick.a",function(){});

$(“#szhulian”).on("mouseover.a",function(){});

$(“#szhulian”).on("mouseout.a",function(){});

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

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

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

我們可以用:

$(“#szhulian”).off("click.a.bb");//直接刪除bb命名空間 【推薦】

$(“#szhulian”).off(".bb"); //直接刪除bb命名空間 【推薦】

$(“#szhulian”).off(".a"); //刪除.a命名空間下面所有的子空間【包括.a.bb .a.cc等等,.a是.bb的父級,因此.a下面的都會刪掉】

$(“#szhulian”).off("click");//直接解綁click,下面的命名空間都會刪除。

要注意的是:

假如我們寫了如下代碼:

$(“#szhulian”).on("click",function(){});

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

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

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

沒關系! 有如下解決辦法:

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

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

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

只觸發bb,可以這么寫:

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

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

自定義事件

我在這里就不多描述了!所有自定義事件都可以通過jQuery方法觸發,例如下面的示例自定一個Delay事件類型,并把它綁定到input元素對象上,然后在按鈕單擊事件中觸發自定義事件。

$("input").bind("delay",function(event){

    setTimeout(function(){

          alert(event.type);

    },1000);

});

$("input").click(function(){

      $("input").trigger("delay"); //觸發自定義事件

});

自定義事件不是真正意義上的事件,可以把它理解為自定義函數,觸發自定義事件就相當于調用自定義函數。

通過上面的介紹,不知道大家對jquery的事件名稱和命名空間有沒有更深的了解了呢!期待您留言交流!

深正互聯

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾