Delegating the focus and blur events - example

This is a quick example of delegating the focus and blur events. I haven't bothered to write a dropdown menu; this is just a proof of concept.

Try accessing the menu by mouse and keyboard: all events are defined and handled on the top <ol>.

  1. List item 1
    1. List item 1.1
    2. List item 1.2
    3. List item 1.3
  2. List item 2
    1. List item 2.1
    2. List item 2.2
    3. List item 2.3
  3. List item 3
    1. List item 3.1
    2. List item 3.2
    3. List item 3.3

Events:

function init() {
	var el = $('test');

	// all browsers
	el.onmouseover = handleEvent;
	el.onmouseout = handleEvent;

	// IE
	el.onfocusin = handleEvent;
	el.onfocusout = handleEvent;

	// FF, Saf, Op
	if (el.addEventListener) {
		el.addEventListener('focus',handleEvent,true);
		el.addEventListener('blur',handleEvent,true);
	}
}