Sunday, 26 July 2015

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 -

EventDescription
.focusWhen an actionable element, e.g. ainput or button, gains focus
.blurWhen an actionable element loses focus
.focusinWhen an actionable element, or its children, gains focus
.focusoutWhen an actionable element, or its children, loses focus
.clickWhen an element is clicked
.dblclickWhen an element is double-clicked
.mousedownWhen a pointer presses on an element
.mouseupWhen a pointer releases press on an element
.mouseenterWhen a pointer enters the area of an element
.mouseleaveWhen a pointer leaves the area of an element
.mousemoveWhen a pointer moves within the area of an element
.mouseoutWhen a pointer is registered outside the area of an element after previously being registered within it
.mouseoverWhen a pointer enters the area of an element
.hoverA shorthand for both .mouseenter and .mouseleave events
.keydownWhen a key is pressed while on an element
.keyupWhen a key is released while on an element
.keypressWhen 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 -

EventMouse?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 clickmousedown, 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.
EventWhich Key?
.focustab key released while on target element
.blurtab key pressed while on target element
.focusintab key released while on target element or its children
.focusouttab key pressed while on target element or its children
.clickreturn key pressed while on target element
.keydownany key pressed while on target element
.keyupany key released while on target element
.keypressany 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!

No comments:

Post a Comment