サイトトップ

Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

EaselJS 0.7.0: Eventクラスでイベントの流れを扱うメソッド

ID: FN1309002 Technique: HTML5 and JavaScript Library: EaselJS 0.7.0

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

Event.preventDefault()メソッド
文法 Eventオブジェクト.preventDefault()
概要

DOM標準にしたがって、イベントが起こったときに行われるべきデフォルトの動きを止める。Event.defaultPreventedプロパティの値はtrueに定められる。

引数

なし。

戻り値 なし。
Event.stopImmediatePropagation()メソッド
文法 Eventオブジェクト.stopImmediatePropagation()
概要

DOM標準にしたがって、そのイベントが後続のリスナーに伝わるのを止める。Event.propagationStoppedEvent.immediatePropagationStoppedプロパティの値はともにtrueに定められる。

引数

なし。

戻り値 なし。
Event.stopPropagation()メソッド
文法 Eventオブジェクト.stopPropagation()
概要

DOM標準にしたがって、そのイベントが後続のオブジェクトに伝わるのを止める。Event.propagationStoppedプロパティの値はtrueに定められる。

引数 なし。
戻り値 なし。

説明

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

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

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

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

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


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

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

図003■ボタンのクリックと背景のドラッグ
図003左
ボタンはクリック
図003右
背景はドラッグ

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

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

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



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


Copyright © 2001-2013 Fumio Nonaka.  All rights reserved.