javascript自定义事件

javascript自定义事件

首先，我们要实现一个专门管理事件的EventDispatcher“类”，它具有添加事件、移除事件、触发事件的方法(抄袭于AS。。。 o～(￣▽￣o～))，以下是代码实现：

    var EventDispatcher=function(target){
        this._target=target;
    }.define({
        _target:null,

        _events:{},

        addEventListener:function(type,handle){
            if (!this._checkFunction(handle)) {
                return;
            }

            var evts=this._events;

            !evts[type] && (evts[type]=[]);
            evts[type].push(handle);
        },
        removeEventListener:function(type,handle){
            var evts=this._events[type];
            if (!this._checkFunction(handle) || !evts || !evts.length) {
                return;
            }
            for(var i=evts.length-1;i>=0;i--){
                evts[i]==handle && evts.splice(i,1);
            }
        },
        dispatchEvent:function(type){
            var evts=this._events[type];
            if (!evts || !evts.length) {
                return;
            }

            var args=Array.prototype.slice.call(arguments,0);
            args.shift();
            for(var i=0,l=evts.length;i<l;i++){
                evts[i].apply(this._target,args);
            }

        },

        _checkFunction:function(func){
            return String.prototype.slice.call(func, 0, 8) == "function";
        }
    });

接着，我们在自定义的“类”中使用EventDispatcher的实例(也可以用继承方式去实现，这里的例子是用的使用方式)：

    var Counter=function(){
        this._eventDispatcher=new EventDispatcher(this);
    }.define({
        n:0,
        _eventDispatcher:null,
        addEventListener:function(type,handle){
            this._eventDispatcher.addEventListener(type,handle);
        },
        removeEventListener:function(type,handle){
            this._eventDispatcher.removeEventListener(type,handle);
        },
        set:function(n){
            this.n=n;
            n%10==0 && this._eventDispatcher.dispatchEvent("ten");
        }
    });

最后呢，再申明一个自定义类的实例来使用就O了

    var handle1=function(){
        alert(this.n);
    };
    var handle2=function(){
        alert("handle2:"+this.n);
    };
    var i=0;
    var counter=new Counter();
    counter.addEventListener("ten",handle1);
    counter.addEventListener("ten",handle2);
    setInterval(function(){
        counter.set(++i);
        i==10 && counter.removeEventListener("ten",handle1);
    },1000);

完整代码如下：
原来我是代码，我勒个去～
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
        <span style="font-size:50px;color:red;" id="txt1"></span>
        <script type="text/javascript">
            Function.prototype.define=function(def){
                this.prototype=def;
                return this;
            };

            var EventDispatcher=function(target){
                this._target=target;
            }.define({
                _target:null,

                _events:{},

                addEventListener:function(type,handle){
                    if (!this._checkFunction(handle)) {
                        return;
                    }

                    var evts=this._events;

                    !evts[type] && (evts[type]=[]);
                    evts[type].push(handle);
                },
                removeEventListener:function(type,handle){
                    var evts=this._events[type];
                    if (!this._checkFunction(handle) || !evts || !evts.length) {
                        return;
                    }
                    for(var i=evts.length-1;i>=0;i--){
                        evts[i]==handle && evts.splice(i,1);
                    }
                },
                dispatchEvent:function(type){
                    var evts=this._events[type];
                    if (!evts || !evts.length) {
                        return;
                    }

                    var args=Array.prototype.slice.call(arguments,0);
                    args.shift();
                    for(var i=0,l=evts.length;i<l;i++){
                        evts[i].apply(this._target,args);
                    }

                },

                _checkFunction:function(func){
                    return String.prototype.slice.call(func, 0, 8) == "function";
                }
            });



            var Counter=function(){
                this._eventDispatcher=new EventDispatcher(this);
            }.define({
                n:0,
                _eventDispatcher:null,
                addEventListener:function(type,handle){
                    this._eventDispatcher.addEventListener(type,handle);
                },
                removeEventListener:function(type,handle){
                    this._eventDispatcher.removeEventListener(type,handle);
                },
                set:function(n){
                    this.n=n;
                    n%10==0 && this._eventDispatcher.dispatchEvent("ten","lalalalal~~");
                }
            });


            var handle1=function(str){
                alert(str+","+this.n);
            };
            var handle2=function(){
                alert("handle2:"+this.n);
            };
            var i=0;
            var counter=new Counter();
            counter.addEventListener("ten",handle1);
            counter.addEventListener("ten",handle2);
            setInterval(function(){
                document.getElementById("txt1").innerHTML=i;
                counter.set(i);
                i==10 && counter.removeEventListener("ten",handle1);
                i++;
            },1000);

        </script>
    </body>
</html>

代码实现都比较简单，就没有写注释了。

现在博客园还是没有集成运行代码的功能，下次再自己搞个吧，这次大家就将就先复制到本地运行吧。。。。囧oz。。
相关阅读:
观察者模式
 策略模式
 设计模式之Template Method
面向对象设计原则
 设计模式简介
 封装Server类和Client类
 为客户端添加输入线程
 客户端升级为select网路模型
 将服务端select设置为非阻塞，处理更多业务
 Laradock 使用中遇到的问题汇总
原文地址：https://www.cnblogs.com/Random/p/1818588.html