js的自定义事件

在写这段代码之后,本人使用过jQuery这个库,一直对jQuery的自定义事件有疑惑,就看了看jQuery的源码,廓然开朗。

jQuery代码实现和触发自定义实现如下: 

jQuery的定义方式:
$(dom).bind('data-change',function(){//dom为一个html元素
      alert("asd");     
})

jQuery使用方式 : 
$(dom).trigger('init-change',[data]);

但内部机制是怎么触发这个事件的呢?原来jQuery通过的是缓存这些自定义事件,我就自己实现了一把,下面是我的代码:

 

var Dojo = function(selecter,context){
    return new this.init(selecter,context);//创建一个新的对象
}
Dojo.prototype.event = {};
Dojo.prototype.init  = function(selecter,context){
    this.gid = 0;
    var dom  = this.getDom(selecter); 
    this.dom = dom;
    this.dom.gid = this.gid++;
    return this;
}
Dojo.prototype.getDom =  function(selecter){
    var dom = document.getElementById(selecter) || null;
    return [dom];
}
Dojo.prototype.addEvent = function(eventName,fn){//存放自定义的事件
    if(!this.event[eventName]){
        this.event[eventName] = [];
    }
    this.event[eventName].push( fn );
}
//Dojo工具类
Dojo.Util = {};
Dojo.Util.isFunction = function(fn){
    return Object.prototype.toString.call( fn ).slice(8,-1) === 'Function';
}
Dojo.Util.ToArray = function(args){
    return Array.prototype.slice.call( args , 0 );
}
//简单实现事件的绑定
Dojo.prototype.click = function(fn){
    this.event[this.dom.gid] = this.event[this.dom.gid] || [];
    var i = j = 0;
    var self = this;
    if(Dojo.Util.isFunction( fn )){
        for(;i<this.dom.length;i++){
            this.dom[i].addEventListener('click' , function(e,data){
                fn.call(self,e,data);        
            } ,false);
        }
    }

}
Dojo.prototype.trigger = function(eventName,data){
    var i = 0;
    if(!this.event[eventName]){
        return;
    }
    for(len = this.event[eventName].length;i<len;i++){
        this.event[eventName][i].apply(this.dom,data);
    }
    return this;
}
Dojo.prototype.init.prototype = Dojo.prototype;
var dom = new Dojo('dom');
//为创建的dom对象增加自定义函数
//这里面就增加了两个一样的事件
dom.addEvent("data-change",function(){
    console.log(arguments);        
});
dom.addEvent("data-change",function(){
    var arr;
    arr = Dojo.Util.ToArray(arguments);  
    alert(arr);        
});
//click的时候触发事件
dom.click(function(e){
    this.trigger("data-change",['a','c','d']);
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值