javascript - 具有 onmouseenter/leave 事件的多个类？

Question

我有多个具有相同类别的元素，当用户将鼠标悬停在它们上方时，我想更改它们。我可以在 HTML 中添加这样的事件，但这看起来很不漂亮:

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

JavaScript 看起来像这样:

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

有没有更好看的方法来做到这一点？我希望不使用 onmouseenter 属性，而是将其定义在 JavaScript 文件中。有一种方法可以对单个元素执行此操作，但我还没有找到一种方法来对类执行此操作。如果这是一个完全菜鸟的问题，我很抱歉，但这是我第一次使用 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"
}