DOM event precedence

What order of precedence are events handled in JavaScript?

Here are the events in alphabetical order...

  1. onabort - Loading of an image is interrupted
  2. onblur - An element loses focus
  3. onchange - The user changes the content of a field
  4. onclick - Mouse clicks an object
  5. ondblclick - Mouse double-clicks an object
  6. onerror - An error occurs when loading a document or an image
  7. onfocus - An element gets focus
  8. onkeydown - A keyboard key is pressed
  9. onkeypress - A keyboard key is pressed or held down
  10. onkeyup - A keyboard key is released
  11. onload - A page or an image is finished loading
  12. onmousedown - A mouse button is pressed
  13. onmousemove - The mouse is moved
  14. onmouseout - The mouse is moved off an element
  15. onmouseover - The mouse is moved over an element
  16. onmouseup - A mouse button is released
  17. onreset - The reset button is clicked
  18. onresize - A window or frame is resized
  19. onselect - Text is selected
  20. onsubmit - The submit button is clicked
  21. onunload - The user exits the page

What order are they handled out of the event queue?

The precedence is not first-in-first-out (FIFO) or so I believe.

Answers:

Answer

This was not, so far as i know, explicitly defined in the past. Different browsers are free to implement event ordering however they see fit. While most are close enough for all practical purposes, there have been and continue to be some odd edge cases where browsers differ somewhat (and, of course, the many more cases where certain browsers fail to send certain events at all).

That said, the HTML 5 draft recommendation does make an attempt to specify how events will be queued and dispatched - the event loop:

To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this section.

There must be at least one event loop per user agent, and at most one event loop per unit of related similar-origin browsing contexts.

An event loop has one or more task queues. A task queue is an ordered list of tasks [...] When a user agent is to queue a task, it must add the given task to one of the task queues of the relevant event loop. All the tasks from one particular task source must always be added to the same task queue, but tasks from different task sources may be placed in different task queues. [...]

[...]a user agent could have one task queue for mouse and key events (the user interaction task source), and another for everything else. The user agent could then give keyboard and mouse events preference over other tasks three quarters of the time, keeping the interface responsive but not starving other task queues, and never processing events from any one task source out of order. [...]

Note that last bit: it is up to the browser implementation to determine which events will be grouped together and processed in order, as well as the priority given to any particular type of event. Therefore, there's little reason to expect all browsers to dispatch all events in a fixed order, now or in the future.

Answer

For anyone wanting to know the sequence relative events get called in, see below. So far I have only tested in Chrome.

  1. mouseover
  2. mousemove
  3. mouseout

  1. mousedown
  2. change (on focused input)
  3. blur (on focused element)
  4. focus
  5. mouseup
  6. click
  7. dblclick

  1. keydown
  2. keypress
  3. keyup
Answer

If you're looking at mouse/touch events, Patrick H. Lauke has published a talk on the subject. Definitely an interesting read – and deals with all the quirks of different browsers, different devices and different standards.

He also bundles a comprehensive set of tests.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.