事件库

作者: 果木山 | 来源:发表于2018-10-07 19:03 被阅读0次
    function on(ele,type,fn) {
        if(/^my/gi.test(type)){//绑定的是自定义行为,必须以my开头
            //事件库中ele均为元素
            if(!ele[type]){
                ele[type]=[];
            }
            var b=ele[type];
            if(b.length){
                for(var i=0; i<b.length; i++){
                    if(b[i]===fn) return;
                }
            }
            b.push(fn);
        }else{//绑定的是系统行为,如click,mousemove等
            //浏览器的兼容
            if(ele.addEventListener){
                ele.addEventListener(type,fn,false);
            }else{//IE浏览器
                if(!ele["on"+type]){
                    ele["on"+type]=[];
                    //将run方法绑定到系统事件池中
                    ele.attachEvent("on"+type,function (e) {
                        run.call(ele,e);//保证run中的this指向为当前元素;在IE浏览器下事件触发,不会给匿名函数传事件对象实参;
                    })
                }
                var a=ele["on"+type];
                //去重处理,避免重复绑定
                if(a.length){
                    for(var i=0; i<a.length; i++){
                        if(a[i]===fn) return;
                    }
                }
                a.push(fn);
            }
        }
    }
    //fire函数相当于一个接口,在某个位置执行on绑定的type行为上的所有方法;
    function fire(type,e) {
        //fire中的this可以指元素,也可以指实例对象,与on中相对应;
        var b=this[type] || [];
        if(b.length){
            for(var i=0; i<b.length; i++){
                if(typeof b[i]==="function"){
                    b[i].call(this,e);//保证函数执行时,里面的this为当前this,即为元素,并传入实参e;
                }else{
                    b.splice(i,1);
                    i--;
                }
            }
        }
    }
    function run(e) {
        e= e || window.event;
        //e的兼容处理
        e.target=e.srcElement;
        e.pageX=(document.documentElement.scrollLeft || document.body.scrollLeft)+e.clientX;
        e.pageY=(document.documentElement.scrollTop || document.body.scrollTop)+e.clientY;
        //阻止默认事件
        e.preventDefault=function () {
            e.returnValue=false;
        };
        //阻止冒泡
        e.stopPropagation=function () {
            e.cancelBubble=true;
        };
        //遍历run执行函数,保证函数中的this为当前元素,而且给其传实参e
        var a=this["on"+e.type];//this为当前元素
        if(a.length){
            for(var i=0; i<a.length; i++){
                if(typeof a[i]==="function"){
                    a[i].call(this,e);
                }else{
                    a.splice(i,1);
                    i--;//防止数组塌陷
                }
            }
        }
    }
    function off(ele,type,fn) {
        if(/^my/gi.test(type)){
            var b=ele[type];
            if(b.length){
                for(var i=0; i<b.length; i++){
                    if(b[i]===fn){
                        b[i]=null;
                        break;
                    }
                }
            }
        }else{
            if(ele.removeEventListener){
                ele.removeEventListener(type,fn,false);
            }else{
                var a=ele["on"+type];
                if(a.length){
                    for(var i=0; i<a.length; i++){
                        if(a[i]===fn){
                            a[i]=null;
                            break;//性能优化;
                        }
                    }
                }
            }
        }
    }
    //改变函数的this执行
    function processThis(fn,thisArg) {
        return function (e) {
            fn.call(thisArg,e);
        }
    }
    

    相关文章

      网友评论

        本文标题:事件库

        本文链接:https://www.haomeiwen.com/subject/dtfraftx.html