This content originally appeared on bitsofcode and was authored by Ire Aderinokun
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 -
| 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!
This content originally appeared on bitsofcode and was authored by Ire Aderinokun
Ire Aderinokun | Sciencx (2015-07-14T00:00:00+00:00) jQuery UI Events Cheatsheet. Retrieved from https://www.scien.cx/2015/07/14/jquery-ui-events-cheatsheet/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.