Detailed explanation of the namespace of bound events in jQuery_jquery

Before reading this article, I never knew that bind could also have a namespace. In fact, after reading this article, I looked through the manual again and found a few notes. But the manual takes it all away in just one sentence. Without going into too much detail, maybe he thinks that namespace is very simple and there is no need to explain it more?

Read the manual first. Since the bind method has three parameters (type, [data], fn), the manual introduces it as follows:

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

jQuery also provides some simple ways to bind these standard event types, such as .click() to simplify .bind('click'). There are a total of the following: 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 legal; if a string is not a native JavaScript event name, then the event handler will be bound to a custom event. These custom events are never triggered by the browser, but can be triggered manually in other code by using .trigger() or .triggerHandler().

If the string of the type parameter contains a dot (.) character, then this event is considered to have a namespace. This dot character is used to separate the event from its namespace. For example, if .bind('click.name', handler) is executed, then click in the string is the event type, and name in the string is the namespace. Namespaces allow us to unbind or trigger certain types of events without triggering others. See unbind() for more information.

When an event is passed to an element, all handlers bound to it for that event will be triggered. If multiple event handlers are registered, they will always be triggered in the order of binding. After all bound event handling functions are executed, the event continues to rise along the normal event bubbling path.



jQuery’s bind / unbind methods should be said to be very simple to use, and may not be used most of the time. Instead, use event name styles such as click / keydown directly. Method to perform event binding operations.

But assume the following situation: different click event processing logic needs to be bound at runtime based on the results of user interaction, so in theory a certain event will be bind / unbind operations countless times. But I hope that when unbind, only the processing logic tied to myself will be released instead of all the additional binding logic for the same event that may be available elsewhere.

At this time, if you directly use .click() / .bind('click') plus .unbind('click') to perform repeated binding, all bound elements will be unbind. The click processing logic on this element may potentially affect the behavior of other third parties on this element. Of course, if the function variable is explicitly defined during bind, you can provide function as the second parameter during unbind to specify only one of the processing logic to be unbind. However, in actual applications, you are likely to encounter various anonymous function bindings. determined situation.

For this problem, jQuery’s solution is to use event binding namespaces. That is, add .something after the event name to distinguish the logical scope of this part of your behavior.

For example, use .bind('click.myCustomRoutine',function(){...}); to also bind the anonymous function to the click event (you can use your own namespace to bind different times multiple times behavior method), when unbind, use .unbind('click.myCustomRoutine') to release all click events bound to the .myCustomRoutine namespace, without releasing other click events through .bind('click') or otherwise The event behavior bound to the namespace.

At the same time, using the command space also allows you to unbind all custom event bindings under this namespace at one time, through .unbind('.myCustomRoutine').

It should be noted that jQuery’s namespace does not support multi-level spaces. Because in jQuery, if you use .unbind('click.myCustomRoutine.myCustomSubone'), all click events under the two parallel namespaces whose namespaces are myCustomRoutine and myCustomSubone are unblocked, not the myCustomSubone subspace under "myCustomRoutine" ".

jQuery’s bind / unbind methods should be said to be very simple to use, and may not be used most of the time. Instead, event binding is done directly using event name style methods such as click / keydown operate.

But assume the following situation: different click event processing logic needs to be bound at runtime based on the results of user interaction, so in theory a bind / unbind operation will be performed on a certain event countless times. But I hope that when unbind, only the processing logic tied to myself will be released instead of all the additional binding logic for the same event that may be available elsewhere.

At this time, if you directly use .click() / .bind('click') plus .unbind('click') to perform repeated binding, all bound elements will be unbind. The click processing logic on this element may potentially affect the behavior of other third parties on this element. Of course, if the function variable is explicitly defined during bind, you can provide function as the second parameter during unbind to specify only one of the processing logic to be unbind. However, in actual applications, you are likely to encounter various anonymous function bindings. determined situation.

For this problem, jQuery’s solution is to use event binding namespaces. That is, add .something after the event name to distinguish the logical scope of this part of your behavior.

For example, use .bind('click.myCustomRoutine',function(){...}); to also bind the anonymous function to the click event (you can use your own namespace to bind different times multiple times behavior method), when unbind, use .unbind('click.myCustomRoutine') to release all click events bound to the .myCustomRoutine namespace, without releasing other click events through .bind('click') or otherwise The event behavior bound to the namespace.

At the same time, using the command space also allows you to unbind all custom event bindings under this namespace at once, through .unbind('.myCustomRoutine').

It should be noted that jQuery’s namespace does not support multi-level spaces. Because in jQuery, if you use .unbind('click.myCustomRoutine.myCustomSubone'), all click events under the two parallel namespaces whose namespaces are myCustomRoutine and myCustomSubone are unblocked, not the myCustomSubone subspace under "myCustomRoutine" ".