如何为ev​​entlistener实现一个函数

Question

CSS：

.motionContainerMenu{
    width: 100%;
    height: 30px;
    position: relative;
    margin: auto;
    margin-bottom: -7px;
    border: 2px solid red
}


.motionTop{
    position:absolute;
    border:2px solid blue;
    background-color: red;
    height:10px;
    width:100%
}

HTML：

<nav>
    <ul>
        <li>
            <a href="transcript.php">Test one</a>
            <div class="motionContainerMenu">
                <div class="motionTop"></div>
            </div>
        </li>
        <li>
            <a href="contact.php">TestTwo</a>
            <div id="motionContainerMenu">
                <div class="motionTop"></div>
            </div>
        </li>
    </ul>
</nav>

使用Javascript：

function focusMenu(x) {

    x.style.borderColor     = "#fff";
    x.style.height          = "30px";
    x.style.backgroundColor = "#555"
}

var elements = document.querySelectorAll(".motionTop");
for (var i = 0; i < elements.length; i++) {

    elements[i].addEventListener( "mouseover", function() { focusMenu(x) } );
};

在代码的最后一行，我希望每个.motionTop独立行动。我删除了focusMenu（x）并将其替换为Alert。我使用警报来测试代码，它完全符合我的要求。但是，我无法弄清楚如何使该行代码接受focusMenu函数。我是JavaScript的新手（我在此之前做了很多研究）。 谢谢你的任何建议。

Answer 1

如果您将event参数添加到mouseover事件监听器，那么您可以通过event.currentTarget获取相关元素：

elements[i].addEventListener( "mouseover", function( event ) {
    focusMenu( event.currentTarget )
} );

我还建议您使用classList而不是直接更改style属性，例如：

CSS：

.focused {
    border-color: #FFF;
    height: 30px;
    background-color: #555;
}

JavaScript的：

elements[i].addEventListener( "mouseover", function( event ) {
    event.currentTarget.classList.add('focused');
} );

请注意，如果您希望在.focused上删除mouseout类，那么您根本不需要JavaScript，只需使用CSS :hover：

.motionTop:hover {
    border-color: #FFF;
    height: 30px;
    background-color: #555;
}