Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
|
Javascript General Javascript discussions.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old February 25th, 2007, 09:32 AM
Registered User
 
Join Date: Feb 2007
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default The different ways to assgn an event handler

Hi all,


I'm trying to create a cascade menu in javascript,
and I'm working on a simple example.

I wrote the following <UL> list :

 <ul id="menu" >
 <li id="liaccueil">Accueil</li>
 <li id="liarticles"> Articles
     <ul id="luarticles">
     <li id="licss">CSS</li>
     <li id="lijavascript">JavaScript</li>
     <li id="liphp">PHP</li>
     </ul>
 </li>
 <li id="litelechargement"> Téléchargement
     <ul id="lutele">
     <li id="lilogiciels">Logiciels</li>
     <li id="limusique">Musique</li>
     <li id="lifilms">Films</li>
     </ul>
 </li>
 <li id="licontact"> contact
     <ul id="ulcontact">
     <li id="lijeremie"> Jeremie
         <ul id="uljeremie"> <li id="limail">Mail</li>
         <li id="liwebjere">Site Web</li>
         </ul>
     </li>
     <li id="livirginie"> Virginie
         <ul id="ulvirginie">
         <li id="limailvir">Mail</li>
         <li id="liwebvir">Site Web</li>
         </ul>
     </li>
     <li id="liagathe"> Agathe
         <ul id="ulagathe">
         <li id="limailaga">Mail</li>
         <li id="liwebaga">Site Web</li>
         </ul>
     </li>
     </ul>
</li>
</ul>

For event handlers :

function hover(evt){
    var target;
    var event = evt || window.event;

    if(event.target) target = event.target;
    else target = event.srcElement;

    var currentTarget = event.currentTarget ? event.currentTarget.tagName : 'tag unknown';
    var currentTargetId = event.currentTarget ? event.currentTarget.id : 'id unknown';

    log('log',' ['+ event.type +'] [target] '+ target.tagName + ' id=' + target.id +
    ' [curTarget] '+currentTarget + ' id=' + currentTargetId);

    var obj = target;
   UL = obj.getElementsByTagName('ul');
   if(UL.length > 0){
        sousMenu = UL[0].style;
         if(sousMenu .display == 'none' || sousMenu.display == ''){
            sousMenu.display = 'block';
        logln('log','display sub menu');
        }
         else{
            sousMenu.display = 'none';
        logln('log','hide sub menu');
         }
    }
 }
 function setHover(){
          LI = document.getElementById('menu').getElementsByTagNa me('li');
          nLI = LI.length;
          for(i=0; i < nLI; i++){
              LI[ i ].onmouseover = hover;
              LI[ i ].onmouseout = hover;
         }
}


This method does not work; When the mouse goes over the menu, the correspondong sub menu
is well displayed; But when the mouse goes over the sub menu, this latter disappears.
Here is the logs which show the events that occured :

-> following event generated when the mouse goes over the main menu
[mouseover] [target] LI id=licontact [curTarget] LI id=licontact >affiche sous menu
-> following events generated when the mouse moves to the sub menu
[mouseout] [target] LI id=licontact [curTarget] LI id=licontact >cache sous menu
[mouseover] [target] UL id=ulcontact [curTarget] LI id=licontact >affiche sous menu
[mouseout] [target] UL id=ulcontact [curTarget] LI id=licontact >cache sous menu

The same result occurs for Firefox 2 ou IE 6/7.
It looks like as if the mouseover on the LI element of the sub menu is not generated.

Then I tried a second solution, and I assigned the handler in a different way :

  function setHover(){
          LI = document.getElementById('menu').getElementsByTagNa me('li');

          nLI = LI.length;
          for(i=0; i < nLI; i++){
              LI[ i ].onmouseover = function(){ hover(this,'over'); }
              LI[ i ].onmouseout = function(){ hover(this,'out'); }
          }
      }

This works now. Here the logs :

-> following event generated when the mouse goes over the main menu
[over] [target] LI id=licontact [curTarget] tag unknown id=id unknown affiche sous menu
-> following events generated when the mouse moves to the sub menu
[out] [target] LI id=licontact [curTarget] tag unknown id=id unknown cache sous menu
[over] [target] LI id=licontact [curTarget] tag unknown id=id unknown affiche sous menu
[out] [target] LI id=licontact [curTarget] tag unknown id=id unknown cache sous menu
[over] [target] LI id=lijeremie [curTarget] tag unknown id=id unknown affiche sous menu
[over] [target] LI id=licontact [curTarget] tag unknown id=id unknown affiche sous menu

The event flow changed, and the only difference is the way to assign the handlers!
This time, the mouseover is well generated for the sub menu LI element.

The inconvenient of this method is that I didn't have access to the event (except for IE)

Do you have any idea of what happens here ?
thanks







Similar Threads
Thread Thread Starter Forum Replies Last Post
HOW TO ADD AN EVENT HANDLER pallone .NET Framework 2.0 10 September 16th, 2008 12:28 PM
Event handler samir_katore Pro VB 6 6 June 8th, 2006 01:22 PM
Event handler problem carro123 Javascript How-To 1 May 20th, 2005 03:30 PM
PreDefined Event Handler mark C# 1 June 7th, 2003 04:47 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.