Javascript自定义事件详解

Javascript自定义事件，其本质就是观察者模式（又称订阅/发布模式），它的好处就是将绑定事件和触发事件相互隔离开，并且可以动态的添加、删除事件。

下面通过实例，一步一步构建一个具体的Javascript自定义事件对象。

如：我有一个action1函数，我想每次在执行完action1后，触发另一个函数service1，那么代码我们可以这么写：

//服务service1function service1(){}//函数action1function action1(){ //other things //then 启动service1 service1();}

Good，但是现在想法变了，我想在action1完成后，不仅触发service1，还要触发service2和service3。

按照刚才的思路，在函数action1完成后，顺带加上它们就是了。

如下：

function service1(){}function service2(){}function service3(){}function action1(){ //other things  service1(); service2(); service3();}

但，想法又再次发生波动，在执行完action1函数后，我突然想动态添加一个service4，且，发现service2似乎毫无意义，我不想触发了，怎么办呢？

你可能会说去掉service2，然后在action1后面加入service4不就完了吗？

但是，在真正的项目开发代码日益剧增的情况下，谈何容易，还要去找到相关代码进行操作。

那怎么办呢？

初步想法，定义一个数组嘛（如：servicearray），用来管理所有的service。

当action1执行到末尾后，遍历一遍这个数组函数(servicearray)，就欧克了嘛。

且，倘若我们不想运行service2了，便将它从这个数组中删除就好了；倘若想再添加一个新的service，将其追加到servicearray数组中就好了。

如此nice，如下：

var servicearray = [];function service1(){}function service2(){}function service3(){}//将所有service添加到servicearray中servicearray.push(service1);servicearray.push(service2);servicearray.push(service3);//del：用于删除一个指定的servicefunction del(arr, fn){ for(var i = 0; i < arr.length; i++){  if( arr[i] == fn ){   arr.splice(i,1);   break;  } } }//action1后，执行所有的servicefunction action1(){ //other things  //遍历serviceaary，执行所有service函数。（servicearray在action1内） for(var i =0; i < servicearray.length; i++){  servicearray[i](); }}//添加service4function service4(){}servicearray.push(service4);//删除service2del(servicearray, service2);

上面代码挺欧克的，但，复用性一点都不强，且servicearray与action你中有我，我中有你，不好。我们再来优化优化。

代码如下：

var servicearray = [];function service1(){}function service2(){}function service3(){}servicearray.push(service1);servicearray.push(service2);servicearray.push(service3);function del(arr, fn){ for(var i = 0; i < arr.length; i++){  if( arr[i] == fn ){   arr.splice(i,1);   break;  } } }//添加一个service4function service4(){}servicearray.push(service4);//删除一个service2del(servicearray, service2);//添加一个触发函数hanldeAction，分离action与servicefunction hanldeAction(actionName,serviceArr){ if(typeof actionName === 'function'){  actionName();  for(var i =0; i < serviceArr.length; i++){   serviceArr[i]();  } }}//执行handleAction(action1,servicearray);