イベントの使用 -- Flex 2.01

Flex でイベントを使用するには、2 つの手順を実行します。最初に、イベントに応答する関数またはクラスメソッド ("イベントリスナー" または "イベントハンドラ" と呼びます) を記述します。この関数は一般に、Event オブジェクトのプロパティやアプリケーションの状態に関する設定にアクセスします。この関数のシグネチャには通常、渡されるイベントタイプを指定するパラメータを含めます。

次の例は、コントロールが受け取る対象のイベントをトリガした際に通知する単純なイベントリスナー関数を示しています。

<?xml version="1.0"?>
<!-- events/SimpleEventHandler.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  <mx:Script><![CDATA[
     import mx.controls.Alert;

     private function initApp():void {
        b1.addEventListener(MouseEvent.CLICK, myEventHandler);
     }

     private function myEventHandler(event:Event):void {
        Alert.show("An event occurred");
     }
  ]]></mx:Script>

  <mx:Button id="b1" label="Click Me" click="myEventHandler(event)"/>

</mx:Application>

この例からわかるように、addEventListener() メソッドを使用して、その関数またはクラスメソッドを表示リストオブジェクトにも登録します。

ほとんどの Flex コントロールでは MXML タグ内でリスナーを指定できるため、リスナーを簡単に登録できます。たとえば、addEventListener() メソッドを使用して Button コントロールの click イベントのリスナー関数を指定する代わりに、<mx:Button> タグの click 属性で指定することができます。

<?xml version="1.0"?>
<!-- events/SimplerEventHandler.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.controls.Alert;

     private function myEventHandler(event:Event):void {
        Alert.show("An event occurred");
     }
  ]]></mx:Script>

  <mx:Button id="b1" label="Click Me" click="myEventHandler(event)"/>

</mx:Application>

これは、前述のコード例の addEventListener() メソッドを使用した場合と同じですが、addEventListener() メソッドを使用することをお勧めします。このメソッドを使用すると、優先度やキャプチャ設定を指定したり、イベント定数を使用したりできるため、イベントをより詳細に制御することが可能です。また、addEventListener() を使用してイベントハンドラを追加した場合は、removeEventListener() を使用して不要になったハンドラを削除できます。イベントハンドラをインラインで追加した場合は、そのハンドラに対して removeEventListener() を呼び出すことはできません。

コントロールがイベントを生成するたびに、そのイベントに関する情報を含む Event オブジェクトが生成されます。この情報には、イベントのタイプや、送出コントロールへの参照などが含まれます。生成された Event オブジェクトを使用するには、イベントハンドラ関数でパラメータとして指定します。次に例を示します。

<?xml version="1.0"?>
<!-- events/EventTypeHandler.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.controls.Alert;
     
     private function myEventHandler(e:Event):void {
        Alert.show("An event of type " + e.type + " occurred.");
     }
  ]]></mx:Script>

  <mx:Button id="b1" label="Click Me" click="myEventHandler(event)"/>

</mx:Application>

インラインイベントによってトリガされたイベントハンドラで Event オブジェクトにアクセスする場合は、MXML タグ内に event キーワードを追加して、Event オブジェクトが明示的にハンドラに渡されるようにする必要があります。

<mx:Button id="b1" label="Click Me" click="myEventHandler(event)"/>

ハンドラ関数では Event オブジェクトを使用する必要はありません。次の例では、2 つのイベントハンドラ関数を作成して ComboBox コントロールのイベントに登録します。1 つ目のイベントハンドラ、openEvt() はパラメータを受け取りません。2 つ目の changeEvt() は、Event オブジェクトをパラメータとして受け取り、このオブジェクトを使用して、イベントをトリガした ComboBox コントロールの value と selectedIndex にアクセスします。

<?xml version="1.0"?>
<!-- events/MultipleEventHandlers.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     private function openEvt():void {
        forChange.text="";
     }
     private function changeEvt(e:Event):void {
        forChange.text=e.currentTarget.value + " " +
           e.currentTarget.selectedIndex;
     }
  ]]></mx:Script>
  <mx:ComboBox open="openEvt()" change="changeEvt(event)">
     <mx:dataProvider>
        <mx:Array>
           <mx:String>AK</mx:String>
           <mx:String>AL</mx:String>
           <mx:String>AR</mx:String>
        </mx:Array>
     </mx:dataProvider>
  </mx:ComboBox>
  <mx:TextArea id="forChange" width="150"/>
</mx:Application>

この例では、Event オブジェクトの target プロパティにアクセスしています。詳細については、target プロパティへのアクセスを参照してください。

サブトピック

Event オブジェクトの指定

次の例に示すように、リスナー関数のシグネチャで、オブジェクトを Event 型として指定します。

function myEventListener(e:Event):void { ... }

ただし、送出されたイベントのタイプに固有のプロパティにアクセスする場合は、ToolTipEvent や KeyboardEvent など、より詳しいイベントタイプを指定する必要があります。次に例を示します。

import mx.events.ToolTip
function myEventListener(e:ToolTipEvent):void { ... }

場合によっては、ActionScript ブロック内でイベントのクラスを読み込まなければならないことがあります。

ほとんどのオブジェクトには特定の関連イベントがあります。また、複数のタイプのイベントを送出できます。

Event 型のイベントを宣言した場合、そのイベントをより詳細なタイプにキャストして、イベント固有のプロパティにアクセスすることができます。詳細については、イベントのサブクラスの使用を参照してください。

target プロパティへのアクセス

Event オブジェクトには、送出コンポーネント (つまり "ターゲット") のインスタンスへの参照が含まれています。したがって、イベントリスナーで、そのインスタンスのすべてのプロパティおよびメソッドにアクセスすることができます。次の例では、イベントをトリガした Button コントロールの id にアクセスしています。

<?xml version="1.0"?>
<!-- events/AccessingCurrentTarget.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.controls.Alert;
     private function myEventHandler(e:Event):void {
        Alert.show("The button " + e.currentTarget.id + " was clicked");
     }
]]></mx:Script>
  <mx:Button id="b1" label="Click Me" click="myEventHandler(event)"/>
</mx:Application>

現在のターゲットにおけるメソッド呼び出しとプロパティへのアクセスは、混乱しがちです。currentTarget プロパティの型は DisplayObject です。ActionScript は厳密に型指定されているため、event.currentTarget.methodName() を呼び出せるのは、methodName が DisplayObject で定義されているメソッドの場合のみです。プロパティの場合も同様です。event.currentTarget.property にアクセスできるのは、property が DisplayObject で定義されている場合のみです。currentTarget で他のメソッド (setStyle() など) を呼び出そうとすると、エラーが返されます。setStyle() メソッドは、DisplayObject のサブクラスである UIComponent で定義されています。そのため、setStyle() メソッドを呼び出す前に、currentTarget を UIComponent にキャストする必要があります。次に例を示します。

<?xml version="1.0"?>
<!-- events/InvokingOnCurrentTarget.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.core.UIComponent;

     private function myEventHandler(e:Event):void {
        UIComponent(e.currentTarget).setStyle("color", "red");
     }
  ]]></mx:Script>
  <mx:Button id="b1" label="Click Me" click="myEventHandler(event)"/>
</mx:Application>

また、表示リスト内の現在のノードへの参照が含まれる target のメソッドとプロパティにアクセスすることもできます。詳細については、target プロパティと currentTarget プロパティについてを参照してください。