如何在javascript中的元素上触发onmouseover事件？

Question

正如标题所示，如何在JavaScript中的元素上触发一个onmouseover事件？请参阅代码片段。我可以点击小黑盒并执行onmouseover事件，而不是悬停在大盒子上吗？目标不是将箱子变成蓝色，而是触发onmouseover事件。而且我还需要用JavaScript来完成，不需要Jquery。

function showBlue() { 
 
\t document.getElementById('xyz').style.background = "#425dff"; 
 
} 
 
function showRed() { 
 
\t document.getElementById('xyz').style.background = "#e2e2e2"; 
 
}

#abc{width: 50px; height: 50px; background: #000000; color:#ffffff; cursor: pointer;} 
 
#xyz{width: 200px; height: 200px; background: #e2e2e2;}

<div id="abc"><a>click me</a></div> 
 

 
</br> 
 

 
<div id="xyz" onmouseover="showBlue()" onmouseout="showGrey()"></div>

我试过，但我:(没有工作

<script> 
    document.getElementById('abc').addEventListener("click", triggerFunction); 

    function triggerFunction() { 
     document.getElementById('xyz').mouseover(); 
    } 
</script> 

Answer 1

这应该工作：

function showBlue() { 
 
\t document.getElementById('xyz').style.background = "#425dff"; 
 
} 
 
function showGrey() { 
 
\t document.getElementById('xyz').style.background = "#e2e2e2"; 
 
} 
 
function triggerMouseOver() { 
 
    document.getElementById('xyz').onmouseover(); 
 
}

#abc{width: 50px; height: 50px; background: #000000; color:#ffffff; cursor: pointer;} 
 
#xyz{width: 200px; height: 200px; background: #e2e2e2;}

<div id="abc" onclick="triggerMouseOver()"><a>click me</a></div> 
 

 
</br> 
 

 
<div id="xyz" onmouseover="showBlue()" onmouseout="showGrey()"></div>

你也可以简单地这样做：

<div id="abc" onclick="document.getElementById('xyz').onmouseover()"><a>click me</a></div> 

Answer 2

应该是onmouseover()代替mouseover()

document.getElementById('xyz').onmouseover();