Detailed description of the namespace for binding events in jQuery

Before reading this article, I never knew that the original bind can also have a namespace. In fact, after reading this article, I flipped through the manual and found a little comment. However, the manual is just a single sentence. Without too much research, maybe he thinks that namespace is very simple and there is no need to explain it more?

First read the manual. Since the bind method has three parameters (type, [data], fn), the Manual introduces the following:

The. bind () method is the main method used to add behavior to the document. All JavaScript event objects, such as focus, mouseover, and resize, can be passed in as type parameters.

JQuery also provides some simple ways to bind these standard event types. For example, click () is used to simplify. bind ('click '). Blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.

Any string used as the type parameter is valid. If a string is not a native JavaScript event name, the event handler function is bound to a custom event. These custom events will never be triggered by the browser, but can be manually triggered by using. trigger () or by. triggerHandler () in other code.

If the string of the type parameter contains a dot (.) character, this event is considered to have a namespace. This dot character is used to separate the event and its namespace. For example, if you want to execute. bind ('click. name', handler), click in the string is of the event type, and string name is The namespace. The namespace allows us to unbind or trigger certain types of events without triggering other events. For more information, see unbind.

When an event is uploaded to an element, all the processing functions bound to the event above will be triggered. If multiple event handler functions are registered, they are always triggered in the order of binding. After all the Bound event processing functions are executed, the event continues to flow along the normal event bubbling path.



JQuery's bind/unbind method should be said to be very simple to use, and most of the time may not be used, instead, the event name style method such as click/keydown is directly used for event binding.

However, assume that you need to bind different click event processing logic based on the results of user interaction at runtime. Therefore, the bind/unbind operation on an event will be performed countless times theoretically. However, it is expected that only the processing logic bound to the unbind will be released, rather than the additional binding logic of the same event in all other places.

At this time, if you directly use. click ()/. bind ('click') plus. if unbind ('click') is used for repeated binding, all the click processing logic bound to the element will be dropped by unbind, which may affect other third-party behaviors of the element. Of course, if the function variable is displayed and defined during bind, you can provide the function as the second parameter to define only one of the unbind processing logic, however, in practice, you may encounter various anonymous function binding situations.

For this problem, jQuery's solution is to use the namespace bound to the event. Add. something after the event name to differentiate the logical Scope of this Part of the action.

For example. bind ('click. myCustomRoutine ', function (){...}); similarly, you can bind an anonymous function to a click event (you can use your namespace to bind different behavior Methods multiple times. unbind ('click. myCustomRoutine ') to release all bindings. the click event of the myCustomRoutine namespace. bind ('click') or event behavior bound to another namespace.

In addition, the command space allows you to bind all custom events in the namespace at a time through. unbind ('. mymmroutine.

It should be noted that the namespace of jQuery does not support multi-level space. Because in jQuery, if you use. unbind ('click. myCustomRoutine. myCustomSubone) removes all click events in the namespace of myCustomRoutine and myCustomSubone, instead of the "myCustomSubone sub-space under myCustomRoutine ".

JQuery's bind/unbind method should be said to be very simple to use, and most of the time may not be used, instead, the event name style method such as click/keydown is directly used for event binding.

However, assume that you need to bind different click event processing logic based on the user interaction results at runtime. Therefore, in theory, you will perform countless bind/unbind operations on an event. However, it is expected that only the processing logic bound to the unbind will be released, rather than the additional binding logic of the same event in all other places.

At this time, if you directly use. click ()/. bind ('click') plus. if unbind ('click') is used for repeated binding, all the click processing logic bound to the element will be dropped by unbind, which may affect other third-party behaviors of the element. Of course, if the function variable is displayed and defined during bind, you can provide the function as the second parameter when unbind to specify only one of unbind processing logic, however, in practice, you may encounter various anonymous function binding situations.

For this problem, jQuery's solution is to use the namespace bound to the event. That is, Add. something after the event name to distinguish the logical Scope of this Part of the action.

For example. bind ('click. myCustomRoutine ', function (){...}); similarly, you can bind an anonymous function to a click event (you can use your namespace to bind different behavior Methods multiple times. unbind ('click. myCustomRoutine ') to release all bindings. the click event of the myCustomRoutine namespace. bind ('click') or event behavior bound to another namespace.

In addition, the command space allows you to bind all custom events in the namespace at a time through. unbind ('. mymmroutine.

It should be noted that the namespace of jQuery does not support multi-level space. Because in jQuery, if you use. unbind ('click. myCustomRoutine. mymmsubone) removes all the click events in the namespace of myCustomRoutine and myCustomSubone, instead of the myCustomSubone sub-space under myCustomRoutine ".