Trigger onmouseover event programmatically in JavaScript

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

const mouseoverEvent = new Event('mouseover');

whateverElement.dispatchEvent(mouseoverEvent);

This worked for me in IE9 at least. Should be cross-browser compatible or close to it...

function FireEvent( ElementId, EventName )
{
	if( document.getElementById(ElementId) != null )	
	{	
		if( document.getElementById( ElementId ).fireEvent ) 
		{
			document.getElementById( ElementId ).fireEvent( 'on' + EventName );		
		}
		else 
		{	
			var evObj = document.createEvent( 'Events' );
			evObj.initEvent( EventName, true, false );
			document.getElementById( ElementId ).dispatchEvent( evObj );
		}
	}
}

For onmouseover example, call the function like this

FireEvent( ElementId, "mouseover" );

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 }));

Without going into too much detail, I had an img with rollovers, i.e. mouseout/overs that set the img src to hidden form values (or this could have done in a different context with gloabl variables). I used some javascript to swap both of my over/out image values and I called the called FireEvent( ElementId, "mouseover" ); to trigger the change. My javascript was hiding / displaying elements on the page. This caused the cursor to sometimes be over the img I used to trigger the event - which was the same as the one I was swapping out, and sometimes the cursor was not over the img after the click.

Mouseover/out does not fire unless you exit and re-enter an element, so after my event was triggered the mouseover/out needed "retriggering" to account for the new cursor position. Here is my solution. After I hide / display various page elements, and to do my img src swapping as described, I call the function RefreshMouseEvents( ElementId ) instead of FireEvent( ElementId, "mouseover" ).

This works in IE9 (not sure about other browsers).

function RefreshMouseEvents( ElementId )
{
	FireEvent( ElementId, 'mouseover' );
    setTimeout( "TriggerMouseEvent( '" + ElementId + "' )" , 1 );
}

function TriggerMouseEvent( ElementId )
{
	if( IsMouseOver( ElementId, event.clientX, event.clientY ) )
		FireEvent( ElementId, 'mouseover' );
	else	
		FireEvent( ElementId, 'mouseout' );
}

function IsMouseOver( ElementId, MouseXPos, MouseYPos )
{
	if( document.getElementById(ElementId) != null )	
	{
		var Element = document.getElementById(ElementId);	
		var Left  = Element.getBoundingClientRect().left, 
			Top   = Element.getBoundingClientRect().top,
			Right = Element.getBoundingClientRect().right,
			Bottom  = Element.getBoundingClientRect().bottom;		
		return ( (MouseXPos >= Left) && (MouseXPos <= Right) && (MouseYPos >= Top) && (MouseYPos <= Bottom))	
	}
	else
	    return false;
}

function FireEvent( ElementId, EventName )
{
	if( document.getElementById(ElementId) != null )	
	{	
		if( document.getElementById( ElementId ).fireEvent ) 
		{
			document.getElementById( ElementId ).fireEvent( 'on' + EventName );		
		}
		else 
		{	
			var evObj = document.createEvent( 'Events' );
			evObj.initEvent( EventName, true, false );
			document.getElementById( ElementId ).dispatchEvent( evObj );
		}
	}
}

I had to revise my RefreshMouseEvents set of functions after more testing. Here is the seemingly perfected version (again only IE9 tested):

function RefreshMouseEvents( ElementId ) 
{
	FireEvent( ElementId, 'mouseover' );
    setTimeout( "TriggerMouseEvent( '" + ElementId + "', '" + event.clientX + "', '" + event.clientY + "' )", 1 );
}

function TriggerMouseEvent( ElementId, MouseXPos, MouseYPos )
{
	if( IsMouseOver( ElementId, (1*MouseXPos), (1*MouseYPos) ) )
		FireEvent( ElementId, 'mouseover' );
	else	
		FireEvent( ElementId, 'mouseout' );
}

function IsMouseOver( ElementId, MouseXPos, MouseYPos )
{
	if( document.getElementById(ElementId) != null )	
	{
		var Element = document.getElementById(ElementId);	
		var Left  = Element.getBoundingClientRect().left, 
			Top   = Element.getBoundingClientRect().top,
			Right = Element.getBoundingClientRect().right,
			Bottom  = Element.getBoundingClientRect().bottom;		
		return ( (MouseXPos >= Left) && (MouseXPos <= Right) && (MouseYPos >= Top) && (MouseYPos <= Bottom))	
	}
	else
	    return false;
}

function FireEvent( ElementId, EventName )
{
	if( document.getElementById(ElementId) != null )	
	{	
		if( document.getElementById( ElementId ).fireEvent ) 
		{
			document.getElementById( ElementId ).fireEvent( 'on' + EventName );		
		}
		else 
		{	
			var evObj = document.createEvent( 'Events' );
			evObj.initEvent( EventName, true, false );
			document.getElementById( ElementId ).dispatchEvent( evObj );
		}
	}
}

I needed to do something similar, but I'm using jQuery, and I found this to be a better solution:

Use jQuery's trigger function.

$j('#top-div' ).trigger( 'mouseenter' );

You can also add parameters to it if you need to. See the jQuery documentation on .trigger.

​<a href="index.html" onmouseover="javascript:alert(0);" id="help"​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​>help</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​

​document.getElementById('help').onmouseover();​​​​​​​

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.