Menu コントロールまたはメニューベースのコントロールのユーザー操作は、イベント駆動型です。つまり、ユーザーによるメニューやサブメニューの開閉、メニュー内での選択、メニューアイテムに対するカーソルの移動などの操作で生成されるイベントを、アプリケーションで処理するという意味です。イベントとその使用方法の詳細については、イベントの使用を参照してください。

Menu コントロールと MenuBar コントロールは、メニュー特有の同じイベントを送出します。PopUpMenuButton コントロールのイベント処理は、他の 2 つのコントロールとは異なりますが、共有しているエレメントは多数あります。

Menu コントロールのイベント

Menu コントロールは、次のような MenuEvent クラスのメニュー特有のイベントタイプを定義します。

change 

（MenuEvent.CHANGE）ユーザーがキーボードやマウスで現在のメニュー選択を変更したときに送出されます。

itemClick 

（MenuEvent.ITEM_CLICK）ユーザーが normal、check、または radio タイプの有効なメニューアイテムを選択したときに送出されます。ユーザーが separator タイプのメニューアイテム、サブメニューが開くメニューアイテム、または無効になっているメニューアイテムを選択した場合は、送出されません。

itemRollOut イベント  

（MenuEvent.ITEM_ROLL_OUT）マウスポインタが Menu アイテムから離れたときに送出されます。

itemRollOver 

（MenuEvent.ITEM_ROLL_OVER）マウスポインタが Menu アイテム上に置かれたときに送出されます。

menuHide 

（MenuEvent.MENU_HIDE）メニュー全体または 1 つのサブメニューが閉じたときに送出されます。

menuShow 

（MenuEvent.MENU_SHOW）メニュー全体または 1 つのサブメニューが開いたときに送出されます。

イベントリスナーに渡されるイベントオブジェクトは MenuEvent タイプで、これには次のような 1 つまたは複数のメニュー特有のプロパティが含まれます。

オブジェクトベースのメニューアイテムのプロパティとフィールドにアクセスするには、次のようにメニューアイテムのフィールド名を指定します。

ta1.text = event.item.label

E4X XML ベースのメニューアイテムの属性にアクセスするには、次のようにメニューアイテムの属性名を E4X シンタックスに指定します。

ta1.text = event.item.@label

次の例は、単純なイベントリスナーを使用するメニューを示しています。複雑な例については、例：Menu コントロールのイベントの使用を参照してください。

<?xml version="1.0"?>
<!-- menus/EventListener.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute">

    <mx:Script>
        <![CDATA[
            import mx.controls.Menu;
            import mx.events.MenuEvent;
    
            // Function to create and show a menu.
            private function createAndShow():void {
                var myMenu:Menu = Menu.createMenu(null, myMenuData, false);
                myMenu.labelField="@label"
                // Add an event listener for the itemClick event.
                myMenu.addEventListener(MenuEvent.ITEM_CLICK, 
                    itemClickInfo);
                // Show the menu.
                myMenu.show(225, 10);
            }
    
            // The event listener for the itemClick event.
            private function itemClickInfo(event:MenuEvent):void {
                ta1.text="event.type: " + event.type;
                ta1.text+="\nevent.index: " + event.index;
                ta1.text+="\nItem label: " + event.item.@label
                ta1.text+="\nItem selected: " + event.item.@toggled;
                ta1.text+= "\nItem type: " + event.item.@type;
            }
        ]]>
    </mx:Script>

    <!-- The XML-based menu data provider. -->
    <mx:XML id="myMenuData">
            <xmlRoot>
            <menuitem label="MenuItem A" >
                <menuitem label="SubMenuItem A-1" enabled="false"/>
                <menuitem label="SubMenuItem A-2"/>
            </menuitem>
            <menuitem label="MenuItem B" type="check" toggled="true"/>
            <menuitem label="MenuItem C" type="check" toggled="false"/>
            <menuitem type="separator"/>     
            <menuitem label="MenuItem D" >
                <menuitem label="SubMenuItem D-1" type="radio" 
                    groupName="one"/>
                <menuitem label="SubMenuItem D-2" type="radio" 
                    groupName="one" toggled="true"/>
                <menuitem label="SubMenuItem D-3" type="radio" 
                    groupName="one"/>
            </menuitem>
            </xmlRoot>
    </mx:XML>

    <!-- Button controls to open the menus. -->
    <mx:Button x="10" y="5" 
        label="Open Menu" 
        click="createAndShow();"/>
    <!-- Text area to display the event information -->
    <mx:TextArea x="10" y="40" 
        width="200" height="100" 
        id="ta1"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

MenuBar のイベント

次の図に MenuBar コントロールを示します。

メニューバーの場合、次のようなイベントが発生します。

change 

（MenuEvent.CHANGE）ユーザーがキーボードやマウスで現在のメニューバー選択を変更したときに送出されます。また、このイベントはユーザーがポップアップサブメニューで現在のメニュー選択を変更したときにも送出されます。メニューバーでイベントが発生するとき、MenuEvent オブジェクトの menu プロパティは null です。

itemRollOut  

（MenuEvent.ITEM_ROLL_OUT）マウスポインタがメニューバーのアイテムから離れたときに送出されます。

itemRollOver 

（MenuEvent.ITEM_ROLL_OVER）マウスポインタがメニューバーアイテム上に置かれたときに送出されます。

menuHide 

（MenuEvent.MENU_HIDE）ポップアップサブメニューが閉じたときに送出されます。

menuShow 

（MenuEvent.MENU_SHOW）ポップアップサブメニューが開かれたとき、またはドロップダウンメニューを持たないメニューバーアイテムをユーザーが選択したときに送出されます。

MenuBar はポップアップサブメニューごとに、change、itemClick、itemRollOut、itemRollOver、menuShow、および menuHide 各イベントを Menu コントロールの場合と同様に送出します。ポップアップメニューによってトリガされるイベントは、Menu コントロールのイベントと同じように処理します。詳細については、Menu コントロールのイベントを参照してください。

次の例では、メニューバーおよびポップアップサブメニューのイベントを処理します。

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

            [Bindable]
            public var menuBarCollection:XMLListCollection;
    
            private var menubarXML:XMLList =<>
                <menuitem label="Menu1">
                    <menuitem label="MenuItem 1-A" data="1A"/>
                    <menuitem label="MenuItem 1-B" data="1B"/>
                </menuitem>
                <menuitem label="Menu2">
                    <menuitem label="MenuItem 2-A" data="2A"/>
                    <menuitem label="MenuItem 2-B" data="2B"/>
                </menuitem>
                <menuitem label="Menu3" data="M3"/>
                </>
                
            // Event handler to initialize the MenuBar control.
            private function initCollections():void {
                menuBarCollection = new XMLListCollection(menubarXML);
            }
            
            // Event handler for the MenuBar control's change event.
            private function changeHandler(event:MenuEvent):void  {
                // Only open the Alert for a selection in a pop-up submenu.
                // The MenuEvent.menu property is null for a change event 
                // dispatched by the menu bar.
                if (event.menu != null) {
                    Alert.show("Label: " + event.item.@label + "\n" + 
                        "Data: " + event.item.@data, "Clicked menu item");
                }                    
            }

            // Event handler for the MenuBar control's itemRollOver event.
            private function rollOverHandler(event:MenuEvent):void {
                rollOverTextArea.text = "type: " + event.type + "\n";
                rollOverTextArea.text += "target menuBarIndex: " + 
                    event.index + "\n";
            }           

            // Event handler for the MenuBar control's itemClick event.
            private function itemClickHandler(event:MenuEvent):void {
                itemClickTextArea.text = "type: " + event.type + "\n";
                itemClickTextArea.text += "target menuBarIndex: " + 
                    event.index + "\n";
            }           
        ]]>
    </mx:Script>

    <mx:Panel title="MenuBar Control Example" 
        height="75%" width="75%" 
        paddingTop="10" paddingLeft="10">

        <mx:Label 
            width="100%" 
            color="blue" 
            text="Select a menu item."/>
        <mx:MenuBar labelField="@label"  
            dataProvider="{menuBarCollection}"
            change="changeHandler(event);" 
            itemClick="itemClickHandler(event);" 
            itemRollOver="rollOverHandler(event);"/>        
        <mx:TextArea id="rollOverTextArea" 
            width="200" height="100"/>
        <mx:TextArea id="itemClickTextArea" 
            width="200" height="100"/>         
    </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

例：Menu コントロールのイベントの使用

次の例では、Menu コントロールのイベントを試すことができます。メニューを 2 つ表示することができ、1 つは XML をデータプロバイダとし、もう 1 つは配列をデータプロバイダとしています。TextArea コントロールは、ユーザーがメニューを開いたとき、マウスを動かしたとき、およびメニューアイテムを選択したときの各イベントの情報を表示します。XML ベースのメニューとオブジェクトベースのメニューを処理する場合の違いと、それぞれの Menu イベントについて取得できる情報のタイプの一部を示しています。

<?xml version="1.0"?>
<!-- menus/ExtendedMenuExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute">

    <mx:Script>
        <![CDATA[
    
        // Import the Menu control and MenuEvent class.
        import mx.controls.Menu;
        import mx.events.MenuEvent;
        //Define a variable for the Menu control.
        private var myMenu:Menu;

        // The event listener that creates menu with an XML data 
        // provider and adds event listeners for the menu.
        private function createAndShow():void {
            // Clear the event output display.
            ta1.text="";
            // Don't show the (single) XML root node in the menu.
            myMenu = Menu.createMenu(null, myMenuData, false);
            //You must set the labelField explicitly for XML data providers.
            myMenu.labelField="@label" 
            myMenu.addEventListener(MenuEvent.ITEM_CLICK, menuShowInfo);
            myMenu.addEventListener(MenuEvent.MENU_SHOW, menuShowInfo);
            myMenu.addEventListener(MenuEvent.MENU_HIDE, menuShowInfo);
            myMenu.addEventListener(MenuEvent.ITEM_ROLL_OUT, menuShowInfo);
            myMenu.addEventListener(MenuEvent.ITEM_ROLL_OVER,
                menuShowInfo);
            myMenu.show(225, 10);
        }

        // The event listener for the menu events.
        // Retain information on all events for a menu instance.
        private function menuShowInfo(event:MenuEvent):void {
            ta1.text="event.type: " + event.type;
            ta1.text+="\nevent.label: " + event.label;
            // The index value is -1 for menuShow and menuHide events.
            ta1.text+="\nevent.index: " + event.index;
            //The item field is null for show and hide events.
            if (event.item) {
                ta1.text+="\nItem label: " + event.item.@label
                ta1.text+="\nItem selected: " + event.item.@toggled;
                ta1.text+= "\nItem type: " + event.item.@type;
            }
        }

        // The event listener that creates an object-based menu 
        // and adds event listeners for the menu.
        private function createAndShow2():void {
            // Show the top (root) level objects in the menu.
            myMenu = Menu.createMenu(null, menuData, true);
            myMenu.addEventListener(MenuEvent.ITEM_CLICK, menuShowInfo2);
            myMenu.addEventListener(MenuEvent.MENU_SHOW, menuShowInfo2);
            // The following line is commented to so you can see the 
            // results of an ITEM_CLICK event. 
            // (The menu hides immediately after the click.)
            // myMenu.addEventListener(MenuEvent.MENU_HIDE, menuShowInfo2);
            myMenu.addEventListener(MenuEvent.ITEM_ROLL_OVER,
                menuShowInfo2);
            myMenu.addEventListener(MenuEvent.ITEM_ROLL_OUT,
                menuShowInfo2);
            myMenu.show(225, 10);
        }

        // The event listener for the object-based Menu events.
        private function menuShowInfo2(event:MenuEvent):void {
            ta1.text="event.type: " + event.type;
            ta1.text+="\nevent.label: " + event.label;
            // The index value is -1 for menuShow and menuHide events.
            ta1.text+="\nevent.index: " + event.index;
            // The item field is null for show and hide events.
            if (event.item) {
                ta1.text+="\nItem label: " + event.item.label
                ta1.text+="\nItem selected: " + event.item.toggled;
                ta1.text+= "\ntype: " + event.item.type;
            }
        }

        // The object-based data provider, an Array of objects.
        // Its contents is identical to that of the XML data provider.
        [Bindable] 
        public var menuData:Array = [
            {label: "MenuItem A", children: [
                {label: "SubMenuItem A-1", enabled: false},
                {label: "SubMenuItem A-2", type: "normal"} 
            ]},
            {label: "MenuItem B", type: "check", toggled: true},
            {label: "MenuItem C", type: "check", toggled: false},
                    {type: "separator"},
            {label: "MenuItem D", children: [
                {label: "SubMenuItem D-1", type: "radio", groupName: "g1"},
                {label: "SubMenuItem D-2", type: "radio", groupName: "g1",
                        toggled: true}, 
                {label: "SubMenuItem D-3", type: "radio", groupName: "g1"} 
            ]} 
        ];

    ]]>
    </mx:Script>

    <!-- The XML-based menu data provider. 
        The <mx:XML tag requires a single root. -->
    <mx:XML id="myMenuData">
            <xmlRoot>
            <menuitem label="MenuItem A" >
                <menuitem label="SubMenuItem A-1" enabled="false"/>
                <menuitem label="SubMenuItem A-2"/>
            </menuitem>
            <menuitem label="MenuItem B" type="check" toggled="true"/>
            <menuitem label="MenuItem C" type="check" toggled="false"/>
            <menuitem type="separator"/>     
            <menuitem label="MenuItem D" >
                <menuitem label="SubMenuItem D-1" type="radio" 
                    groupName="one"/>
                <menuitem label="SubMenuItem D-2" type="radio" 
                    groupName="one" toggled="true"/>
                <menuitem label="SubMenuItem D-3" type="radio" 
                    groupName="one"/>
            </menuitem>
            </xmlRoot>
    </mx:XML>

    <!-- Button controls to open the menus. -->
    <mx:Button x="10" y="5" 
        label="Open XML Popup" 
        click="createAndShow();"/>
    <mx:Button x="10" y="35" 
        label="Open Object Popup" 
        click="createAndShow2();"/>
    <!-- Text area to display the event information -->
    <mx:TextArea x="10" y="70" 
        width="200" height="300" 
        id="ta1"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

PopUpMenuButton コントロールのイベント

PopUpMenuButton は PopUpButton コントロールのサブクラスなので、PopUpButton コントロールのすべてのイベントを使用できます。ユーザーがメインボタンをクリックすると、PopUpMenuButton コントロールが click（MouseEventCLICK）イベントを送出します。

ユーザーが PopUpMenuButton メインボタンをクリックすると、選択したメニューアイテムの情報を含む itemClick（MenuEvent.ITEM_CLICK) イベントが、コントロールによって送出されます。そのため、メインボタンをクリックした場合と、ポップアップメニューから現在のアイテムを選択した場合では、同じ itemClick イベントが送出されます。どちらの場合でも同じイベントが送出されるため、メインボタンをクリックすると、最後に選択した menuItem をクリックしたときと同じビヘイビアが生成されます。そのため、メインボタンは頻繁に使用されるメニューアイテムの役割を果たします。

次の例は、PopUpMenuButton によるイベントの生成方法と、アプリケーションによるイベントの処理方法を示しています。

ユーザーがポップアップメニューからアイテムを選択すると、次のことが起こります。

• PopUpMenuButton によって itemClick イベントが送出されます。
• アプリケーションの itemClickHandler() イベントリスナー関数によって itemClick イベントが処理され、イベントの情報が Alert コントロールに表示されます。

ユーザーがメインボタンをクリックすると、次のことが起こります。

• PopUpMenuButton コントロールによって click イベントが送出されます。
• PopUpMenuButton コントロールによって itemClick イベントが送出されます。
• アプリケーションの itemClickHandler() イベントリスナー関数によって itemClick イベントが処理され、選択した Menu アイテムの情報が Alert コントロールに表示されます。
• アプリケーションの clickHandler() イベントリスナー関数によって MouseEvent.CLICK イベントも処理され、Button ラベルが Alert コントロールに表示されます。

<?xml version="1.0"?>
<!-- menus/PopUpMenuButtonEvents.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    height="600" width="600" 
    creationComplete="initData();">

    <mx:Script>
        <![CDATA[
        import mx.events.*;
        import mx.controls.*;
            
        // Set the Inbox (fourth) item in the menu as the button item.
        private function initData():void {
            Menu(p1.popUp).selectedIndex=3;
        }
            
        // itemClick event handler, invoked when you select from the menu.
        // Shows the event's label, index properties, and the values of the 
        // label and data fields of the data provider entry specified by 
        // the event's item property.
        public function itemClickHandler(event:MenuEvent):void {
            Alert.show("itemClick event label: " + event.label
                + "  \nindex: " + event.index
                + "  \nitem.label: " + event.item.label 
                + "  \nitem.data: " + event.item.data); 
        }
        
        //Click event handler for the main button.
        public function clickHandler(event:MouseEvent):void {
            Alert.show(" Click Event currentTarget.label: " 
                + event.currentTarget.label);
        }
            
        //The menu data provider
        [Bindable] 
        public var menuDP:Array = [
            {label: "Inbox", data: "inbox"},
            {label: "Calendar", data: "calendar"}, 
            {label: "Sent", data: "sent"},
            {label: "Deleted Items", data: "deleted"},
            {label: "Spam", data: "spam"}
        ];
    ]]></mx:Script>

    <mx:PopUpMenuButton  id="p1"
        showRoot="true"
        dataProvider="{menuDP}"
        click="clickHandler(event)"
        itemClick="itemClickHandler(event);"
    />
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。