A brief discussion on jQuery's custom binding

jqueryCustom binding

First let's take a look at how to use jQuery's custom binding. You can use bind or live to subscribe to an event (Of course, on can also be used after 1.7), the code is as follows:

$("#myElement").bind('customEventName',function(e){ ... });
$(".elementsClass").live('customEventName',function(e){ ... });

Then trigger the event in the following way:

$("#myelement").trigger('customEventName');

Or you can add additional parameters to the custom event, for example:

$("#myelement").bind('customEventName',function(e,data){ if(data.custom) ... });
$("#myelement").trigger('customEventName',{ custom: false });

Magic upgrade

The so-called magic upgrade actually means that all custom events in the entire program can be automatically registered and bound to jQuery, and then executed When , all modules that registered for this event will be executed. For example, the UserUpdate method defined in the module User.js and the BlogUpdate method defined in Blogs.js both define the functionfunction that needs to be executed when publishing a blog. We can bind to a container specified by jQuery (such as document) by registering a unified event name (such as BlogAdded), and then after successfully publishing the blog, execute $(document).trigger("BlodAdded") That's OK.

Below we give a general sample code:

    var components = [User, Blog, Group, Friend, Topic, Photo];
var eventTypes = ["AddComplete", "UpdateComplete", "DeleteComplete", "LockComplete", "UnLockComplete"];
      $.each(components, function(i,component) {
        $.each(eventTypes, function(i,eventType) {
var handler = component[eventType];
if (handler) $(document).bind(eventType, handler);
        });
      })

Then the code defined by each js moduleInstallationThe following format:

    User= {
      AddComplete: function(e, data) {
//...
      },
      UpdateComplete: function(e, data) {
//...
      }
    }

##In this way, no matter where we are, if we need If so, we can use jQuery to trigger our event:

$(document).trigger("UpdateComplete", data);

Through this method, you can discover a module The method can only register one event. If we register multiple event triggers through one method, we can use the following method:

    var blogController = {
      blogAddOrUpdateComplete: function() {
//...
      }
    }
    blogController.blogAddComplete = blogController.blogUpdateComplete = blogController.blogAddOrUpdateComplete;

Final note: This article just shows a simple example. Do not mix the usage of the same event name in different modules. For example, AddComplete in User.js and AddComplete in Blog.js may not be used at all. It doesn't matter, that is to say, it only processes its own corresponding logic. At this time, this event should not be processed uniformly, but if the things to be detected are the same, it can be used, such as DisableUserComplete, which can be used universally, because the User module needs To handle operations after disabling an account, the Blog module may also need to handle operations after disabling an account.

Conclusion

Uncle’s Notes: Aimed at recording various tips and materials (including but not limited to technology) in daily work, if they are useful to you , please recommend one to give uncle the motivation to write

The above is the detailed content of A brief discussion on jQuery's custom binding. For more information, please follow other related articles on the PHP Chinese website!