js的自定义事件

Posted 2020-08-06 JcScript

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