Запуск события onmouseover программно в JavaScript

Вы бы сделали это примерно так:

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

Однако, как упоминалось в комментариях, стоило бы протестировать, прежде чем рассматривать проблему.

Это работало для меня, по крайней мере, в IE9. Должна быть кроссбраузерной или близкой к этому...

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

Для примера onmouseover вызовите такую ​​функцию

FireEvent( ElementId, "mouseover" );

Для меня сработало следующее:

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

Также:

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

Не вдаваясь в подробности, у меня был img с ролловерами, т. е. mouseout/overs, которые устанавливали img src в скрытые значения формы (или это могло быть сделано в другом контексте с переменными gloabl). Я использовал некоторый javascript, чтобы поменять местами оба моих значения изображения over/out, и я вызвал вызванный FireEvent( ElementId, "mouseover"); чтобы вызвать изменение. Мой javascript скрывал/отображал элементы на странице. Это приводило к тому, что курсор иногда находился над изображением, которое я использовал для запуска события, которое было таким же, как и то, которое я заменял, а иногда курсор не находился над изображением после щелчка.

Mouseover/out не срабатывает, если вы не выйдете и не войдете в элемент повторно, поэтому после того, как мое событие было запущено, mouseover/out потребовал «повторного срабатывания» для учета новой позиции курсора. Вот мое решение. После того, как я скрою/покажу различные элементы страницы и выполню замену img src, как описано, я вызываю функцию RefreshMouseEvents( ElementId ) вместо FireEvent( ElementId, "mouseover" ).

Это работает в IE9 (не уверен в других браузерах).

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

Мне пришлось пересмотреть набор функций RefreshMouseEvents после дополнительного тестирования. Вот, казалось бы, улучшенная версия (опять же тестировалась только в IE9):

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

Мне нужно было сделать что-то подобное, но я использую jQuery и считаю это лучшим решением:

Используйте триггерную функцию jQuery.

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

Вы также можете добавить к нему параметры, если вам нужно. См. документацию jQuery на .trigger.