EaselJS v0.6.0で新しくなったイベントモデル

EaselJS の v0.6.0 から、イベントモデルが大幅に変更になりました。v0.5.0 の記述形式に対する互換性もまだ残されていますが、将来的に削除予定の非推奨機能となっているので、いまのうちに新しい仕組みに慣れておくべきでしょう。

EventDispatcher

新たに EventDispatcher クラスが追加されました。イベントに関する処理は、このクラスに実装されています。

v0.5.0

var stage = new createjs.Stage(document.getElementById("canvas"));
stage.onMouseDown = function(e) {
	console.log(e.type); //onMouseDown
};

v0.6.0

var stage = new createjs.Stage(document.getElementById("canvas"));
stage.addEventListener("stagemousedown", function(e) {
	console.log(e.type); //stagemousedown
});

v0.5.0では、対象オブジェクトの各種イベントに対応したプロパティに、関数オブジェクトを代入することで、処理が実行されていました。v0.6.0 では、addEventListener でイベントタイプとそれに対応するイベントハンドラを登録します。

また、adddEventListener に対応して、dispatchEvent も実装されています。dispatchEvent は、対象のオブジェクトから任意のイベントを送出するメソッドです。

var stage = new createjs.Stage(document.getElementById("canvas"));
stage.addEventListener("customEventType", function(e) {
	console.log(e.type); //customEventType
	console.log(e.param); //event param
}
stage.dispatchEvent({type:"customEventType", param:"event param"});

DisplayObject は EventDispatcher を継承しているので、これらのメソッドは全ての表示オブジェクトで使用可能です。

EventDispatcher の機能を使用する事によって、一つのイベントに対して複数のイベントハンドラを登録したり、カスタムイベントによるオブジェクト間のメッセージのやり取りといった事が可能となりました。

注意点として、イベントタイプの文字列の形式が全体的に変更されています。これは、v0.5.0 形式のプロパティによるイベントハンドラに渡される引数に対しても適用されます。

Ticker

イベントモデルの変更に伴い、Ticker を使用した描画更新系の機能も変更されています。

v0.5.0

var stage = new createjs.Stage(document.getElementById("canvas"));
createjs.Ticker.addListener(stage);

var shape = stage.addChild(new createjs.Shape());
shape.onTick = function() {
	shape.rotation += 6;
}

v0.6.0

var stage = new createjs.Stage(document.getElementById("canvas"));
createjs.Ticker.addEventListener("tick", function(e) {
	stage.update();
});

var shape = stage.addChild(new createjs.Shape());
shape.addEventListener("tick", function(e) {
	shape.rotation += 6;
});

v0.5.0 では、Ticker の addListener メソッドで Stage を登録すると、自動的に描画更新が行われていました。しかし v0.6.0 では、addListener メソッドは非推奨となり、Ticker の tick イベントに登録したイベントハンドラ内で Stage の update メソッドの呼び出しを記述するようになりました。もちろん、描画更新に Ticker を使用しない場合は、この限りではありません。任意の処理に update メソッドの呼び出しを記述しても問題ありません。

Stage 内の子表示オブジェクトについは、Stage が update される度に tick イベントを送出するので、自身に tick イベントのイベントハンドラを登録して、アニメーション等の処理を行います。v0.5.0 において同じ目的で使用されていた onTick プロパティは、非推奨となっています。

まとめ

個人的には、v0.5.0 ではカスタムイベントを用いたオブジェクト間のメッセージングができなかったため、ひたすらコールバック関数を渡すような処理を書かなければならないのが不満でした。しかし、v0.6.0 でこの問題が解消され、より ActionScript3 に近いスタイルの開発ができるようになったと思います。