javascript - 在没有悬停的情况下触发 onmouseover 功能，但单击另一个 div

Question

我想知道如何通过点击另一个div 来触发onmouseover 功能。我喜欢只用 JavaScript 来完成。这是代码:

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

#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="showRed()"></div>

我尝试过但没有奏效的方法:

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

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

Answer 1

与其尝试在元素上触发事件，不如像这样直接执行函数:

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

    function triggerFunction {
        showBlue();
    }
</script>