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.

Tap UI Events Registered with mousemove

But when the mousemove event was removed, the other, previosuly unregistered, events show up -

Tap UI Events Registered without mousemove

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!