TypescriptでEventDispatcher作ってみた(javascript)

TypeScriptはFlasherに優しい言語です。
ですが、使える機能はやっぱりjsです。
DomにEventDispatherついてますが、自分で作ったclassに継承とかできません。

という訳で皆さんよく作ってらっしゃる、自作EventDispatcherです。

僕も作ってみました。

EventDispathcer.ts

module events {
    export class EventDispatcher {
        listeners:any = {};
        dispatchEvent(event: any): void {
            var e:Event;
            var type: string;
            if (event instanceof Event) {
                type = event.type;
                e = event;
            } else {
                type = event;
                e = new Event(type);
            }

            if(this.listeners[type] != null){
                e.currentTarget = this;
                for (var i:number = 0; i < this.listeners[type].length; i++){
                    var listener: EventListener = this.listeners[type][i];
                        try {
                            listener.handler(e);
                        } catch (error) {
                            if (window.console) {
                                console.error(error.stack);
                            }
                        }
                }
            }
        }

        addEventListener(type: string, callback: Function, priolity: number = 0): void {
            if(this.listeners[type] == null){
                this.listeners[type] = [];
            }


            this.listeners[type].push(new EventListener(type, callback, priolity));
            this.listeners[type].sort(function (listener1:EventListener, listener2:EventListener) {
                return listener2.priolity - listener1.priolity;
            });
        }

        removeEventListener(type:string, callback:Function):void {
            if(this.hasEventListener(type, callback)) {
                for(var i:number=0; i < this.listeners[type].length; i++){
                    var listener:EventListener = this.listeners[type][i];
                    if(listener.equalCurrentListener(type, callback)) {
                        listener.handler = null;
                        this.listeners[type].splice(i,1);
                        return;
                    }
                }
            }
        }

        clearEventListener(): void {
            this.listeners = {};
        }

        containEventListener(type: string): boolean {
            if (this.listeners[type] == null) return false;
            return this.listeners[type].length > 0;
        }

        hasEventListener(type:string, callback:Function):boolean {
            if(this.listeners[type] == null) return false;
            for(var i:number=0; i < this.listeners[type].length; i++){
                var listener:EventListener = this.listeners[type][i];
                if(listener.equalCurrentListener(type, callback)) {
                    return true;
                }
            }
            return false;
        }
    }

    class EventListener {
        constructor(public type: string = null, public handler: Function = null, public priolity: number = 0) {
        }
        equalCurrentListener(type: string, handler: Function): boolean {
            if (this.type == type && this.handler == handler) {
                return true;
            }
            return false;
        }
    }

    export class Event {
        currentTarget:any;
        static COMPLETE: string = "complete";
        static CHANGE_PROPERTY:string ="changeProperty";
        constructor(public type: string = null, public value: any = null) {

        }
    }
}

使い方は下記のように、EventDispathcerクラスを継承する事で利用できます。
Actionscriptとおんなじ感じですね。

main.ts

/// <reference path="EventDispatcher.ts"/>
module sample {
    export class BtnSample extends events.EventDispatcher {
        constructor(public dom:HTMLElement) {
            super();
            dom.onclick = ()=>{
                this.btnClick();
            }
        }

        btnClick():void {
            this.dom.innerText = "クリック済み";
            this.dispatchEvent(new events.Event("clicked"));
        }

        getText():string {
            return this.dom.innerText;
        }
    }
}

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn">ボタン</button>
<script type="text/javascript" src="js/EventDispatcher.js"></script>
<script type="text/javascript" src="js/Main.js"></script>
<script type="text/javascript">
  var btnSample = new sample.BtnSample(document.getElementById("btn"));
  btnSample.addEventListener("clicked", function(){
    alert(btnSample.getText());
  });
</script>
</body>
</html>

今後はこれを使って色々サンプルを乗っけていこうと思います。

githubで公開しました。
よろしければ参考にしてみてください。