Detailed explanation of the ins and outs driven by Javascript events

I have a lot of knowledge about Javascript event drivers. This article will start with an application scenario. I hope this article will be helpful for you to use Javascript event drivers.

First, let's take a look at this Application Scenario. There is a link on the webpage, such as advanced search. After you click it, a search panel will appear. Because there are many search fields in the panel, and these search fields have a lot of data, we decided to load the search panel asynchronously. Taking jQuery as an example, the code may be written as follows:

 
 

  
  
$('#advance_search’).bind(‘click’, function(e){  
  
  
$('#advance_search_panel’).load(‘/xxx/advance_search.html"’);  
  
  
}); 
 
 

However, some processing needs to be done after loading, such as hiding the prompt text or icon being loaded. To put it bluntly, add callback to load.

 
 

  
  
….load(‘…..', function(){  
  
  
$('#waiting_message’).hide();  
  
  
}) 
 
 

There is a search button in the panel, click to search, and the click event needs to be bound after loading, So we add the following:

 
 

  
  
….load(‘…..', function(){  
  
  
$('#waiting_message’).hide();  
  
  
$('#search_button’).bind(‘click’, do_advance_search);  
  
  
}) 
 
 

One day, some other pages also need to add this advanced search, but the processing after loading is different. Some pages need to hide a div, some pages need to be bound with some operations. What should I do at this time? Are you sure you want to change the load method?

There is one way to solve this problem, with the callback parameter used for callback, such as new AdvancedSearch (callback); of course, there is actually a more elegant method, event-driven.

The code is easy to write. This event is triggered after loading:

 
 

  
  
….load(‘….', function() {  
  
  
$().trigger(‘advanced_search_load_complete’);  
  
  
}) 
 
 

You need to bind the event processing function to some operations after loading:

 
 

  
  
$().bind(‘advanced_search_load_complete’, function(){  
  
  
……  
  
  
}); 
 
 

The encapsulation area does not need to be changed, and the other areas do what they love to do. This is the charm of event-driven, and it is very loosely coupled.

To sum up, what are the advantages of event-driven?

1. Loosely coupled interaction. The event publisher and subscriber do not need to know the other party's existence.

2. Multi-to-Multi relationship. Multiple event publishers correspond to multiple subscribers.

3. Events are released one by one to respond to these events. This is a business scenario. Each step is clear and natural.

4. Event publishing can include parameters. Event Handlers can obtain any data about the event.

The event-driven Javascript programming model is different from common global functions that call Javascript at will. Its modules are more cohesive and easy to reuse. when the business is unpredictable, the Business Code is less changed.

Target, more beautiful Javascript event-driven, we all embrace it.

Original article title: event-driven javascript

Link: http://www.cnblogs.com/blusehuang/archive/2009/10/19/javascript_event_driven.html

1. Analysis on using Javascript to obtain random colors
2. What is JSON? Data format prepared for JavaScript
3. 10 most commonly used JavaScript udfs
4. Some extended thoughts on loading JavaScript events
5. Summary of JavaScript usage: From BOM and DOM