Trigger onmouseover event programmatically in JavaScript

user_207752 0
Viewed 99991

Is there a way to programmatically trigger the onmouseover event in plain JavaScript? or "extract" the method from the onmouseover event to call it directly?

eg

<div id="bottom-div" onmouseover="myFunction('some param specific to bottom-div');">
    <div id="top-div" onmouseover="????????"></div>
</div>

top-div is above bottom-div, so the onmouseover won't get fired in bottom-div. i need a way of calling myFunction('some param specific to bottom-div'); from top-div

onmouseover dom-events javascript
8 Answers

For me following worked:

​document.getElementById('xyz').dispatchEvent(new MouseEvent('mouseover', { 'bubbles': true }));

Also:

​document.getElementById('xyz').dispatchEvent(new MouseEvent('mouseover', { 'view': window, 'bubbles': true, 'cancelable': true }));
user_16641390

You would do it something like this:

document.getElementById('top-div').onmouseover();

However, as mentioned in the comments, it would be worth testing before being considered an issue.

user_1181450
Related