EaselJS 0.7.0のEventクラスは、イベントオブジェクトの基本クラスとして新たに定められました。Eventオブジェクトは、イベントが起こったときにEventDispatcherクラスにより配信されます。また、EventはEventDispatcherクラスとともにDOM Level 2イベントモデルにもとづきます。リスナーを加えたオブジェクトに親子の階層があるとき、その間をイベントが伝わるバブリングとキャプチャの流れもサポートします。

説明

CreateJSは、DOM Level 2イベントモデルをサポートします。したがって、イベントはEventオブジェクトとして、EaselJSの表示オブジェクトの階層をとおして伝わります。イベントが表示リストの階層を上る流れがバブリング、下る流れはキャプチャと呼ばれます。こうしたイベントの流れ(フロー)は、おもにEaselJSの表示リストを考えた仕組みです(図001)。けれども、EventDispatcherクラスのメソッドを備え、parentプロパティをもつオブジェクトであれば使えます。

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

Eventクラスでイベントの流れを扱おうとしたとき、前掲の3つのメソッドが使えます。イベントが起きたときに、それにともなって行われるべきデフォルトの動きがある場合、Event.preventDefault()メソッドはその動きを止めます。

イベントの流れを止めるメソッドはふたつあります。Event.stopImmediatePropagation()メソッドはイベントを今の処理かぎりで直ちに(immediate)止め、イベントリスナーが加えられた現行オブジェクト(Event.currentTargetプロパティの参照)のつぎのリスナーにもイベントは送りません。それに対して、Event.stopPropagation()メソッドは、表示リストのつぎの階層のオブジェクトにイベントを送るのを止め、現行オブジェクトのリスナーにはイベントを渡します(図002)。

図002■イベントフローのバブリング

例

以下のコードは親Containerオブジェクト(container)に背景のBitmapインスタンス(instance)とボタンのShapeインスタンス(button)を加え、親オブジェクトごとドラッグできるようにします。そのため、親オブジェクトのDisplayObject.mousedownイベントに、リスナー(startDrag())を加えました(第3行目)。

また、ボタンのオブジェクト(instance)については、DisplayObject.clickイベントのリスナー(stopEvent())でクリック時の動作を定めます(第4行目)。ただし、ボタン上でマウスボタンを押したまま動かしても、ドラッグは起こらないようにします(図003)。

ボタンはクリック

背景はドラッグ

そこで、ボタンのブジェクトのDisplayObject.mousedownイベントにもリスナー(stopEvent())を加えます(第3行目)。リスナー関数は、Event.stopPropagation()メソッドで親オブジェクトへのイベントのバブリングを止めます(第7行目)。これで、ドラッグされることはなくなります。

container.addChild(instance); container.addChild(button); container.addEventListener("mousedown", startDrag); button.addEventListener("click", navigateToURL); button.addEventListener("mousedown", stopEvent); function stopEvent(eventObject) {   eventObject.stopPropagation(); }

この例のコード全体を、以下のjsdo.itに掲げました。

作成者: 野中文雄
更新日: 2013年11月9日 タイトルを「EaselJS次期バージョン候補に備わったEventクラスでイベントの流れを扱う」から変更。図001と「例』を追加。
作成日: 2013年9月19日