web基础学习之路

事件库

2018-10-07  本文已影响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);
    }
}
上一篇 下一篇

猜你喜欢

热点阅读