Creating a Synthetic Mouse Event: Event Sequence?
-
I wrote a function in JavaScript that creates synthetic events to simulate a full mouse event. What I mean by "full" is that I'm creating and dispatching the "mouseenter", "mouseover", "mousemove", "mousedown", "mouseup", "click", and "mouseout" events. In what order do the "mouseenter", "mouseover", and "mousemove" events occur? I've tried looking this up, but I'm not getting anything.
-
I wrote a function in JavaScript that creates synthetic events to simulate a full mouse event. What I mean by "full" is that I'm creating and dispatching the "mouseenter", "mouseover", "mousemove", "mousedown", "mouseup", "click", and "mouseout" events. In what order do the "mouseenter", "mouseover", and "mousemove" events occur? I've tried looking this up, but I'm not getting anything.
Why not try it yourself and see? Edit fiddle - JSFiddle - Code Playground[^] In Firefox, I get
over, thenenter, thenmove. But if the precise order isn't documented anywhere, then it's probably not defined, and any code that relies on a specific sequence is most likely broken and wrong. :)
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
I wrote a function in JavaScript that creates synthetic events to simulate a full mouse event. What I mean by "full" is that I'm creating and dispatching the "mouseenter", "mouseover", "mousemove", "mousedown", "mouseup", "click", and "mouseout" events. In what order do the "mouseenter", "mouseover", and "mousemove" events occur? I've tried looking this up, but I'm not getting anything.
Just to add to what Richard said, you should read up on what these events actually do. Then your code will be less order dependent and more so intent dependent - even if they are synthetic. JavaScript really isn't a sequential kinda language anyway, despite its single execution thread. The mouseover event triggers when the mouse pointer enters the div element and its child elements. The mouseenter event is only triggered when the mouse pointer enters the div element. The mousemove event triggers every time the mouse pointer is moved over the div element. If you're writing code that performs entry logic on both enter and over, for instance, your code is probably running too slow. W3C Schools sucks, but this demo should convey some concepts ok-ish. [Mouse Enter vs Over vs Move](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery\_event\_mouseenter\_mouseover)
Jeremy Falcon
