javascript自定义事件

时间：2010-09-05 来源：随机

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

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

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

完整代码如下：

原来我是代码，我勒个去～ <!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。。