Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: Menu Family: Listening For Menu Events

# Menu Family: Listening For Menu Events

This example demonstrates how to listen for DOM-related events. Interaction with the Menu will result in event information being output to the console. Please note: Disabled MenuItem instances do not fire DOM events. This is demonstrated with the MenuItem named "MenuItem 2."

Note: By default clicking outside of a menu will hide it. Additionally, menu items without a submenu or a URL to navigate will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.

View example in new window.

## 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 Logger Output:

### Menu Family Examples:

- Basic Menu From Markup
- Basic Menu From JavaScript
- Grouped Menu Items Using Markup
- Grouped Menu Items Using JavaScript
- Grouped Menu Items With Titles From Markup
- Grouped Menu Items With Titles From JavaScript
- Multi-tiered Menu From Markup
- Multi-tiered Menu From JavaScript
- Handling Menu Click Events
- Listening For Menu Events
- MenuItem Configuration Properties
- Setting Menu Configuration Properties At Runtime
- Website Left Nav With Submenus Built From Markup
- Website Left Nav With Submenus From JavaScript
- Website Top Nav With Submenus Built From Markup
- Website Top Nav With Submenus From JavaScript
- Website Left Nav Using Animation With Submenus Built From Markup
- Website Left Nav Using Animation With Submenus From JavaScript
- Website Top Nav Using Animation With Submenus Built From Markup
- Website Top Nav Using Animation With Submenus From JavaScript
- Context Menu
- Adding A Context Menu To A Table
- Adding A Context Menu To A TreeView
- OS-Style Programs Menu
- Application Menubar
- Context Menu Integration (included with examples for DataTable Control (beta))
- Menu Buttons (included with examples for Button Control (beta))
- Split Buttons (included with examples for Button Control (beta))

### More Menu Family Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2007 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings