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:

1// Generic event handler for the menu events 
2 
3function onMenuEvent(p_sType, p_aArgs) { 
4 
5    var oDOMEvent = p_aArgs[0]; 
6 
7    YAHOO.log(("Id: " + this.id + ", " + 
8               "Custom Event Type: " + p_sType + ", " +                   
9               "DOM Event Type: " + oDOMEvent.type),  
10               "info", "example10"); 
11} 
12 
13 
14// Generic event handler for the menu item events 
15 
16function onMenuItemEvent(p_sType, p_aArgs) { 
17 
18    var oDOMEvent = p_aArgs[0]; 
19 
20    YAHOO.log(("Index: " + this.index + ", " + 
21               "Group Index: " + this.groupIndex + ", " + 
22               "Custom Event Type: " + p_sType + ", " +                   
23               "DOM Event Type: " + oDOMEvent.type 
24               ), "info", "example10"); 
25     
26} 
27 
28/*
29     Instantiate the menu.  The first argument passed to the 
30     constructor is the id of the DOM element to be created for the 
31     menu; the second is an object literal representing a set of 
32     configuration properties for the menu.
33*/ 
34 
35var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true }); 
36 
37// Subscribe to the menu's events 
38 
39oMenu.itemAddedEvent.subscribe(function (p_sType, p_aArgs) { 
40 
41    var oMenuItem = p_aArgs[0]; 
42     
43    /*
44         Subscribe to each of the menu item's DOM events as each 
45         one is added to the menu.
46    */ 
47 
48    oMenuItem.mouseOverEvent.subscribe(onMenuItemEvent); 
49    oMenuItem.mouseOutEvent.subscribe(onMenuItemEvent); 
50    oMenuItem.mouseDownEvent.subscribe(onMenuItemEvent); 
51    oMenuItem.mouseUpEvent.subscribe(onMenuItemEvent); 
52    oMenuItem.clickEvent.subscribe(onMenuItemEvent); 
53    oMenuItem.keyDownEvent.subscribe(onMenuItemEvent); 
54    oMenuItem.keyUpEvent.subscribe(onMenuItemEvent); 
55    oMenuItem.keyPressEvent.subscribe(onMenuItemEvent);         
56 
57}); 
58 
59 
60oMenu.mouseOverEvent.subscribe(onMenuEvent); 
61oMenu.mouseOutEvent.subscribe(onMenuEvent); 
62oMenu.mouseDownEvent.subscribe(onMenuEvent); 
63oMenu.mouseUpEvent.subscribe(onMenuEvent); 
64oMenu.clickEvent.subscribe(onMenuEvent); 
65oMenu.keyDownEvent.subscribe(onMenuEvent); 
66oMenu.keyUpEvent.subscribe(onMenuEvent); 
67oMenu.keyPressEvent.subscribe(onMenuEvent); 
68 
69/*
70    Add items to the menu by passing an array of object literals 
71    (each of which represents a set of YAHOO.widget.MenuItem 
72    configuration properties) to the "addItems" method.
73*/ 
74 
75oMenu.addItems([ 
76 
77        "MenuItem 0", 
78 
79        "MenuItem 1", 
80 
81        /*
82             Add a disabled menu item to demonstrate that disabled 
83             items do not respond to DOM events.
84        */ 
85        { text: "MenuItem 2", disabled: true }, 
86 
87        "MenuItem 3", 
88 
89        "MenuItem 4" 
90 
91    ]); 
92 
93/*
94     Since this menu is built completely from script, call the "render" 
95     method passing in the id of the DOM element that the menu's 
96     root element should be appended to.
97*/ 
98 
99oMenu.render("rendertarget"); 
view plain | print | ?

YUI Logger Output:

Logger Console

INFO 0ms (+0) 10:38:49 AM: 
global: 
Logger initialized

More Menu Family Resources:

Copyright © 2007 Yahoo! Inc. All rights reserved.

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