Event Handlers

Only use onchange rarely and don’t alert users of format errors until time for submission. For example, you may want to use it for slight formatting changes of input data. If a user has typed in (555)555-1212 for a phone number format instead of the requested format, you could change it to 555-555-1212 safely without alerting the user. However, since this type of data manipulation could easily be done at the time of submission or on the server-side, it may still be a good idea not to use onchange.

Keyboard events

1. onfocus and onblur

   The onmouseover and onmouseout events are most commonly used with image rollovers. While adding the onfocus and onblur events for rollovers is not necessary for screen reader accessibility, it can add usability benefits for sighted users accessing your site with a keyboard. For example, although a mobility-impaired user may not need to see a rollover, he could still benefit from the visual feedback of the effect.

   You may also wish to consider using CSS for rollover effects. The CSS image replacement techniques are not fully accessible (and probably won’t be until CSS3 generated content is widely supported), but for text effects it is more than adequate.

   a:link { /* normal state */ }
a:visited { /* visited state */ }
a:hover, a:active, a:focus { /* rollover state */ }


   The :active and :focus psuedo-classes mimic the :hover state for keyboard events. Ideally, :active would mimic an onmousedown or onkeydown event, but Internet Explorer incorrectly treats this as :focus so we double-up the psuedo-classes to get a consistent effect across multiple browsers.

   See an example of CSS rollovers versus JavaScript rollovers.

   Because newer browsers (like Mozilla) can implement :hover on arbitrary elements (not just links), you may want to double-up your pseudo-classes. Combining :hover with :link and :visited can ensure the special effects won’t appear on non-link anchors.

   a:link { /* normal state */ }
a:visited { /* visited state */ }
a:link:hover, a:visited:hover, a:active, a:focus { /* rollover state */ }

2. onkeydown and onkeyup

   In a few DHTML cases, these events may need to be used instead of onkeypress. For example, the arrow keys do not consistently activate the the onkeypress event, but they usually do activate the onkeydown and onkeyup events.

   However knowing that many users do not have arrow keys (laptops for example), consider rethinking your need for these keys if the functionality provides a essential information. Also consider how difficult it may be to use this type of interface with a screen reader.

3. onkeypress

   Most browsers activate the onclick event when a user presses the Enter key, however certain browsers do not. To ensure full support, you may wish to use the onkeypress event.

   You could use this example HTML code:

   <input
  type="button"
  onclick="foo();"
  onkeypress="verifyKey(this,event);"
  />

   With this JavaScript function:

   // With onkeypress event, this verifies “Enter” key
function verifyKey(oElement,oEvent){
  if(oEvent.keyCode==13 && oElement.onclick){
    oElement.onclick();
  }
}

   Note: The verify key function is usually not necessary, but it was written to account for an bug in some older versions of Mozilla. The bug has been fixed in the latest releases, but it previously activated the onkeypress event when a user hit the Tab key, making it impossible to tab past the link without activating the event.