自定义事件

什么是组件？

     1.对面向对象的深入应用（UI组件，功能组件）

     2.将配置参数、方法、事件，三者进行分离。

自定义事件几个要素

    1.事件函数存储队列

    2.事件监听器

    3.事件触发器

---

使用自定义事件的好处

     1.有利于对人协作开发代码

     2.自定义事件相当于是 观察者模式，可以把复杂逻辑解耦，代码可以写的很清晰，而且很容易复用。

---

自定义事件的步骤

    其实就是模拟绑定事件 ： document.addEventListener('click',fn)

    主要是跟函数有关系，就是让函数能够具备事件的某些特性。

    比如 ： 现在有一个函数show(),不同的同事要为这个函数添加不同的代码，为了避免冲突，就可以每个同事分别建立一个show函数去写对应的代码，但是这样有一个问题：相同命名的函数，最后一个会覆盖之前的，所以如果我们可以模拟事件，比如用addEventListener去绑定三个执行函数，就不会相互影响，都会执行了。需要清楚一点：自定义事件的特点是自己本身是个函数，只是让函数具备事件的某些特性。

这个show相当于是个函数，虽然是函数，但是是通过事件的形式进行操作的。要执行，需要调用！

自定义事件要想触发，必须调用！

---

实现步骤

用构造函数写

    1.绑定

        o.on('上滚'，function(){});

        思路 ： 建一个对象，key是事件名，执行函数放入一个数组，然后在触发事件后，循环这个数组，调用每一个数组里的方法。

     {

            '上滚' ： [fn1,fn2]，

            '下滚' ： [fn3,fn4]

    }

2.触发

3.删除

最后的思路整理：

 1.先新建一个json名为events，格式是 ： type : [fn1,fn2]（type是事件，fn是对应函数）

 2.然后写on方法，传入事件和执行函数，首先判断events是否有type属性，如果有，就执行，没有就添加这个属性并生成一个空数组 

3.往这个数组里push一个fn

4.trigger触发自定义事件函数 ： 循环遍历events的type,并执行里面对应的[fn1,fn2]

实例：

一个方块，鼠标按下的时候变成蓝色， 鼠标move的时候变成红色，鼠标抬起变成黑色

看以上的代码，解耦了，每个事件单独写，比如在拖拽的时候，需要在鼠标按下的里面嵌套一个鼠标抚摸，但是用自定义事件，你就可以把每个事件单独写好，然后在需要触发的时候trigger，就不需要写一大坨了。

这就是订阅发布 ： on方法就是订阅，trigger就是发布。

是这样的，自定义事件是给你在某种条件成立的情况下触发的回调函数，这个条件不一定是DOM的事件，我们演示是通过DOM事件，方便大家去理解这个东西，好比说按下，以前我们写按下的时候做某些事情只能在mousedown中做，但是如果多人协作开发的时候，全部都写在mousedown中是不是不好维护呀，而自定义事件就把团队中每个人开发的down分离出来，这样方便调用和维护，再比如，如果你想在按下的时候做一件事，你是跑去组件内部的mousedown事件中写好？还是给你个on('按下',function(){})好？