EaselJSにEventDispatcher.jsが追加された様子。
https://github.com/CreateJS/EaselJS/
JavaScriptで困ってたのがカスタム・イベント作成と通知。
無いと困るのでオレオレ実装でだましだましやってきたけど、もっと信頼できる仕組みを作りたいと思ってました。
そんな時の、この良いお知らせ。
まじめにお仕事していると良いことがあるなぁ〜。
年末のステキなプレゼントです。
EventDispatcher.jsのソースはgithubでご覧になって下さい。
ActionScript 2, mx.events.EventDispatcher に似た仕組みを持っているようです。
使い方もかなり似ています。
jQueryを使用しています。
var EventDispatcher = createjs.EventDispatcher; function Example () { var dog = 'bow-wow'; var cat = 'mew'; var ref = this; $('body').on('click', function () { // 3 ref.dispatchEvent(Example.BODY_CLICK, null, [dog, cat]); }); } // 1 EventDispatcher.initialize(Example.prototype); Example.BODY_CLICK = 'bodyClick'; var example = new Example(); // 2 example.addEventListener(Example.BODY_CLICK, onBodyClick, this); // 4 function onBodyClick (eventObj) { console.log(eventObj.type, eventObj.params); } |
EventDispatcherには主要な関数と変数があります。
addEventListener:Function
removeEventListener:Function
removeAllEventListeners:Function
dispatchEvent:Function
hasEventListener:Function
_listeners:Object
【1】
EventDispatcher.initialize(object:Object)
上記5つの関数と_listenersを引数へ指定したObjectへコピーします。
【2】
addEventListener(type:String, callback:function, scope:Object, priority:Number)
type:String イベントタイプ
callback:function コールバック関数
scope:Object コールバック関数内のthis参照: Option
priority:Number default: 0, 実行順序、数値が大きいと先に実行される
【3】
dispatchEvent(eventObj:{String | Object}, callback:Function, params:Array)
eventObj イベントタイプ
callback 呼び出される関数(省略可)
params 呼び出される関数引数へ送られるパラメタ(省略可)
*イベントタイプだったら文字型で良さそうなんだけどわざわざObjectかStringになってるのは何かしら。
*callbackを指定するとどういうことができるんだろう、しかも第二引数。
*引数としてはパラメタが先の方が使いやすいのにと思った、まだ良くわかってない。
【4】
コールバック関数
引数として{type: ‘イベントタイプ’, params: [args…]}
type, paramsのキーをもつObjectが送られてきます。
dispatchEventでparamsが省略されると値はundefinedになります。
古い記事ですが、ご興味があれば「ActionScript 2, mx ライブラリ使用メモ mx.events.EventDispatcher」をご覧になると良く似ていることが分かるかと思います。
まだまだ正式リリースではないのでこれからソースは修正されていくかもです。
自分で作ろうとするとaddEventListener, removeEventListenerのとこが難しかったので、とても参考になりました。
■removeEventListener(type:String, callback:Function, scope:Object)
removeEventListenerの第三引数scopeはaddEventListener時に指定した時は必須になります。
addEventListenerで指定してremoveEventListenerで指定しないと削除されませんでした。
update 2012-12-07
野中先生がEaselJS EventDispatcher Classの詳細な解説を書いて下さっていました。
HTML5テクニカルノート: EaselJSのつぎのバージョンにEventDispatcherクラスが加わる