簡單聊聊關於jquery的事件名稱與命名空間

前言

在jquery的官方API中，有對命名空間的一些描述，地址是：http://api.jquery.com/on/  這裡面有一些英文介紹，題目是“ Event names and namespaces」下面有一些介紹。 假如一些朋友不是很懂的話，我在這裡簡單的介紹一下！

jQuery事件命名空間

我們先來看一些程式碼：

$(“#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觸發click事件，也就是觸發第一個，豈不是把click.a和click. a.bb都觸發了，那要如何解決這個問題呢，我只想觸發click，而不觸發click.a以下的命名空間？

沒關係！ 有以下解決方法：

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

假如我們只想觸發click，可以這麼寫：

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

只觸發bb，可以這麼寫：

$(“#haorooms”).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的事件名稱和命名空間有沒有更深的了解了呢！期待您留言交流！

以上是簡單聊聊關於jquery的事件名稱與命名空間的詳細內容。更多資訊請關注PHP中文網其他相關文章！