Problem with events

[S7even]

I believe this should be an easy one.

I have 2 positioned layers one on top of the other.
I want an event to take place when the mouse is over the bottom layer, even if that means that the mouse will be over the top layer also.
If i use something like:

<div id="bottom" onmouseover="al()">This is my bottom div</div>

It works without a problem.
But if i remove the inline event handler, and i try to capture the event in a script in the head of my document, it doesn't work anymore. It works only if the mouse is DIRECTLY ontop of the bottom div, but if the top div is "between" the bottom div and the mouse pointer it doesn't work.
Here are the examples:
http://64.247.55.97/eventsproblem1.html this works
http://64.247.55.97/eventsproblem2.html doesn't work

In the second page, to activate the event you have to point directly on the bottom div (yellow area), otherwise it doesn't work.

[Cam]

I'm not sure why, I have an idea but tried typing it and it didn't work so I found this link that might help.

[MikeFoster]

The first example works because "top" is a child element of "bottom" and so its events bubble up to its parent.

The second example is different because you're adding the event listener to document.

[S7even]

In the second example the top is also a child element of bottom.

What is the solution in this case if i don't want to have the event handler inline?

[MikeFoster]

The following are simplified versions (no nn4 support) of two functions from one of my libraries.

function xAddEventListener(ele,eventType,eventListener,useCapture) {
  eventType=eventType.toLowerCase();
  var eh="ele.on"+eventType+"=eventListener";
  if(ele.addEventListener) ele.addEventListener(eventType,eventListener,useCapture);
  else if(ele.attachEvent) ele.attachEvent("on"+eventType,eventListener);
  else if(ele.captureEvents) {
    if(useCapture||(eventType.indexOf('mousemove')!=-1)) {
      ele.captureEvents(eval("Event."+eventType.toUpperCase()));
    }
    eval(eh);
  }
  else eval(eh);
}

function xGetElementById(e) {
  if(document.getElementById) e=document.getElementById(e);
  else if(document.all) e=document.all[e];
  else e=null;
  return e;
}

Now, you can do something like this:

window.onload = function() {
  var eBottom = xGetElementById('bottom');
  xAddEventListener(eBottom, 'mouseover', mouseoverListener, false);
}

function mouseoverListener(e) {
  // ...
}

Now mouseover events on 'top' will bubble up to 'bottom' (in browsers that support bubbling).

[S7even]

hmm .. looks kinda complicated, i will need some time to digest it

I noticed that "eBottom" is static in the function.

What I want is to have it dynamic, so that certain elements will react to the mouseover depending on their class name or something similar.