Example of jquery event name and namespace

Objective

In the official jquery API, there are some descriptions of namespaces, the address is: http://api.jquery.com/on/There are some English introduction, the topic is "Event names and namespaces" below some introduction. If some friends are not very understanding, I am here to introduce a simple!

jquery Event Namespaces

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 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" directly
$ ("#haorooms"). Off (". BB"); Delete the BB namespace "recommended" directly
$ ("#haorooms"). Off (". a"); Delete all the subspaces under the. A namespace, including. A.bb. a.cc, etc.,. A is the parent of. BB, so. A will be deleted below.
$ ("#haorooms"). Off ("click");//Directly unzip click, the following namespace 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!!!

Custom events

I don't have much to describe here! All custom events can be triggered through the jquery method, for example, the following example customizes a delay event type, binds it to an INPUT element object, and then triggers a custom event in the button click event.

$ ("input"). Bind ("Delay", function (event) {
settimeout (function () {
alert (Event.type);
},1000);
});
$ ("Input"). Click (function () {
$ ("input"). Trigger ("delay"); Triggering custom Events
});
Custom events are not really events, they can be interpreted as custom functions, and triggering custom events is equivalent to calling custom functions.

Through the above introduction, I do not know that the jquery event name and namespace have a deeper understanding of it! Look forward to your message exchange!