Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points of Javascript event-driven principle analysis. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

First of all, let's take a look at such an application scenario, where there is a link on the page, such as advanced search, and a search panel will appear after clicking. Because there are many search fields in the panel, and these search fields have a lot of data, it is decided to load the search panel asynchronously. In the case of jQuery, the code might say:

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

However, you need to do some processing after loading, such as hiding the prompt text or icon that is being loaded, so as to add callback to load.

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

There is a search button in the panel. Click to search. After loading, you need to bind the click event, so we add it below:

... .load ('... .', function () {$('# waiting_message'). Hide (); $('# search_button'). Bind ('click', do_advance_search);})

One day, some other pages will also need to add this advanced search, but the processing after loading is different. Some pages need to hide a certain div, some pages need to bind some operations, and so on. Are we all going to change this load method?

There is a way to solve this problem, with callback parameters for callbacks, such as new AdvancedSearch (callback), and, of course, a more elegant approach, event-driven.

The code is easy to write and triggers this event after loading:

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

You need to bind the event handler where you do something after the load is complete:

Bind ('advanced_search_load_complete', function () {) });

The encapsulated place does not need any change, and other places can do whatever they like. This is the charm of event-driven and great loose coupling.

To sum up, what are the event-driven benefits?

1. Loosely coupled interaction, event publishers and subscribers do not need to know the existence of each other.

two。 A many-to-many relationship in which multiple event publishers correspond to multiple subscribers.

3. Events are published one by one and respond to them. This is a business scenario where each step is clear and natural.

4. Event publishing can take parameters, and event handlers can get any data about the event.

These are all the contents of the article "Analysis of Javascript event-driven principles". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.