• 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']);
    });

      

      

  • 相关阅读:
    我的SICP习题解答-chapter 1
    redis主从复制实验,使用ruby
    python连接redis
    ruby连接redis
    python中的classmethod和staticmethod有什么不同[转载]
    安装配置rails环境
    试用memcached高可用repcached
    试用memcached
    Python一个很好玩的特性decorator
    mybatis随笔四之MapperProxy
  • 原文地址:https://www.cnblogs.com/lztkiss/p/2906740.html
Copyright © 2020-2023  润新知