Get some focus: keyboard and mouse events

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 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 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;

For mouseover events, pair them with focus events but remember they will trigger on mouse click as well as mouseover

  • 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)

One thought on “Get some focus: keyboard and mouse events

  1. Pingback: Interface Developer’s quality checklist « Dawn Budge

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>