Question

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

2015-12-30

434

javascript html css

我有多个具有相同类的项目，我想在用户将鼠标悬停在它们上面时更改它们。我可以在 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"
}

Answer 2

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

例如，在您的情况下：

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

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