This example shows how focus
and blur
events
can be paired with mouseover
and mouseout
events, to perform the same action for keyboard or mouse interaction.
The important principal here is equivalence not equality — events don't need to be paired quite as literally as this example. Context-menus, for example, are typically triggered by mouse right-click events, which have no direct keyboard equivalent, but a keyboard equivalent could be provided by triggering the menu from a separate button or link. It doesn't matter if the keyboard and mouse interactions for a particular task are completely different, as long as they achieve an equivalent end-result.
The image is below is wrapped in a link, which has keyboard and mouse events, to perform an image-swap in response to either:
The JavaScript code for this example can be found in: JS_C_A3.js