Let’s briefly talk about jquery’s event names and namespaces

Preface

In the official API of jquery, there are some descriptions of namespaces. The address is: http://api.jquery.com/on/ There are some English introductions, titled " Event names and namespaces" has some introduction below. If some friends don’t understand it very well, let me briefly introduce it here!

jQuery event namespace

Let’s look at some code first:

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

Of course, we can also use bind for event binding. We see the above code, we can add our name with a period after the event, which is the event namespace. The so-called event namespace is to append an alias in dot syntax after the event type to reference the event, such as "click.a", where "a" is the alias of the current event type of click, that is, the event namespace.

If we want to delete the following namespace:

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

We can use:

$(“#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，下面的命名空间都会删除。

Be careful It is:

If we write the following code:

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

Then we need to use trigger to trigger the click event, that is, to trigger the first one. Wouldn’t it be better to combine click.a and click. a.bb has been triggered, so how to solve this problem? I only want to trigger click, but not click.a and the following namespaces?

It doesn't matter! There are the following solutions:

If an exclamation mark is appended to the event type, it means that a specific event type that does not include the namespace is triggered.

If we only want to trigger click, we can write like this:

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

Only trigger bb, we can write like this:

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

With the namespace, it is convenient for us to The event is managed! ! !

Custom event

I won’t describe it much here! All custom events can be triggered through jQuery methods. For example, the following example customizes a Delay event type, binds it to the input element object, and then triggers the custom event in the button click event.

$("input").bind("delay",function(event){
    setTimeout(function(){
          alert(event.type);
    },1000);});$("input").click(function(){
      $("input").trigger("delay"); //触发自定义事件});

Custom events are not events in the true sense. They can be understood as custom functions. Triggering a custom event is equivalent to calling a custom function.

Through the above introduction, I wonder if you have a deeper understanding of jquery’s event names and namespaces! Looking forward to your message and exchange!

The above is the detailed content of Let’s briefly talk about jquery’s event names and namespaces. For more information, please follow other related articles on the PHP Chinese website!