An in-depth analysis of jquery event namespaces

Name space
copy a Wikipedia statement:

The namespace (English: Namespace) represents the visible range of identifiers (identifier). An identifier can be defined in more than one namespace, and its meaning in different namespaces is irrelevant. In this way, you can define any identifiers in a new namespace that will not conflict with any existing identifiers because existing definitions are in other namespaces.

To put it more simply:

If there are many people in the Internet café, there is no name, your mother called you home to eat, how to call who? So smart mom, gave you a name, next time mom just stood in the doorway shouting "xx, go home to eat!" ”

The advent of the jquery namespace
Note that this is only jquery1.7, because it recommends that you use on instead of previous bind, using off to replace the previous unbind. Because all events are bound by on.

All right! Try to tie one up.

The code is as follows	Copy Code
$ (document). On (' click ', function () { .... });

I'm going to get rid of it.

The code is as follows	Copy Code
$ (document). Off (' click ')

Careful classmate may have found out, if I only want to solve a specific event, it is more eggs pain, to raise a chestnut!

The code is as follows	Copy Code
$ (document). On (' click ', function () { Console.log (1111); }); $ (document). On (' click ', function () { Console.log (222); }); $ (document). On (' click ', function () { Console.log (333); });

I think that print out 111 of the more antisocial, want to kick out, this time will be very silent?

Smart you immediately think I can do so ah!

The code is as follows	Copy Code
function A () { Console.log (1111); } $ (document). On (' click ', a); $ (document). Off (' click ', a);

It's dripping! You can do this! But don't you think it's a lot of trouble?

We can do this.

The code is as follows	Copy Code
$ (document). On (' click.a ', function () { Console.log (123); }) $ (document). Off (' click.a ');

The method first appeared in the jQuery1.3.2

The code is implemented as follows (implementation in 1.3.2):

The code is as follows

Copy Code

Namespaced Event handlers var namespaces = Type.split ("."); Type = Namespaces.shift (); Handler.type = Namespaces.slice (). Sort (). Join ("."); Get the current list of functions bound to this event var handlers = Events[type]; if (Jquery.event.specialall[type]) Jquery.event.specialall[type].setup.call (Elem, data, namespaces); Init the event handler queue if (!handlers) { Handlers = Events[type] = {}; Check for a special event handler Only use Addeventlistener/attachevent if the special Events Handler returns false if (!jquery.event.special[type] | | | jquery.event.special[type].setup.call (elem, data, namespaces) = = False) { Bind The global event handler to the element if (Elem.addeventlistener) Elem.addeventlistener (type, handle, false); else if (elem.attachevent) Elem.attachevent ("On" + type, handle); } }

The use of namespaces in conjunction with trigger

The code is as follows	Copy Code
$ (document). On (' click.a ', Funciton () { Console.log (111); }); $ (document). On (' Click ', Funciton () { Console.log (222); }); $ (document). Trigger (' click.a '); output:111

I can do that.

The code is as follows	Copy Code
$ (document). On (' click.a ', Funciton () { Console.log (111); }); $ (document). On (' Click ', Funciton () { Console.log (222); }); $ (document). Trigger (' click! '); output:222

Attention:
! jquery1.9 is deleted after the corresponding implementation

Event binding namespaces

General use of namespace methods:

The code is as follows	Copy Code
$ ('. class '). Bind (' Click.namespace ', function () {}); $ ('. class '). Trigger (' click.namespace '); $ ('. class '). Unbind (' Click.namespace ');

Events of the same namespace can be unbound in bulk with namespaces.

code is as follows	copy code
$ ('. Class ') . bind (' Click.namespace ', function () {}); $ ('. class '). Bind (' Blur.namespace ', function () {}); $ ('. class '). Unbind ('. namespace ');