blur and focus

Test page.

Events overview page.

The focus and blur events keep track of the elements the user focuses on.

focus
Fires when a focusable element gains the focus
blur
Fires when a focusable element loses the focus
focusin and focusout
Fire at the same time as focus and blur, but bubble.

That sounds simple, but it isn’t.

The reason focus and blur don’t bubble is that the events mean something quite different on the window and on any other focusable element. These two definitions should not be confused, and therefore the events cannot be allowed to bubble up to the document.

The following elements are focusable:

I did not do these tests on the document; the permutations are hideously complicated and no one in his right mind would set focus or blur events on the document in any case.

Test IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 7.0 Win FF 6.1 Mac Saf 5.1 Win Saf 5.1 Mac Chrome 14 Win Chrome 13 Mac Opera 11.51 Win Opera 11.51 Mac
Window
If the user brings a browser window forward (by clicking on it, using Alt+Tab or manipulating the taskbar), a focus event on the window fires. Likewise, if the browser window is sent backwards, a blur event fires.
Yes Almost Too many Yes Yes Yes
  • Firefox fires two focus and blur events when the events are registered in the capturing phase.
  • Safari Windows fires two focus events.
  • Opera also fires focusin/out.
Links
Focus and blur events on links should always fire, regardless of whether the user uses the mouse or the keyboard.
Yes Yes No Incomplete Yes
  • Chrome doesn’t support this when the user uses a mouse.
  • Safari doesn’t support this at all. Using the keyboard to focus on a link is impossible, and a mouse-focus doesn’t trigger the event Nasty for accessibility.
Form fields
Focus and blur events on form fields should always fire, regardless of whether the user uses the mouse or the keyboard.
Yes Yes Incomplete Incomplete Incomplete Yes
  • Firefox Mac and Safari and Chrome do not fire the events on radios and checkboxes if the user uses a mouse.
Test IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 7.0 Win FF 6.1 Mac Saf 5.1 Win Saf 5.1 Mac Chrome 14 Win Chrome 13 Mac Opera 11.51 Win Opera 11.51 Mac
Elements with tabindex
By giving it a tabindex you can make any element you like focusable. The focus and blur events should work on such elements.
Yes Yes Yes Yes Yes
Window + focusable element
If the window is sent backward while a focusable element is focused, blur events should fire on both. If the window is brought forward again, focus events should fire on both.
Not tested Too many Yes Yes Too many Yes Yes Incomplete
  • IE and Safari don’t fire focusin and focusout
  • Safari Windows fires two focus events.
  • Opera fires only on the window.
Event capturing
Focus and blur events don’t bubble. but they should be captured from the window on downward.
Untestable Yes Yes Yes Yes Yes
focusin and focusout
Same as focus and blur, but bubble.
No Yes No Incomplete Incomplete Yes
  • Safari and Chrome fire these events only with addEventListener; not with traditional registration.
Test IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 7.0 Win FF 6.1 Mac Saf 5.1 Win Saf 5.1 Mac Chrome 14 Win Chrome 13 Mac Opera 11.51 Win Opera 11.51 Mac