GUI Components JavaScript DHTML

        "http://www.w3.org/TR/html4/strict.dtd">

    
        
        Example 10: Listening For DOM-Related Events
        
        
        
        
        
        
        
 
        
        
            body { margin:.5em; }
            p em {
            
                text-decoration:underline;
            
            }
            #logs {
                position:absolute;
                bottom:0;
                right:0;
            
            }
            .example10 {
                background-color:#9c9;
            
            }
        
        
        
        
        
        
        
            
        
        
        
        
        
        
        
        
        
        
            // "load" event handler for the window
            YAHOO.example.onWindowLoad = function(p_oEvent) {
                // Generic event handler for the Menu instance's DOM-related events
                
                function onMenuEvent(p_sType, p_aArguments) {
                
                    var oDOMEvent = p_aArguments[0];
    
                    YAHOO.log(
                        (
                        "Id: " + this.id + ", " +
                        "Custom Event Type: " + p_sType + ", " +                  
                        "DOM Event Type: " + oDOMEvent.type
                        ),
                        "info",
                        "example10"
                    );
                }
    
    
                /*
                    Generic event handler for each MenuItem instance's 
                    DOM-related events
                */
    
                function onMenuItemEvent(p_sType, p_aArguments) {
    
                    var oDOMEvent = p_aArguments[0];
    
                    YAHOO.log(
                        (
                        "Index: " + this.index + ", " +
                        "Group Index: " + this.groupIndex + ", " +
                        "Custom Event Type: " + p_sType + ", " +                  
                        "DOM Event Type: " + oDOMEvent.type
                        ),
                        "info",
                        "example10"
                    );
                    
                }
                // Create a menu
                var oMenu = new YAHOO.widget.Menu("basicmenu"),
                    // Create the MenuItem instances and add them to the menu
                    aMenuItemData = [
                
                        "MenuItem 0",
                        "MenuItem 1",
                        "MenuItem 2",
                        "MenuItem 3",
                        "MenuItem 4"
                    ],
                    nMenuItems = aMenuItemData.length,
                    oMenuItem;
                
                for(var i=0; i                    oMenuItem = oMenu.addItem(aMenuItemData[i]);
                    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.render(document.body);
    
                oMenu.show();
                // Focus the first MenuItem instance
                oMenu.getItem(0).focus();
                
                // Disable the third MenuItem instance
                oMenu.getItem(2).cfg.setProperty("disabled", true);
                // Subscribe to the menu's DOM-related events
                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);
                var oLogs = document.createElement("div");
                oLogs.id = "logs";
                
                document.body.appendChild(oLogs);
                var oLogReader = new YAHOO.widget.LogReader("logs");
            }
            YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
            
        
        
    
    
        

Example 10: Listening For DOM-Related 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."


    

           
         
  
yui.zip( 3,714 k)