手撸jQuery源码：事件相关方法（on off）

dQuery.prototype.extend({
        //on方法需要注意 如果只用数组存储起来而不区分事件类型，那么数组中存储的就全是第一个事件的类型了
        //例如click mouseover  ...  后续事件类型都会变成click，因此需要分类
        on:function(name,callBack){
            //1.遍历取出所有元素
            this.each(function(key,ele){
                //2.判断当前元素中是否有保存所有事件的对象
                if(!ele.eventsCache){
                    ele.eventsCache = {}; //定义一个空对象eventsCache用于装载指定元素的事件
                }
                //3.判断对象中有没有对应类型的数组  例如click
                if(!ele.eventsCache[name]){
                    ele.eventsCache[name] = [];   //在该对象中定义一个名为name的数组装载相同类型的事件
                    //4.将回调函数添加到数据中
                    ele.eventsCache[name].push(callBack);
                    //5.添加对应类型的事件
                    dQuery.addEvent(ele,name,function(){
                        //遍历添加数组中存储的事件
                        dQuery.each(ele.eventsCache[name],function(k,method){
                            method();
                        })
                    });
                }else{
                    //6.将回调函数添加到数据中
                    ele.eventsCache[name].push(callBack);  //若有对应类型的事件，则直接添加
                }
                
            })
        },
        off:function(name,callBack){
            //1.判断有没有传入参数
            if(arguments.length === 0){
                this.each(function(key,ele){
                    ele.eventsCache = {};
                });
            }
            //2.判断是否传入了一个参数
            else if(arguments.length === 1){
                this.each(function(key,ele){
                    ele.eventsCache[name] = []; //删除对应类型所有事件
                });
            }
            //3.判断是否传入两个参数
            else if(arguments === 2){
                this.each(function(key,ele){
                    dQuery.each(ele.eventsCache[name],function(index,method){
                          //判断当前遍历到的方法和传入的方法是否相同
                          if(method === callBack){
                              ele.eventsCache[name].splice(index,1); //移除对应类型对应事件
                          }
                    })
                })
            }
        }
    })

/on:
    //  $(".btn0").on("click",function(){
    //      alert("click1");
    //  })
    // $("button").on("click",function(){
    //     alert("click2");
    // })

    //off:
    //1.不传参，会移出所有事件
    //$("button").off();
    //2.传递一个参数，会移除对应类型所有事件
    //$("button").off("click");
    //3.传递两个参数,会移除对应类型对应事件
    //$("button").off("click",test1);