feeds2013/05/14カテゴリー:JavaScript新しくなったCreateJSのイベントリスナーを理解しようTweet少し遅くなりましたが、先日CreateJSの新バージョンが公開され、EaselJSのバージョンは0.6.0となりました。新バージョンのEaselJSには様々な新機能が追加されていますが、その中で最も大きな変更点は、EventDispatcherクラスの追加と共にイベントリスナーの仕組みが導入された点でしょう。今回は、いくつかのサンプルを通してEaselJSのイベントリスナーの使い方をご紹介したいと思います。0.7では、イベント関連の仕様が若干変更されました。0.7で変更されたイベント処理を理解しよう」で解説していますので、よろしければ合わせてご覧下さい。addEventListener()オブジェクトにイベントリスナーを追加するには、addEventListener()を使用します。第1引数でイベントの種類を文字列で指定し、第2引数でリスナーとなる関数を指定します。下記のサンプルでは、ステージ中央に配置した円形のオブジェクト_circleにclick時のリスナー関数としてclickHandlerを追加しています。結果として、_circleがクリックされるとclickHandlerが実行されます。リスナー関数内のthis参照は、Windowオブジェクトになります。イベントが発生したオブジェクトは、引数で受け取ったイベントオブジェクトのtargetプロパティから取得できます。addEventListener()の第2引数には、handleEvent()メソッドを実装したオブジェクトを指定することもできます。例として、StageクラスはhandleEvent()メソッドを実装しているため、TickerクラスのtickイベントのリスナーとしてStageインスタンスを渡すことができます。removeEventListener()オブジェクトからイベントリスナーを削除するには、removeEventListener()を使用します。引数はaddEventListener()と同様です。下記のサンプルでは、クリック時に実行されるリスナー関数clickHandler()内でclickのイベントリスナーを削除しています。結果として、clickHandler()は1回目のクリック時にしか実行されません。オブジェクトがイベントリスナーを保持しているかは、hasEventListener()で調べることができます。hasEventListener()は、引数で指定したイベントのリスナーを保持していればtrue、保持していなければfalseを返します。scaleTween(target);}Sampleイベントリスナーとイベントハンドラの違いイベントリスナーはイベントハンドラと比べてどのような利点があるのでしょうか?簡単なサンプルを通して確認してみましょう。下記のサンプルでは、左側に配置した_circleLにはaddEventListener()で、右側に配置した_circleRにはonClickイベントハンドラでそれぞれ2つの関数を実行するようにしています。クリックしてみるとイベントリスナーでは2つの関数が実行されるのに対して、onClickイベントハンドラでは最後に代入した関数しか実行されないことがわかります。このようにイベントリスナーでは、同じイベントに対して複数の関数を登録できるメリットがあります。0.6.0ではまだ使用できますが、将来的に廃止予定とされているため、早めにイベントリスナーに慣れておきましょう。0.6.0では、マウスオーバー時にマウスカーソルを変更するcursorプロパティが追加されました。ActionScript3.0のbuttonModeのようなプロパティです。マウスオーバー時にカーソルをハンドカーソルに変更するには、DisplayObjectインスタンスのcursorプロパティに"pointer"を指定します。&quot;pointer&quot;;Sampleイベントリスナーを使ったドラッグ&ドロップ過去の投稿「EaselJSのMouseEventを理解しよう」では、イベントハンドラを使ったドラッグ&ドロップの例を紹介しましたが、イベントリスナーを使ったドラッグ&ドロップの例を見てみましょう。"mouseup"イベントはMouseEventオブジェクトでしか扱うことができません。そのため、"mousedown"イベントのリスナー関数で受け取ったMouseEventオブジェクトに対してaddEventListener()で"mousemove"と"mouseup"のリスナーを追加します。前述したようにリスナー関数内のthis参照がWindowオブジェクトになる点には注意が必要です。下記のサンプルでは、mouseDownHandler()内にmouseMoveHandler()とmouseUpHandler()を定義しています。offsetYにアクセスできます。dispatchEvent()dispatchEvent()を使うと任意のタイミングでイベントを発生させることができます。下記のサンプルでは、ステージ中央に配置したオブジェクトにmousedownするとchangeColor()が実行され、そのままmouseupするとscaleTween()が実行されます。mousedownしたままmouseoutした際にもdispatchEvent()でmouseupイベントを発生させているため、scaleTween()が実行されます。"stagemouseup"が追加されました。前述したようにDisplayObjectに定義された"mousemove"や"mouseup"は単独で使用することはできませんが、"stagemousemove"と"stagemouseup"は単独でも使用することができます。下記のサンプルでは、"stagemousemove"の処理で矢印のShapeインスタンスをマウス座標に向けるようにしています。"stagemousedown"で矢印のShapeインスタンスを縮小し、"stagemouseup"で元の大きさに戻しています。