jQuery Bind Custom Events Magic Upgrade

jQuery Binding Custom Events

First of all, let's look at how to use jQuery to bind custom events. You can use bind or live to subscribe to 1 event (of course, you can also use on 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 custom events, such as the following:

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

Magic Upgrade

The so-called magic upgrade actually wants all the custom events of the whole program to be automatically registered and bound to jQuery, and then when it is executed, all the modules that register the events 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 function function that needs to be executed when publishing a blog. At the whole time, we can register the event name of the system 1 (such as BlogAdded) bind to a container specified by jQuery (such as document), and then publish the blog successfully. Execute $(document). trigger ("BlodAdded") on OK.

Let's 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 module is installed in the following format:

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

In this way, no matter where we need it, we can use jQuery to trigger our events if we need it:

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

Through this method, we can find that method of one module can only register one event, so if we register multiple event triggers through one method, we can use the following methods:

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

Last note: This article only shows a simple example, Don't mix the usage of different module and 1 event names. For example, AddComplete in User.js may not have anything to do with AddComplete in Blog. js. That is to say, we only deal with our own corresponding logic. At this time, we should not handle this event in a unified way, but if the thing to be detected is one, we can use it, such as DisableUserComplete, which can be used universally, because User module needs to handle the operation after disabling the account, and Blog module may also need to handle the operation after disabling the account.