説明

EventDispatcherクラスは、イベントごとに加えられたリスナーを取りまとめ、イベントが起こったときそれぞれのリスナーに配信します。DisplayObjectは、EventDispatcherクラスを継承してイベントリスナーを扱います。他方、Tickerクラスは静的メソッドEventDispatcher.initialize()により、EventDispatcherクラスの備えるメソッド群をクラスのプロトタイプオブジェクトに加えています。

EventDispatcher.addEventListener()メソッドでイベントに加えたリスナー関数は、「グローバル・オブジェクト」上で呼出されます。したがって、Webブラウザでは、リスナー関数の中のthis参照はWindowオブジェクトを指します。関数の中のthis参照を変えたいときには、EventDispatcher.addEventListener()メソッドの第2引数に渡すリスナーにFunction.bind()メソッドで参照すべきオブジェクトを定めます(ただし、「EaselJSのイベントリスナーにFunction.bind()メソッドを適用するとリスナー内から削除できない」ことにご注意ください)。

EventDispatcher.on()メソッドは、第2引数の関数から新たなリスナー関数をつくって第1引数のイベントに加えます。呼出されるリスナー関数の中のthis参照は、第3引数で定まります。デフォルトでは、リスナーが関数の場合はメソッドの参照するオブジェクト、リスナーがオブジェクトのときはそのオブジェクトになります。メソッドの戻り値は、新たにつくられたリスナー関数です。イベントリスナーを除くときには、この関数の参照を渡さなければなりません。

リスナーにオブジェクトを加えると、そのオブジェクトに備わるhandleEvent()メソッドが呼出されます。たとえば、Stageクラスには内部的にhandleEvent()メソッドが定められており、Stage.update()メソッドを呼出します(後述「実装」参照)。したがって、Ticker.tickイベントのリスナーにStageオブジェクトを加えれば、Stage.update()メソッドがイベントごとに繰返し呼出せます。

静的メソッドEventDispatcher.initialize()に、クラス(コンストラクタ関数)のプロトタイプオブジェクト(Function.prototypeプロパティ)またはインスタンスを渡して呼出すと、EventDispatcherクラスのつぎの8つのメソッドが備わります(厳密には、後述「実装」のとおり、内部的なメソッドがもうひとつ加えられます)。

• EventDispatcher.addEventListener()
• EventDispatcher.on()
• EventDispatcher.removeEventListener()
• EventDispatcher.off()
• EventDispatcher.removeAllEventListeners()
• EventDispatcher.hasEventListener()
• EventDispatcher.dispatchEvent()
• EventDispatcher.willTrigger()

例

つぎのスクリプトは、インスタンス(instance)のDisplayObject.clickイベント("click")に、EventDispatcher.addEventListener()メソッドでリスナー関数(clickHandler())を加えます。すると、インスタンスをクリックしたとき、イベントリスナーが呼出されます。リスナー関数は、引数に受取ったイベントオブジェクトのEvent.targetプロパティから、クリックしたインスタンスの参照(instance)を得ます。そして、処理を終えた後、EventDispatcher.removeEventListener()メソッドでインスタンスのこのイベントからリスナーを除いています。したがって、この後インスタンスをクリックしても、関数は呼出されません。

instance.addEventListener("click", clickHandler); function clickHandler(eventObject) {   var instance = eventObject.target;   // 処理内容   instance.removeEventListener("click", clickHandler); }

つぎのスクリプトは、インスタンス(instance)のDisplayObject.clickイベント("click")に、EventDispatcher.on()メソッドでリスナー関数(clickHandler())を加えます。インスタンスをクリックしたとき、イベントリスナーは第3引数のオブジェクト(data)をthis参照として呼出されます。また、メソッドの第5引数に与えた値(30)は、リスナー関数が第2引数として受取ります。

リスナー関数(clickHandler())は、第1引数に受取ったイベントオブジェクト(eventObject)からクリックしたインスタンスの参照(instance)を得て、その角度を第2引数(angle)の値回します。そして、this参照のカウンタのプロパティ(count)を1加算して、値が1を超えるとEventDispatcher.removeEventListener()メソッドでインスタンスのこのイベントからリスナーを除きます^[*2]。したがって、インスタンスが回るのは、クリック2回だけになります。

EventDispatcher.removeEventListener()メソッドの第2引数に渡すリスナー関数が、this参照に定めたオブジェクトのプロパティ(listener)から取出されていることにご注目ください。なお、コードの初めの4行を関数内に書いて、EventDispatcher.on()メソッドの第3引数に引数に渡すオブジェクト(data)をローカル変数に納めたとしても、オブジェクトの参照は保たれます。

var data = {}; var listener = instance.on("click", clickHandler, data, false, 30); data.listener = listener; data.count = 0; function clickHandler(eventObject, angle) {   var instance = eventObject.target;   instance.rotation += angle;   if (++this.count > 1) {     instance.removeEventListener("click", this.listener);   } }

EventDispatcher.dispatchEvent()メソッドを用いたサンプルは、「EaselJS NEXT: Event.set()メソッドでオブジェクトにプロパティをまとめて加える」の「例」をご参照ください。

実装

EventDispatcherクラスの以下の3つのメソッドについて、バージョン0.7.0にもとづき、その実装をかいつまんでご説明します。

●EventDispatcher.addEventListener()メソッド
イベントリスナーは、内部的なプロパティでキャプチャフェーズ(_captureListeners)とそれ以外(_listeners)に分けてオブジェクトとして納められています。それらのオブジェクトには、イベント名のプロパティに配列が与えられ、リスナーはその配列エレメントに加えられます。

そこで、EventDispatcher.addEventListener()メソッドは、第3引数(useCapture)に応じてリスナーが納められたオブジェクトの参照を変数(listeners)に得て、指定のイベント(type)のプロパティで定められた配列(arr)を取出します。そして、メソッドが第2引数に受取ったリスナー(listener)を、その配列に納めています。EventDispatcher.addEventListener()メソッドは、加えたリスナーを返します。

EventDispatcher.prototype.addEventListener = function(type, listener, useCapture) {   var listeners;   if (useCapture) {     listeners = this._captureListeners = this._captureListeners || {};   } else {     listeners = this._listeners = this._listeners || {};   }   var arr = listeners[type];   // ...[中略]...   if (!arr) { listeners[type] = [listener]; }   else { arr.push(listener); }   return listener; };

なお、リスナーを納めるオブジェクトがまだないときは、新たなオブジェクトがつくられてプロパティ(_captureListenersまたは_listeners)に与えられます。論理和演算子||を用いた初期値の代入については、「論理演算子を使った条件判定」02「初期化されていない変数に値を与える」をご参照ください。

EventDispatcher.on()メソッドは、第2引数のリスナー(listener)から、他の引数にもとづく新たな関数をつくり、第1引数(type)のイベントのリスナーとして加えます。まず、第2引数のリスナーがhandleEvent()メソッドをもつオブジェクトのときは、そのメソッドをリスナー関数とします。スコープ(scope)のデフォルト値は、リスナーオブジェクトです。つぎに、第2引数が関数の場合には、スコープのデフォルト値をthis参照とします。

そして、改めて内部的にEventDispatcher.addEventListener()メソッドを呼出します。第1引数に受取ったイベントはそのまま渡し、リスナーを名前のない関数で定めています。その中でリスナー(listener)はFunction.call()メソッドで、スコープ(scope)をthis参照として呼出します(「SoundJSで関数にスコープを定める ー proxy()メソッド」の「実装」参照)。また、受取った第4引数(once)がtrueのときは、Event.remove()メソッドでイベントリスナーから除きます。

EventDispatcher.addEventListener()メソッドは、イベントに加えたリスナーを返すので、その関数をEventDispatcher.on()メソッドの戻り値とします。

EventDispatcher.prototype.on = function(type, listener, scope, once, data, useCapture) {   if (listener.handleEvent) {     scope = scope || listener;     listener = listener.handleEvent;   }   scope = scope || this;   return this.addEventListener(type, function(evt) {       listener.call(scope, evt, data);       once && evt.remove();     }, useCapture); };

なお、論理積演算子&&によるメソッドの呼び出しについては、「論理演算子を使った条件判定」01「関数があったら呼出す」をご参照ください。

EventDispatcher.initialize()メソッドは、引数に渡されたオブジェクトに、EventDispatcherクラスのイベントリスナーを扱うメソッドを加えます。EventDispatcherクラスのプロトタイプオブジェクト(Function.prototypeプロパティ)から9つのメソッドの参照を、同じ名前で引数のオブジェクトに与えます^[*3]。なお、_dispatchEvent()メソッドは、EventDispatcher.dispatchEvent()メソッドから内部的に呼出されます。

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

Tickerクラスは初期化されるときに、クラス(コンストラクタ)をEventDispatcher.initialize()メソッドに渡して、EventDispatcherクラスのメソッドを実装しています。

createjs.EventDispatcher.initialize(Ticker);

ご参考までに、ドキュメントに掲載されず、内部的に定められたStageクラスのメソッドhandleEvent()の実装をご紹介します。Ticker.tickイベントにリスナーとして加えられ、引数に受取ったイベントオブジェクトのtypeプロパティ値が"tick"であることを確かめると、Stage.update()メソッドが呼出されます。

Stage.prototype.handleEvent = function(evt) {   if (evt.type == "tick") { this.update(evt); } }

作成者: 野中文雄
更新日: 2015年6月2日 EaselJS 0.8.1にもとづいて改訂。タイトルのバージョンも改めた。
更新日: 2013年12月22日 タイトルを「EaselJSでイベントリスナーを扱うEventDispatcherクラス」から改題。EventDispatcher.willTrigger()メソッドを追加
更新日: 2013年10月12日 EaselJS 0.7.0にもとづく改訂。
更新日: 2013年8月29日 EaselJS次期バージョン候補(NEXT)にもとづいて、大幅に改定。「実装」のEventDispatcher.dispatchEvent()メソッドは除き、EventDispatcher.on()メソッドに替えた。
更新日: 2012年2月25日 CreateJSの新バージョンのリリースにともなう記述の変更およびリンク追加。また、Stage.handleEvent()メソッドの説明と実装を加えた。
更新日: 2013年2月7日「EaselJSのイベントリスナーにFunction.bind()メソッドを適用するとリスナー内から削除できない」へのリンク追加とそれにともなう若干の修正。
作成日: 2013年2月2日