Events - blur and focus

blur and focus

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:

The window. The focus is gained when the user brings the window forward, and lost when the user sends it back.
Links, whether the user uses a keyboard or a mouse.
Form fields, whether the user uses a keyboard or a mouse.
Elements with tabindex, whether the user uses a keyboard or a mouse.

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
focusin and focusout Same as focus and blur, but bubble.	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