DOM event precedence

Question

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.

Tanganyika

Dont forget these key events: ondragstart, ondragover,ondragend,ondblclick, oncontextmenu – Crabber

Answer 1

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.

Marivelmariya

Answer 2

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

Vaccinate

If I trigger click event, do I also trigger the previous events (mousedown, change, blur, focus, mouseup)? – Ringlet

where does dragstart fit in here? – Crabber

Answer 3

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.

Wallin

Answer 4

Here is demo for a number of events:

<input  onclick="console.log('onclick - Mouse clicks an object')" 
     ondblclick="console.log('ondblclick - Mouse double-clicks an object')"
    onmousedown="console.log('onmousedown - A mouse button is pressed')"
      onmouseup="console.log('onmouseup - A mouse button is released')"
    onmousemove="console.log('onmousemove - The mouse is moved')"
   onmouseenter="console.log('onmousenter - The mouse is moved over an element (not bubbling)')"
    onmouseover="console.log('onmouseover - The mouse is moved over an element')"
     onmouseout="console.log('onmouseout - The mouse is moved off an element')"
   onmouseleave="console.log('onmouseout - The mouse is moved off an element (not bubbling)')"
       onchange="console.log('onchange - The user changes the content of a field')"
      onfocusin="console.log('onfocusin - An element gets focus')"
        onfocus="console.log('onfocus - An element gets focus (not bubbling)')"
      onkeydown="console.log('onkeydown - A keyboard key is pressed')"
     onkeypress="console.log('onkeypress - A keyboard key is pressed or held down')"
onselectionchange="console.log('onselectionchange - The caret position changed')"
        onkeyup="console.log('onkeyup - A keyboard key is released')"
       onselect="console.log('onselect - Text is selected')"
     onfocusout="console.log('onfocusout - Loosing focus')"
         onblur="console.log('onblur - Loosing focus (not bubbling)')"
   ontouchstart="console.log('ontouchstart')"
    ontouchmove="console.log('ontouchmove')"
     ontouchend="console.log('ontouchend')"
  ontouchcancel="console.log('ontouchcancel')"
    placeholder="edit me"
/>

I noticed that on chrome/firefox desktop onselectionchange fired before onkey, while it was the other way around on android chrome.

https://jsfiddle.net/yv8zg5d1

Sibyl