Javascript-форум - Events. addEventListener.

------------------------------------------------------------------------
Здравствуйте всем.
Пишу к Вам с просьбой наставить меня на путь истинный в мире программинга.
Я заплутал немного в понимании и нужен совет в решении одной из проблема.

Дано.
Фрагмент исходного когда.
Допустим это основное меню на сайте.

<html>
...
 <ul class="testing" id="pages">  
     <li id="page_01"><a href="#01">Page_01</a></li>
     <li id="page_02"><a href="#02">Page_02</a></li>
     <li id="page_03"><a href="#03">Page_03</a></li>
 </ul>  
...
</html>

Задача.
Необходимо определить, на каком пункте меню, в данный момент установлен курсор мышки.
То есть необходимо определить куда хочет кликнуть и перейти пользователь.
То есть определить id одного из трех <li>, над которым находится курсор мышки.

Мое решение.
В принципе получить id элемента несложно.
Я получал достаточно простым способом:

<html>
...
<script language='javascript'>
  function get_id(elem) 
  { 
    var object_id = elem.id; 
    alert(object_id);
  }
</script>
...
 <ul class="testing" id="pages">  
     <li id="page_01" onMouseOver="get_id(this)"><a href="#01">Page_01</a></li>
     <li id="page_02" onMouseOver="get_id(this)"><a href="#02">Page_02</a></li>
     <li id="page_03" onMouseOver="get_id(this)"><a href="#03">Page_03</a></li>
 </ul>  
...
</html>

Решение некроссбраузерное, проверял лишь в Opera 10.
Мне сейчас важно понять лишь ошибку мою или чего не хватает в коде.

Так вот. Верхний пример отлично определяет id того <li> над которым сейчас расположен курсор мышки.
Но как видно по примеру, запись совершенно нерациональная.
Допустим у нас будет 20 пунктов и для каждого пункта у нас по 3 обработчика - onMouseMove, onMouseOver и onMouseOut.
Естественно это получается мягко-говоря неправильно.

По-этому я решил сделать что-то вроде GlobalHook (Глобальный Хук/Перехват) всех событий в текущем документе.
Вышел следующий вариант примера:

<html>
...
<body>
...
 <ul class="testing" id="pages">  
     <li id="page_01"><a href="#01">Page_01</a></li>
     <li id="page_02"><a href="#02">Page_02</a></li>
     <li id="page_03"><a href="#03">Page_03</a></li>
 </ul>  
...
</body>

<script language='javascript'>
  var my_global_hook = function(e) 
  { 
    var object_id = e.srcElement.id; 
    alert(object_id);
  }
  document.addEventListener('mouseover', my_global_hook, false);
</script>

</html>

И вот тут я столкнулся с проблемой ...
Работает в Opera все правильно, как мне и надо, но только события отлавливаются не те, что мне нужны.
Как видно из примера, все теги <li> являются контейнерами для тегов ссылок <a>, то есть теги <li> являются родителями.
А события отлавливаются именно для ссылок <a>, а не для <li>, чьи id мне и нужны.
Таким образом, все события отлавливаются на максимальную "глубину" вложения элементов.

Вопрос.
Как мне получить id именно тегов <li> ?

---- ---- ---- ----
Примечания.
1. Организовать нужно без использования JQuery и XPath.
2. Убедительная просьба писать по существу.

---- ---- ---- ----
Всем спасибо большое.