Get some focus: keyboard and mouse events

28 September 2009

When we add interactivity, we use event handling.  A common trap is to handle the events that are fired by the mouse but forget about what non-mouse users need.

Click

Click events are obviously fired from the mouse clicking on an item, but they are also fired when the user is focussed on an element and presses enter, so click events are covered for keyboard users as long as they can tab onto them in the first place.

When you click on something, a focus event is fired as well as the click event, after all you are focussing on something when you click on it.  If you are listening for the focus event and attaching functionality to it firing, remember that this functionality will also occur when you click on the attached elements.

Mouseout/mouseover

Mouseout and mouseover events rely on a mouse to trigger them

For mouseout events, pair them with blur events

• myelem.mouseout = function(){etc.} myelem.blur = myelem.mouseout;

• myelem.mouseover = function(){etc.} myelem.focus = myelem.mouseover;

See the code examples

(If you want to find out more about events, PPK has an excellent events write-up)