Browser bug - focus and blur do not bubble up

This is a bug in all browsers but Mozilla.

The focus event does not bubble up to ancestor elements of the element it took place on.

In general, events bubble up to the ancestors of the element they took place on. So if you click on a link, the click event takes place on that link and on any ancestor until it reaches the document itself. That's why document.onclick = doSomething; ensures that the function doSomething() is called whenever the user clicks anywhere in the document.

This behaviour, though, does not occur with the focus and blur events, except in Mozilla.

Test

Try it. I defined an onfocus event handler for the div these three links are in. When you focus on the link (either by keyboard navigation or by simply clicking on them) the event handler does not fire, which means that the event does not bubble up to the div.

(In Opera, use Q and A to move through the links in the document)

Link 1
Link 2
Link 3