While creating the accessible multi-level dropdown navigation, I had to think a lot about which jQuery events were applicable for desktop vs mobile and mouse vs keyboard. I created a little cheatsheet for myself to reference, which turned out to be quite useful and so I thought I would share it.
THE UI EVENTS
The “UI” events I was looking to were events which invole the user interacting with an element. Here is an overview of the events -
THE UI EVENTS
The “UI” events I was looking to were events which invole the user interacting with an element. Here is an overview of the events -
| Event | Description |
|---|---|
| .focus | When an actionable element, e.g. a, input or button, gains focus |
| .blur | When an actionable element loses focus |
| .focusin | When an actionable element, or its children, gains focus |
| .focusout | When an actionable element, or its children, loses focus |
| .click | When an element is clicked |
| .dblclick | When an element is double-clicked |
| .mousedown | When a pointer presses on an element |
| .mouseup | When a pointer releases press on an element |
| .mouseenter | When a pointer enters the area of an element |
| .mouseleave | When a pointer leaves the area of an element |
| .mousemove | When a pointer moves within the area of an element |
| .mouseout | When a pointer is registered outside the area of an element after previously being registered within it |
| .mouseover | When a pointer enters the area of an element |
| .hover | A shorthand for both .mouseenter and .mouseleave events |
| .keydown | When a key is pressed while on an element |
| .keyup | When a key is released while on an element |
| .keypress | When a key (not including modifier and non-printing keys such as Esc) is pressed while on an element |
RESPONDING USER INTERACTIONS
The way these events are organised in the jQuery documentation can be a bit confusing. For example, the only events listed under keyboard events are .keydown, .keyup, and .keypress. However, other events can also be triggered by the keyboard.
Here is a list of the UI events and which types of user interaction each can be triggered by -
| Event | Mouse? | Keyboard? | Screen Tap? |
|---|---|---|---|
| .focus | ✓ | ✓ | ✗ |
| .blur | ✓ | ✓ | ✗ |
| .focusin | ✓ | ✓ | ✗ |
| .focusout | ✓ | ✓ | ✗ |
| .click | ✓ | ✓ | ✓ |
| .dblclick | ✓ | ✗ | ✗ |
| .mousedown | ✓ | ✗ | ✓ |
| .mouseup | ✓ | ✗ | ✓ |
| .mouseenter | ✓ | ✗ | ✓ |
| .mouseleave | ✓ | ✗ | ✓ |
| .mousemove | ✓ | ✗ | ✓ |
| .mouseout | ✓ | ✗ | ✓ |
| .mouseover | ✓ | ✗ | ✓ |
| .keydown | ✗ | ✓ | ✗ |
| .keyup | ✗ | ✓ | ✗ |
| .keypress | ✗ | ✓ | ✗ |
SCREEN TAP INTERACTIONS
Screen taps are treated very similarly to clicks. Each screen tap is almost like each time the mouse moves on screen. This is why a doubleclick cannot be registered through tapping. However, because of this, we can get some events blocking the registering of other events.
As a test, I chained all the events which can be triggered by a screen tap. When each event is registered, it is appended to a list on screen.
$('.test').on('click mousedown mouseup mouseenter mouseleave mousemove mouseout mouseover',
function(event) {
$('#output').append('<li>'+event.type+'</li>');
return false;
})
When chaining all the events, the click, mousedown, and mouseup events are never registered.
But when the mousemove event was removed, the other, previosuly unregistered, events show up -
KEYBOARD INTERACTIONS
When dealing with keyboard interactions, which key pressed becomes pertinent. Some events are triggered by the pressing of a particular key, while, with others, you can access the particular key that was pressed.
Event Which Key? .focus tab key released while on target element.blur tab key pressed while on target element.focusin tab key released while on target element or its children.focusout tab key pressed while on target element or its children.click return key pressed while on target element.keydown any key pressed while on target element .keyup any key released while on target element .keypress any key (not including modifier keys) pressed while on target element
For the events which respond to any key, we can find out which key was pressed simply -
$('.element').on('keydown keyup keypress', function(e) {
// log the code of the key pressed to the console
console.log(e.keyCode);
if ( e.keyCode === 9 ) {
// tab key pressed
}
if ( e.keyCode === 13 ) {
// return key pressed
}
})
These are some of the nuances that it helps to be aware of when chaining multiple events and targetting different interactions. I hope you find this useful!