JavaScript自定事件-原生代码

var Events = function(){
        this._listeners = {};//存储事件类型对象列表 { log:[fn,fn,...],show:[fn,fn,fn....],hide:[fn,fn,fn...]}
    }
    Events.prototype = {
        /**
        * 添加事件监听
        * @param type 事件名称 [string]
        * @param  fn 处理函数 [function]
        * @return  [object]
        */
        addEventListener:function(type,fn){
            if(typeof type !== 'string'){
                return;
            }
            if(typeof this._listeners[type] === 'undefined'){
                this._listeners[type] = [];
            }
            if(typeof fn ==='function'){
                this._listeners[type].push(fn);
            }

            return this;
        },
        /**
        * @param type 事件类型 [string]
        * @return [obj]
        */
        fireEvent:function(type){
            if(!type){
                return;
            }
            var temp = {
                fire:function(){
                    if(eventArray instanceof Array){
                        for(var i=eventArray.length-1;i>=0;i--){
                            eventArray[i]();
                        }
                    }
                }
            };
            var eventArray;// 事件类型
            if(typeof type ==='string'){ // 单类数据类型
                eventArray = this._listeners[type];
                temp.fire();
            }else if(type instanceof Array){// 注意数组不能使用typeof 进行判断
                for(var j=type.length-1;j>=0;j--){
                    eventArray = this._listeners[type[j]];
                    temp.fire();
                }
            }
            return this;
        },
        /**
        * @param type 事件名称 [string]
        * @param fn 处理函数,跟监听的函数是一样的才行 [function]
        * @return [obj]
        */
        removeEventListener:function(type,fn){
            if(!type || typeof type!=='string' || typeof fn !=='function'){
                return;
            }
            var eventArray = this._listeners[type];
            if(eventArray instanceof Array){
                for(var i=eventArray.length-1;i>=0;i--){// 逐个遍历,删除匹配事件类型的函数
                    if(eventArray[i] === fn){
                        this._listeners[type].splice(i,1);
                    }
                }

                if(this._listeners[type].length<1){
                    delete this._listeners[type]; // 如果该类事件没有处理函数了,直接删除掉
                }
            }
            return this;
        }
    };

测试

    var e = new Events();

    function show(){
        alert('xxx');
    }
    e.addEventListener('show',show);//添加事件监听
    e.fireEvent('show'); // 触发事件
    // e.removeEventListener('show',show);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值