jquery Event Binding (Bind/unbind) namespace

Source: Internet
Author: User
Tags anonymous

However, suppose that the binding of different Click event processing logic is required at run time based on the results of user interaction, so that an event can theoretically be bind/unbind for countless times. But I also hope that the unbind will only be tied up in the processing logic to release rather than all other places have the possibility of additional the same event binding logic.

At this point, if you use. Click ()/. Bind (' click ') plus. Unbind (' click ') to repeat the binding, the Unbind will be all bound to the elements of the Click processing logic, potentially affecting the other third party of the element behavior. Of course, if a function variable is shown in bind, it is possible to provide function as the second parameter in unbind to specify only one of the processing logic, but it is likely that a variety of anonymous function bindings will be encountered in the actual application unbind.

For this problem, the jquery solution is to use event-bound namespaces. That is, after the event name, Add. Something to differentiate oneself this part of the logical scope of behavior.

For example, with. Bind (' Click.mycustomroutine ', function () {...}); The same is to bind the anonymous function to the click event (you can bind different behavior methods in your own namespace multiple times), and when Unbind, use the. Unbind (' Click.mycustomroutine ') to release all the bindings. Mycustomroutine The Click event of the namespace without releasing other event behaviors that are bound by. Bind (' click ') or another namespace.

Also, using command space allows you to unbind all custom event bindings under this namespace at once, passing. Unbind ('. Mycustomroutine ').

It should be noted that the jquery namespace does not support multiple levels of space. Because in jquery, if you use. Unbind (' Click.myCustomRoutine.myCustomSubone '), the namespace is lifted by the Mycustomroutine and Mycustomsubone, respectively. All click events under the two parallel namespaces, not the Mycustomsubone subspace under Mycustomroutine.

The reason for the appearance

The code is as follows Copy Code
$ ('. class '). Bind (' click ', Function () {});

After *jquery1.7, there are events that suggest using on () to bind instead of bind (), which is intended for unification. The binding is naturally off () and Unbind () is not used accordingly.
When you look at the source, you can see that all events refer back to the method of On (), that is, all events can be bound with on.
When you want to solve a particular click event, you are in trouble. Because Unbind will bind all the click events.

The code is as follows Copy Code
$ ('. class '). Unbind (' click ');

There is, of course, a way to create a reference function.

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

However, this is not flexible enough.

Solving method

The code is as follows Copy Code

$ ('. class '). Bind (' Click.namespace ', function () {});
$ ('. class '). Trigger (' click.namespace '); would trigger
$ ('. class '). Trigger (' click '); would trigger
$ ('. class '). Trigger (' click.other '); Won ' t trigger


Instance

The Example:

The code is as follows Copy Code

<script Language= "JavaScript"
<!--
  $.namespace ("Validate", {
    isfullname: function (elems) {
      return Elems.val (). IndexOf ("") >-1;
   },
    isnick:function (elems) {
      return Elems.val (). IndexOf ("") = = 1;
   },
    isemail:function (elems) {
    return Elems.val (). Match (/^ ([a-za-z0-9_.-]) +@ ([a-za-z0-9-]) +.) + ([a-za-z0-9]{2,4}) +$/);//Erro;
   }
 });

  Checkfullname = function () {
    ($ ("#myFullName"). Validate.isfullname ())? Alert (' Valid ' ): Alert (' invalid ');
 }

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.