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