js的自定义事件

js中的事件是js的一大技术点，说白了就是操做dom树的惟一途径。

关于事件无非两种绑定方式：

document.getElementById('xxx').onclick = function(){
        
}

document.getElementById("xxx").addEventListener("click", function(){

});

前者和后者的区别无非就是绑定一个和多个，当屡次绑定相同元素的时候，前者会覆盖，后者不会覆盖。

下面咱们来看看如何自定义事件，咱们想的自定义事件无非两点

1.咱们能够根据本身传递的自定义事件，绑定咱们想要的事件

2.咱们绑定的事件不能相互以前覆盖

综上所述，咱们能够本身定义函数，函数实现两个参数，第一个参数用来传递咱们想要绑定的自定义事件，第二个参数是咱们想要运行的函数。可是不相互覆盖咱们如何实现呢？咱们都知道，咱们直接绑定相同元素的相同事件后者必定会覆盖前者的，因此咱们思路是定义一个对象

listener:{}

咱们定义了一个listener对象，用于把咱们全部自定义的事件都添加到这个对象里面，而后当咱们调用的时候，在遍历这个对象。

核心思想就是咱们把对象的键看成咱们的自定义事件的名称，咱们的值必定是一个数组，而后咱们把全部的自定义事件的函数都push到这个数组里面来时间事件的不覆盖

listener:{
        'aa':[fn1(),fn2(),fn3()],
        'bb':[fn5(),fn6()]
}

例如上面的例子就是说咱们自定义了五个自定义事件，有三个名字叫aa，功能分别为：

fn1()    fn2()      fn3()

有两个名字叫b，功能分别为：

fn5()     fn6()

这个就是咱们实现自定义事件的核心思想，下面咱们来写添加自定义事件的push函数

           function addEvent(type,fn){
                if(typeof this.listener[type] ==='undefined'){
                    this.listener[type]=[];
                }
                if(typeof fn ==='function'){
                    this.listener[type].push(fn);
                }
                return this;
            }

上面这个函数咱们全部的添加自定义事件咱们都会把这个自定义事件push到咱们的listener对象中，来实现自定义事件的预约义。

以后咱们定义了这个自定义事件，咱们须要一个函数遍历这个listener对象来运行这里面的代码，来时间自定义事件的函数功能。

代码以下：

        　　function showEvent(type){
                var arr = this.listener[type];
                if(arr instanceof Array){
                    for(var i=0;i<arr.length;i++){
                        if(typeof arr[i] ==='function'){
                            arr[i]({type:type});
                        }
                    }
                }
            }

这样咱们就能够运行咱们定义的某个自定义事件了。

既然有自定义事件，那么咱们就必定须要一个删除自定义事件的函数，代码以下：

　　　　　　function removeEvent(type, fn) {
                var arrayEvent = this.listener[type];
                if (typeof type === "string" && arrayEvent instanceof Array) {
                    if (typeof fn === "function") {
                        for (var i=0, length=arrayEvent.length; i<length; i+=1){
                            if (arrayEvent[i] === fn){
                                this.listener[type].splice(i, 1);
                                break;
                            }
                        }
                    } else {
                        delete this.listener[type];
                    }
                }
                return this;
            }

这样子咱们就实现了js的自定义事件，咱们来整合一下咱们的全部代码：

　　　　var Event = {
            listener:{},
            addEvent:function(type,fn){
                if(typeof this.listener[type] ==='undefined'){
                    this.listener[type]=[];
                }
                if(typeof fn ==='function'){
                    this.listener[type].push(fn);
                }
                return this;
            },
            showEvent:function(type){
                var arr = this.listener[type];
                if(arr instanceof Array){
                    for(var i=0;i<arr.length;i++){
                        if(typeof arr[i] ==='function'){
                            arr[i]({type:type});
                        }
                    }
                }
            },
            removeEvent: function(type, fn) {
                var arrayEvent = this.listener[type];
                if (typeof type === "string" && arrayEvent instanceof Array) {
                    if (typeof fn === "function") {
                        for (var i=0, length=arrayEvent.length; i<length; i+=1){
                            if (arrayEvent[i] === fn){
                                this.listener[type].splice(i, 1);
                                break;
                            }
                        }
                    } else {
                        delete this.listener[type];
                    }
                }
                return this;
            }
        };

以后咱们在想要自定义事件咱们只须要这样调用：

　　　　　Event.addEvent('aa',fn);
        Event.addEvent('aa',function(){
            alert(456);
        });
        Event.removeEvent('aa',fn);