Question

我有多个项目，当用户将鼠标悬停在我们想要更改的同一个类时。我可以在HTML中添加这样的事件，但这看起来很不合适：

<div class="video-item" onmouseenter="overVideoStart(this)"></div>

JavaScript看起来像这样：

function overVideoStart(element)
{
    element.className += " video-item-hover";
    ...
}

有更好看的方式吗？我希望保留onmouseenter属性，而不是在JavaScript文件中定义它。有一种方法可以为单个项目执行此操作，但我还没有找到一种方法来为课程执行此操作。对不起，如果这是一个总的noob问题，但这是我第一次使用JavaScript。

Answer 1

您可以使用addEventListener向JS中的元素添加事件。

要向多个元素添加事件侦听器，您需要首先捕获所有元素并循环遍历它们并将每个元素设置为具有侦听器。

var elements = document.querySelectorAll('.video-item');
for(var i=0; i<elements.length; i++){
   elements[i].addEventListener("mouseenter",mouseEnter);
}

function mouseEnter(e){
    //e will refer to the event object
    //you can refer to the element with keyword "this"
}

如果你包含一个像jQuery这样的库你可以稍微缩短代码，因为它会在幕后进行循环和其他工作

jQuery('.video-item').mouseenter(mouseEnter);

function mouseEnter(e){
    //e will refer to the event object
    //you can refer to the element with keyword "this"
}

Answer 2

您可以将jQuery添加到您的网页，并使用它的css选择器之类的查询来设置与查询匹配的元素的回调。

例如在您的情况下：

jQuery(".video-item").mouseenter(function(event) {
    // handle the mouse enter
});

或者，如果匹配元素可以随时间改变 - 例如通过ajax调用 - 您可以使用功能更强大的.on()函数。

有onmouseenter / leave事件的多个班级？

2 个答案: