お品書き
• 01 EaselJS NEXTのイベントモデル
  
  • 01-01 EventDispatcherをDisplayObjectクラスが継承
  • 01-02 Eventクラスが新たに備わった
• 02 Eventクラスのメソッドでイベントの流れをどう扱うか
  • 02-01 Eventクラスでイベントの流れを扱うメソッド
  • 02-02 イベントのデフォルトの動きを止める
  • 02-03 イベントの流れを止める

2013年9月20日現在EaselJS次期バージョン候補(NEXT)が公開されている。CreateJSにはDOM Level 2イベントモデルにもとづいた改訂が加わり、オブジェクトの間をイベントが行き来するようになる。そのイベントの流れをコントロールするメソッドについてご説明しよう。なお、新たなイベントモデルの大枠については、「EaselJS次期バージョンのイベントモデル改訂」をお読みいただきたい。

DS LAB.「第8回Creators MeetUp開催しました」にUSTREAM映像が掲載された。

01 EaselJS NEXTのイベントモデル

参考:「EaselJS次期バージョンのイベントモデル改訂」

01-01 EventDispatcherをDisplayObjectクラスが継承

EaselJS NEXTでは、DisplayObjectがEventDispatcherを継承するようになった。

図001■DisplayObjectはEventDispatcherを継承する

EaselJS 0.6.1では、DisplayObjectがEventDispatcherをmix-in。

図002■EaselJS 0.6.1ではEventDispatcherクラスを使う？

静的メソッドEventDispatcher.initialize()で、引数のオブジェクト(クラスのプロトタイプオブジェクト)に自らのメソッドの参照を与える。

// DisplayObjectクラスの初期化時
createjs.EventDispatcher.initialize(DisplayObject.prototype);

EventDispatcher.initialize = function(target) {   target.addEventListener = EventDispatcher.prototype.addEventListener;   target.removeEventListener = EventDispatcher.prototype.removeEventListener;   target.removeAllEventListeners = EventDispatcher.prototype.removeAllEventListeners;   target.hasEventListener = EventDispatcher.prototype.hasEventListener;   target.dispatchEvent = EventDispatcher.prototype.dispatchEvent; };

01-02 Eventクラスが新たに備わった

イベントオブジェクトの基本クラスとしてEventクラスが定められた。

図003■イベントのバブリングとキャプチャ

02 Eventクラスのメソッドでイベントの流れをどう扱うか

「EaselJS次期バージョン候補に備わったEventクラスでイベントの流れを扱う」

02-01 Eventクラスでイベントの流れを扱うメソッド

02-02 イベントのデフォルトの動きを止める

Event.preventDefault()メソッドのイメージ。

02-03 イベントの流れを止める

バブリングするイベントのリスナーを、子オブジェクトにふたつ、親オブジェクトにひとつ加えて、ふたつのメソッドによりイベントの流れがどう変わるか確かめる(図004)。

• Event.stopPropagation():   部外秘
• Event.stopImmediatePropagation():   他言無用

図004■バブリングするイベントのリスナーを子オブジェクトにふたつと親オブジェクトにひとつ加える

作成者: 野中文雄
更新日: 2013年9月24日 USTREAM映像の公開を追加。
更新日: 2013年9月23日 サンプルコードなどの加筆。
作成日: 2013年9月21日