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)