Order of events firing between Mouseover and Mouseout

Question

Let's say if my mouse moves out from elementA and hovers over to elementB.

What will be the order of the events getting fired?

Kurland

Did you read or write anything before asking? – Bedeck

I realize this question is over then years old now but if one arrives here because attempting to handle the tranfer of the mouse between two elements, the relatedTarget property of the event object may be useful and eliminate the need to listen for both events. One may do. A description is given here and has a date of April 17, 2022 as I post this. – Belmonte

Answer 1

mousemove, mouseleave, mouseout, mousemove x X, mouseenter, mouseover, mousemove some more etc...

That's my best guess...

But I was slightly wrong. This should do it for you: Add the events you need (the example uses jQuery, you could do this in plain JavaScript too, but I didn't want to spend a lot of time on this).

Ok, here's the code:

$(document).ready(function(e) {
    $('.canary').on('mouseout mouseleave mouseenter mouseover', function(event){
        $('#test').text($('#test').text() + ', ' + event.type)      });
});

Here's your CSS:

.canary{
    width:200px;
    height:100px;
    background-color:#066
    }

Your HTML

<textarea name="test" id="test" cols="200" rows="10"></textarea>
<div class='canary'></div>
<br /><br />
<div class='canary'></div>

Here's a live demo

Mcquillin

Answer 2

The spec puts some requirements on the ordering of these events, but in some situations the order is apparently browser-dependent. See https://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order.

Certain mouse events defined in this specification MUST occur in a set order relative to one another. The following shows the event sequence that MUST occur when a pointing device’s cursor is moved over an element:

Event Type  Element Notes
1   mousemove       Pointing device is moved into element A...
2   mouseover   A   
3   mouseenter  A   
4   mousemove   A   Multiple mousemove events

Pointing device is moved out of element A...
5   mouseout    A   
6   mouseleave  A   

When a pointing device is moved into an element A, and then into a nested element B and then back out again, the following sequence of events MUST occur:

Event Type  Element Notes
1   mousemove       
Pointing device is moved into element A...
2   mouseover   A   
3   mouseenter  A   
4   mousemove   A   Multiple mousemove events

Pointing device is moved into nested element B...
5   mouseout    A   
6   mouseover   B   
7   mouseenter  B   
8   mousemove   B   Multiple mousemove events

Pointing device is moved from element B into A...
9   mouseout    B   
10  mouseleave  B   
11  mouseover   A   
12  mousemove   A   Multiple mousemove events

Pointing device is moved out of element A...
13  mouseout    A   
14  mouseleave  A

They go on to indicate that if elements are nested in the DOM, but occupy the same space, mouseover and mouseout events occur for the innermost DOM element. It is not clear to me whether the spec means to exclude the possibility of mouseover and mouseout events for the ancestor DOM nodes, not shown in their example event sequence.

Evelinevelina