イナヅマTVログ

EaselJSのEventDispatcher.jsを借りてJavaScriptでaddEventListener

| 0件のコメント

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クラスが加わる

コメントを残す

必須欄は * がついています