Flash入門
第8回　イベント・リスナー方式を学ぼう

図3●[プロパティ]パネルを使って，ボタンに名前（インスタンス名）をつける

[画像のクリックで拡大表示]

リスト3●「アプリケーション」のフォームに記述するイベント処理のコード（イベント・リスナー方式）

[画像のクリックで拡大表示]

図4●[アクション]パネルのツールボックスでclickイベントをダブルクリックすると，addEventListenerのコードが途中まで自動的に入力される（青枠内）

[画像のクリックで拡大表示]

リスト4●匿名関数の定義方法と使い方の例

[画像のクリックで拡大表示]

図5●クリックしたボタンによって異なるメッセージを表示するFlashアプリケーション

[画像のクリックで拡大表示]

図6●三つのボタンにインスタンス名とラベルをつける

[画像のクリックで拡大表示]

リスト5●「アプリケーション」のフォームに記述するイベント処理のコード（イベント・リスナー方式）。//から行末まではコメントとして扱われる

[画像のクリックで拡大表示]

リスト6●「アプリケーション」のフォームに記述するイベント処理のコード（イベント・ハンドラ・メソッド方式）。

[画像のクリックで拡大表示]

イベント・リスナー方式では
通知される側を通知する側に登録する

　次に，コンポーネント・イベント・リスナー（以下，「イベント・リスナー」と呼びます）について見てみましょう。イベント・リスナーは，イベントを通知する側（ブロードキャスター）と通知される側（リスナー）を用意して，「イベントが発生したら，ブロードキャスターからリスナーにイベントの発生を通知してしかるべき処理をしてもらう」という仕組みになっています。したがって，イベントが発生したときに実行する処理は基本的にリスナー側に記述します。

　今回扱っているようなコンポーネントのイベントを処理する場合は，フォーム，ボタン，リストといったコンポーネントのインスタンスがブロードキャスターになります。インスタンスにリスナーを登録するには，addEventListenerメソッドを使って次のように記述します。

インスタンス.addEventListener(イベント, リスナー)

リスナーには，任意のオブジェクトを指定できます（「リスナー・オブジェクト」と呼びます）。ステージ上にすでに配置されているインスタンスをリスナー・オブジェクトに指定しても構いませんし，イベント処理用のオブジェクトを新たに作成し，それを指定しても構いません＊11。

　先ほど説明したように，ブロードキャスターがリスナー・オブジェクトにイベントを通知すると，リスナー・オブジェクト側で用意した処理が呼び出されます。ポイントは，このとき呼び出されるのが，通知されたイベント名と同じ名前のプロパティ（あるいはメソッド）に記述した処理であるということです。例えば，clickイベントを通知すると，リスナー・オブジェクトのclickプロパティ（あるいはclickメソッド）が呼び出されるわけです＊12。

　仕組みがわかったところで，実際に試してみましょう。先程記述したonハンドラのコードをすべて削除してください。そして，「アプリケーション」フォームに配置したボタンに「myButton1」とインスタンス名をつけます（図3[拡大表示]）。

　次に，[スクリーンアウトライン]ペインから「アプリケーション」フォームを選択し，[アクション]パネルにリスト3[拡大表示]のコードを記述します＊13。このリストでは，最初にclickプロパティを持つリスナー・オブジェクトを作成し，次に，作成したリスナー・オブジェクトをaddEventListenerメソッドでインスタンス（myButton1）に登録する，という手順をとっています。addEventListenerメソッドのコードを入力する際には，[アクション]パネルの左側のツールボックスから該当するコンポーネントのイベントを選択し，イベント名をダブルクリックすると簡単です（図4[拡大表示]）。

　なお，ブロードキャスターになるインスタンス（ここではmyButton1）は，コードを記述するフォームから見たターゲットパス＊14を含めた名前を書く必要があります。ただし今回はインスタンスを配置したフォームにコードを記述していますから，インスタンス名を記述するだけで済みます。

リスナー・オブジェクトのプロパティに
匿名関数として処理を記述する

　リスト3のコードを順に説明していきましょう。オブジェクトを新規に作成するには，多くのオブジェクト指向言語と同様にnew演算子の後に，作成したいオブジェクトの元となるクラス名＊15を指定します（リスト3の(1)）。今回は，ActionScriptのクラスの中で最も基本的なクラスであり，動的にプロパティを追加・削除できるObjectクラスを利用します。作成したオブジェクトは，一時的な変数＊16

である「listenerObject」に「＝」で代入しておきます＊17

　次に，listenerObjectにclickプロパティを追加し，内容を定義しています（リスト3の(2)）。Objectクラスのオブジェクトにプロパティを追加するには，オブジェクト名に続けて「.」（ドット）を挟んで新規プロパティ名を記述し，値または参照を「＝」で代入するだけです。

　ここではclickプロパティの内容を定義するのに「匿名関数」という仕組みを利用しています＊18。匿名関数とはその名の通り，名前を持たない関数です。コードのほかの個所で利用することがない関数を定義する際などに使います。匿名関数の構文は，

function(引数){処理};

となります。変数やプロパティに割り当てられた匿名関数を実行するには，変数名やプロパティ名の後に「( )」を記述します。例えば，変数aに割り当てられた匿名関数を実行するには，リスト4[拡大表示]のようなコードを記述します。

　リスト3(2)では，listenerObjectのclickプロパティに，「ボタンがクリックされました。」というメッセージを出力する匿名関数を代入しています。これでclickプロパティを持つリスナー・オブジェクトを作成できました。

　ブロードキャスターがmyButton1，通知するイベントがclick，リスナー・オブジェクトがlistenerObjectですから，イベント・リスナーを登録するコードはリスト3の(3)のようになります。これで完成です。プレビュー表示で動作を確認してみましょう。myButton1にイベント・ハンドラを直接記述していないにもかかわらず，myButton1をクリックすると[出力]パネルにメッセージが表示されることがわかるでしょう。

　イベント・リスナー方式は，イベントに関するコードを1カ所にまとめて記述できるので，コードが見やすくなるというメリットがあります。例えば，複数のボタンを配置し，クリックしたボタンに応じて異なるメッセージを表示するFlashアプリケーションを，イベント・リスナー方式で書いてみましょう（図5[拡大表示]）。

　「アプリケーション」フォームにボタンを三つ配置し，それぞれに「myButton1」「myButton2」「myButton3」とインスタンス名をつけます（図6[拡大表示]）。そして，「アプリケーション」フォームにリスト5[拡大表示]のコードを記述します。リスト5は，リスト3と同じように，リスナー・オブジェクトの作成，addEventListenerメソッドでボタンに登録，という手順になっています。異なるのは，一つのリスナー・オブジェクトを複数のボタンに登録している点と，匿名関数で引数eventObjを受け取っている点です。

　実はコンポーネントでイベントが発生したとき，リスナー・オブジェクトで実行される関数には，イベントに関する情報をひとまとめにした「イベント・オブジェクト」が渡されます。イベント・オブジェクトは必ず「target」（イベントを通知したインスタンスへの参照）と，「type」（イベントの種類を表す文字列）の二つのプロパティを持ちます＊19。このプロパティの値によって，どのインスタンスからどんなイベントが通知されたのかを判断できます。

　リスト5の(1)では，イベント・オブジェクトのtargetプロパティを利用してインスタンス名を含んだメッセージを表示し，myButton1の場合はさらに，表示するメッセージを追加しています。複数ボタンに共通する処理や，特定のボタンに対する処理を一つのリスナー・オブジェクト内で管理できるので，コードが見やすくなっていることがわかるでしょう。リスト5とは逆に，一つのブロードキャスターに複数のリスナー・オブジェクトを登録し，一つのボタンを押すと複数の処理を実行させるといった使い方も可能です。

イベント・ハンドラ・メソッドを使用する

　最後に，イベント・ハンドラ・メソッドを見てみましょう。イベント・ハンドラ・メソッドは，コンポーネントにあらかじめ定義されているメソッドです。そのコンポーネントのインスタンスでイベントが発生したときに，自動的に呼び出される仕組みになっています。

　しかし，初期状態ではイベント・ハンドラ・メソッドの処理内容は空っぽで，メソッドが実行されても実際には何も起こりません。イベントが発生したときに実行するコードをイベント・ハンドラ・メソッドに上書きすることで初めて，なんらかの処理を実行するようになります＊20。

　Flashのコンポーネントのイベント・ハンドラ・メソッドは，「コンポーネント固有のイベント名＋Handler」という名前になっています。例えば，Buttonクラスのclickイベントであれば「clickHandler」，Formクラスのloadイベントであれば「loadHandler」といった具合です。このイベント・ハンドラ・メソッドに，匿名関数の仕組みを使って任意の処理を上書きすればよいわけです。

　実際に試してみましょう。myButton1というインスタンス名のボタンを貼り付けた「アプリケーション」フォームに，リスト6[拡大表示]のコードを記述してください。プレビュー表示で動作を確認してみましょう。myButton1をクリックするとメッセージが表示されるのを確認できたでしょうか。

　今回は，コンポーネントのイベント処理を実行する方法をご紹介しました。どの方法にも一長一短がありますので，用途に合った方法を見つけて使い分けましょう。