小微型库(3.绑定on和解绑off)

on绑定

$(“div”).on(“click mouseenter click.Liang”, function(){});

off解绑

$(“div”).off();

$(“div”).off(“click.sjl”);

//对于_addEventFn(){}函数的解释
//events属性是以下的格式
    div.events = {
        click : {
            sjl : function(){
                console.log();
            },
            yl : function(){

            },
            anonymous : [fn, fn, fn]  //存放没有自定义名字的事件函数值
        },
        mouseenter : {
            anonymous : [fn, fn, fn],
            sjl : function(){
                
            }，
            yl : function(){
                
            }
        },
    }
复制代码

//阻止默认行为的兼容
if(!Event.prototype.preventDefault){
    Event.prototype.preventDefault = function(){
        window.event.returnValue = false;
    };
}
//阻止冒泡的兼容
if(!Event.prototype.stopPropagation){
    Event.prototype.stopPropagation = function{
        window.event.cancelBubble = true;
    };
}
//将添加到dom身上的事件函数存储起来的方法
    function _addEventFn(data){
    //dom:节点  type:事件数组  fn:事件函数
    //之前从来没绑定过任何事件,把它变成一个对象
    if(typeof data.dom.events === "undefined"){
        data.dom.events = {};
    }
    //之前没有绑定过相同类型的事件
    if(typeof data.dom.events[data.type[0]] === "undefined"){
        data.dom.events[data.type[0]] = {};
        data.dom.events[data.type[0]].anonymous = [];
        //anonymous是一个数组,存放匿名函数
    }
    //type是数组,类似["mouseenter", "sjl"] 或者["click"]
    //判断有没有自定义事件的名字  存事件函数
    if(data.type[1] === undefined){
        //如果为undefined,说明是匿名函数,存放到anonymous属性对应的数组中
        data.dom.events[data.type[0]].anonymous.push(data.fn);
    }else{
        data.dom.events[data.type[0]][data.type[1]] = data.fn;
        // data.dom.events[data.type[0]]代表事件 例如click
    }
    }

 //兼容removeEventListener
    function _removeEvent(dom, type, fn, bool){
        //v, key1, v.events[key1].anonymous[j], false
        if(dom.removeEventListener){
            //主流
            dom.removeEventListener(type, fn, !!bool);
        }else{
            //ie
            dom.detachEvent("on"+type, fn);
        }
     }
//原型里的方法
Liang.prototype = function(){
    constructor : Liang,
    init : function(){}, //(1)
    html : function(){}, //(2)
    //事件绑定
    on : function(eventType, fn){
        //非字符串不做操作
        if(typeof eventType !== "string") return;
        var arr = eventType.trim().split(/\s+/);
        for(var i = 0, len = this.length; i < len; i++){
            (function(i, that){
               //that当前jq对象中的元素
                for(var j = 0, len = var.lenght; j < len; j++ ){
                    var type = arr[j].split(/\./),
                        eventFnName = null;
                    if(type[0] === "mousewheel"){
                        //需要判断火狐及其他浏览器的事件
                        function _eventWheelFn(e){
                            var dir = e.wheelDelta / 120 || -e.detail / 3;
                            fn.call(that, e, dir) === false && e.preventDefault();
                        }
                        type[0] = (that.onmousewheel === null) ? "mousewheel" : "DOMMouseScroll";
                        eventFnName = _eventWheelFn;
                    }else{
                        function _eventFn(e){
                            e = e || window.event;
                            fn.call(that, e) === false && e.preventDefault;
                        }
                        eventFnName = _eventFn;
                    }
                    that.addEventListener ? 
                    that.addEventListener(type[0], eventFnName, false) :
                    that.attachEvent("on"+type[0], eventFnName);
                    
                    //存储对应事件函数
                    _addEventFn({
                        dom : that,
                        type : type,
                        fn : eventFnName
                    });
                }
            }(i, this[i]))
        }
        return this;
    },
    //事件解绑
    off : function(){
        if(typeof eventType === "undefined"){
            //解绑所有事件
            Liang.each(this, function(v){
                // v 当前进来的元素
                for(var key1 in v.events){
                    // key1 是事件类型的名字 例如 click mouseenter
                    for(var key2 in v.events[key1]){
                        // key2 是事件类型对象中自定义的名字 例如 sjl
                        if(Liang.type(v.events[key1][key2]) === "function"){
                        //给自定义名字的事件解绑函数
                            _removeEvent(v, key1, v.events[key1][key2],false);
                        }else{
                            //给anonymous数组中的函数解绑
                            var len = v.events[key1].anonymous.length;
                            for(var j = 0; j < len; j++){
                              //解绑anonymous数组内的函数
                              _removeEvent(v, key1, v.events[key1].anonymous[j], false);
                            }
                        }
                    }
                }
                v.events = {}; //清空events里所有数据
            });
        }else if(typeof eventType === "string"){ //例如 "click.yl mouseenter.sjl"
            var arr = eventType.trim().split(/\s+/); //["click.yl", "mouseenter.sjl"]
            //判断输入的为[""],则不作操作
            if(arr.toString() === "") return this;
            //对事件名数组的遍历
            for(var i = 0, len = arr.length; i < len; i++){
                var type = arr[i].split(/\./); //["click","yl"],["mouseenter","sjl"] 
                //遍历实例对象,取到元素,解绑元素身上对应的事件
                Liang.each(this, function(v){
                    //判断是否火狐,修改对应的事件名
                    if(type[0] === "mousewheel"){
                        //判断滚动事件是否在火狐或者主流浏览器执行
                        type[0] = (v.onmousewheel === null) ? "mousewheel" : "DOMMouseScroll";
                    }
                    if(type.length > 1){
                        //解绑自定义名的事件函数
                        _removeEvent(v, type[0], v.events[type[0]][type[1]], false);
                        delete v.events[type[0]][type[1]];
                    }else{
                        //解绑同类型事件
                        //解绑对应事件的所有匿名事件 例如$("div").off("click")
                        for(var j = 0, len = v.events[type[0]].anonymous.length; j < len; j++){
                            _removeEvent(v, type[0], v.events[type[0]].anonymous[j], false);
                        }
                        //解绑该事件类型中有名的 例如$("div").off("click.yl")
                        for(var k in v.events[type[0]]){
                            // k是自定义属性名 sjl yl  //判断在不在数组的原型上.false则表示不在,说明是function,取反
                            if(!(v.events[type[0]][k] instanceof Array)){
                                //自定义名字的事件属性值
                                _removeEvent(v, type[0], v.events[type[0]][k], false);
                            }
                        }
                        delete v.events[type[0]];
                    }
                });
            }
        }
    },
 }

复制代码