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);