Example illustrates the use of the namespace for events in jquery _jquery

Using JQuery bindings and binding event listeners is very simple. But when you bind multiple listeners to an event for an element, how do you precisely bind one of the listeners? We need to know the namespace of the event.

Look at the following code:

$ ("#element")
  . On ("click", DoSomething)
  . On ("click", Dosomethingelse);

Bind event listeners like the above, and when the elements are clicked, both DoSomething and Dosomethingelse will be triggered. This is a handy place to use jQuery, and you can add different listeners to the same event for the element at any time. Unlike OnClick, the new listener overwrites the old.

If you want to solve one of the listeners, such as dosomething, how do you do it?

Is that right?

$ ("#element"). Off ("click");

Attention! The above line of code will bind all the listeners of the click event of the element, which is not the result we want.

Luckily for JQuery. The off () method can accept the second argument, just like. On (). You can bind the specified listener by passing the name of the listener function as the second argument to the. Off () method.

$ ("#element"). Off ("click", DoSomething);

But if you don't know the name of the function, or you're using an anonymous function:

$ ("#element")
  . On ("click", Function () {
    console.log ("dosomething");
  });

How can you accurately bind a click event listener? It's time to learn about JQuery's event namespaces!

First code:

$ ("#element")
  . On ("Click.mynamespace", function () {
    console.log ("dosomething");
  });

Instead of just passing the click event as a parameter to the. On () method, you specify a namespace for the click event and then listen for the Click event in the namespace. At this point, even if the listener is an anonymous function, it is actually "famous". Now you can solve the event listener in a specific namespace as follows.

$ ("#element"). Off ("Click.mynamespace");

This is one of the more convenient and powerful features of JQuery, and its internal implementation must be fun!

Let's look at some more code:

$ ("#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 code above, we can add our name to the event, and the event namespace. The event namespace is the event type that appends an alias with the point syntax to refer to the event, such as "click.a", where "a" is the alias of the current event type, the event namespace.

Suppose we want to delete the following namespaces:

$ ("#haorooms"). On ("Click.a.bb", function () {});

We can use:

$ ("#haorooms"). Off ("click.a.bb");//Delete the BB namespace "recommended"
$ ("#haorooms"). Off (". BB");//Direct deletion of BB namespaces "recommended"
$ ("# Haorooms "). Off (". a "); Delete all of the child spaces underneath the. A namespace "including. A.bb  . a.cc, etc.,. A is the parent of. BB, so. A below will delete"
$ ("#haorooms"). Off ("click");/direct-Bind click The following namespaces will be deleted.

To be aware of:

If we write the following code:

$ ("#haorooms"). On ("click", Function () {});
$ ("#haorooms"). On ("click.a", function () {});
$ ("#haorooms"). On ("Click.a.bb", function () {});

Then we have to use trigger trigger Click event, that is, trigger the first, not the CLICK.A and click.a.bb are triggered, then how to solve this problem, I just want to trigger click, and do not trigger click.a and the following namespaces?

Never mind! The following solutions are available:

If an exclamation point is appended to the event type, a specific event type that does not contain a namespace is triggered.

If we just want to trigger click, we can write this:

$ ("#haorooms"). Trigger ("click!")

Only trigger BB, you can write this:

$ ("#haorooms"). Trigger ("click.a.bb");

With the namespace, it is convenient for us to do management on the same event!!!