jQuery UI Events Cheatsheet

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!