User interaction with a FlexNativeMenu is event-driven. When the user selects a menu item or opens a menu or submenu, the menu dispatches an event. You can register event listeners to define the actions that are carried out in response to the user's selection. Event handling with the FlexNativeMenu component shares similarities with other Flex menu components, but also has key differences. For information about Flex menu component events, see Menu-based control events. For detailed information on events and how to use them, see Using Events.

The FlexNativeMenu component defines two specific events, both of which dispatch event objects that are instances of the FlexNativeMenuEvent class:

The event object passed to the event listener is of type FlexNativeMenuEvent and contains the following menu-specific properties:

To access properties of an object-based menu item, you specify the item property of the event object, as follows:

ta1.text = event.item.extraData;

To access attributes of an E4X XML-based menu item, you specify the menu item attribute name in E4X syntax, as follows:

ta1.text = event.item.@extraData;

The standard approach to handling FlexNativeMenu events is to register an event listener with the FlexNativeMenu component. Any time an individual menu item is selected or submenu is opened, the FlexNativeMenu dispatches the appropriate event. Your listener code can use the event object's item property or other properties to determine on which menu item the interaction occurred, and perform actions in response.

The following example lets you experiment with FlexNativeMenu control events. It lets you display two menus, one with an XML data provider and one with an Array data provider. A TextArea control displays information about each event as a user opens the menus, opens submenus, and selects menu items. The example shows some of the differences in how you handle XML and object-based menus. It also indicates some of the types of information that are available about each FlexNativeMenu event.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute">
    
    <mx:Script>
        <![CDATA[
            import mx.events.FlexNativeMenuEvent;

            import mx.controls.FlexNativeMenu;
            import mx.events.FlexNativeMenuEvent;

            // The event listener that opens the menu with an XML data 
            // provider and adds event listeners for the menu.
            private function createAndShow():void
            {
                ta1.text="";
                xmlBasedMenu.addEventListener(FlexNativeMenuEvent.ITEM_CLICK, menuShowInfo);
                xmlBasedMenu.addEventListener(FlexNativeMenuEvent.MENU_SHOW, menuShowInfo);
                xmlBasedMenu.display(stage, 225, 10);
            }

            // The event listener for the xml-based menu events.
            // Retain information on all events for a menu instance.
            private function menuShowInfo(event:FlexNativeMenuEvent):void
            {
                ta1.text = "event.type: " + event.type;
                
                // The label field is null for menuShow events.
                ta1.text += "\nevent.label: " + event.label;
                
                // The index value is -1 for menuShow events.
                ta1.text+="\nevent.index: " + event.index;
                
                // The item field is null for menuShow events.
                if (event.item != null)
                {
                    ta1.text += "\nItem label: " + event.item.@label
                    ta1.text += "\nItem toggled: " + 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
            {
                ta1.text="";
                objectBasedMenu.addEventListener(FlexNativeMenuEvent.ITEM_CLICK, menuShowInfo2);
                objectBasedMenu.addEventListener(FlexNativeMenuEvent.MENU_SHOW, menuShowInfo2);
                objectBasedMenu.display(stage, 225, 10);
            }

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

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

        ]]>
    </mx:Script>

    <!-- The XML-based menu data provider. 
    The <mx:XML tag requires a single root. -->
    <mx:XML id="xmlMenuData">
        <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"/>
                <menuitem label="SubMenuItem D-2"/>
                <menuitem label="SubMenuItem D-3"/>
            </menuitem>
        </xmlRoot>
    </mx:XML>
    
    <mx:FlexNativeMenu id="xmlBasedMenu" 
        showRoot="false" 
        labelField="@label" 
        dataProvider="{xmlMenuData}"/>
        
    <mx:FlexNativeMenu id="objectBasedMenu" 
        dataProvider="{objMenuData}"/>

    <!-- 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="250" 
        id="ta1"/>
</mx:WindowedApplication>