Javascript事件驱动的原理分析

今天小编给大家分享一下Javascript事件驱动的原理分析的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

成都创新互联是一家网站设计公司，集创意、互联网应用、软件技术为一体的创意网站建设服务商，主营产品：成都响应式网站建设公司、高端网站设计、成都营销网站建设。我们专注企业品牌在网站中的整体树立，网络互动的体验，以及在手机等移动端的优质呈现。成都网站建设、做网站、移动互联产品、网络运营、VI设计、云产品.运维为核心业务。为用户提供一站式解决方案，我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏析悦目的作品，网站的价值服务。

首先来看看这样一个应用场景，网页上有个链接，比如说高级搜索，点击以后会出现一个搜索面板。由于面板里有很多搜索字段，而这些搜索字段又有很多数据，因此决定采用异步来加载该搜索面板。以jQuery为例，代码可能会这么写：

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

但是呢，又需要在加载后做一些处理，比如说隐藏掉正在加载的提示文字或者图标，好说，就给load加上callback

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

面板里面有个搜索按钮，点击进行搜索，加载完需要绑定click事件，于是我们又在下面加上：

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

某一天，其他有些页面也要加上这个高级搜索，但是呢，加载完成后的处理又都不一样，有的页面需要隐藏掉某个div，有的页面需要绑定一些操作等，这时候怎么办？难道都去改这个load方法吗？

有一种方法可以解决这个问题，加上callback参数用以回调，比如 new AdvancedSearch(callback); 当然，除此以外，其实还有一种更优雅的方法，事件驱动。

代码写起来很简单，加载完毕后触发这个事件:

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

需要在加载完成后做某些操作的地方绑定一下事件处理函数即可:

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

封装的地方不用任何改动，其它地方爱做什么操作就做什么操作，这就是事件驱动的魅力，极大的松耦合。

总结一下，事件驱动好处是什么呢？

1. 松耦合的交互，事件发布者和订阅者无须知道对方的存在。

2. 多对多的关系，多个事件发布者对应多个订阅者。

3. 一个个事件发布出来，针对这些事件作出响应，这就是一个业务场景，每个步骤清晰自然。

4. 事件发布可以带参数，事件处理者可以拿到关于该事件的任何数据。

以上就是“Javascript事件驱动的原理分析”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。