YUI Library Examples: Menu Family: Listening For Menu Events

Adding DOM-based event handlers to Menu and MenuItem instances.

All of the DOM events for Menu and MenuItem are implemented as instances of Custom Event (YAHOO.util.CustomEvent). Therefore, always listen for DOM-based events via the provided Custom Event-based interface rather than attaching handlers directly to a Menu's DOM elements.

Add event listeners through the event's subscribe method; For example:

// Generic event handler for the menu events

function onMenuEvent(p_sType, p_aArgs) {

var oDOMEvent = p_aArgs[0];

YAHOO.log(("Id: " + this.id + ", " +
               "Custom Event Type: " + p_sType + ", " +                  
               "DOM Event Type: " + oDOMEvent.type), 
               "info", "example10");
}

// Generic event handler for the menu item events

function onMenuItemEvent(p_sType, p_aArgs) {

var oDOMEvent = p_aArgs[0];

YAHOO.log(("Index: " + this.index + ", " +
               "Group Index: " + this.groupIndex + ", " +
               "Custom Event Type: " + p_sType + ", " +                  
               "DOM Event Type: " + oDOMEvent.type
               ), "info", "example10");
    
}

/*
     Instantiate the menu.  The first argument passed to the 
     constructor is the id of the DOM element to be created for the 
     menu; the second is an object literal representing a set of 
     configuration properties for the menu.
*/

var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });

// Subscribe to the menu's events

oMenu.itemAddedEvent.subscribe(function (p_sType, p_aArgs) {

var oMenuItem = p_aArgs[0];
    
    /*
         Subscribe to each of the menu item's DOM events as each 
         one is added to the menu.
    */

oMenuItem.mouseOverEvent.subscribe(onMenuItemEvent);
    oMenuItem.mouseOutEvent.subscribe(onMenuItemEvent);
    oMenuItem.mouseDownEvent.subscribe(onMenuItemEvent);
    oMenuItem.mouseUpEvent.subscribe(onMenuItemEvent);
    oMenuItem.clickEvent.subscribe(onMenuItemEvent);
    oMenuItem.keyDownEvent.subscribe(onMenuItemEvent);
    oMenuItem.keyUpEvent.subscribe(onMenuItemEvent);
    oMenuItem.keyPressEvent.subscribe(onMenuItemEvent);

});

oMenu.mouseOverEvent.subscribe(onMenuEvent);
oMenu.mouseOutEvent.subscribe(onMenuEvent);
oMenu.mouseDownEvent.subscribe(onMenuEvent);
oMenu.mouseUpEvent.subscribe(onMenuEvent);
oMenu.clickEvent.subscribe(onMenuEvent);
oMenu.keyDownEvent.subscribe(onMenuEvent);
oMenu.keyUpEvent.subscribe(onMenuEvent);
oMenu.keyPressEvent.subscribe(onMenuEvent);

/*
    Add items to the menu by passing an array of object literals 
    (each of which represents a set of YAHOO.widget.MenuItem 
    configuration properties) to the "addItems" method.
*/

oMenu.addItems([

"MenuItem 0",

"MenuItem 1",

/*
             Add a disabled menu item to demonstrate that disabled 
             items do not respond to DOM events.
        */
        { text: "MenuItem 2", disabled: true },

"MenuItem 3",

"MenuItem 4"

]);

/*
     Since this menu is built completely from script, call the "render" 
     method passing in the id of the DOM element that the menu's 
     root element should be appended to.
*/

oMenu.render("rendertarget");

YUI Library Examples: Menu Family: Listening For Menu Events

Adding DOM-based event handlers to Menu and MenuItem instances.

YUI Logger Output:

Menu Family Examples:

More Menu Family Resources: