JavaScript 从事件触发器中获取元素

Question

我目前正在尝试编写我的第一个网站。 因此，我想获得具有特定类的所有元素，并为它们提供所有相同的事件监听器。 我这样做是这样的：

const certs = document.getElementsByClassName("certificate");

for (var i = 0; i < certs.length; i++) {
    certs[i].addEventListener("mouseover", mouseOver());
    certs[i].addEventListener("mouseout", mouseOut());
}

function mouseOver() {
    this.querySelector(".overlay").classList.add("active");
}

function mouseOut() {
    this.querySelector(".overlay").classList.remove("active");
}

我的问题是，“this”似乎不是触发 mouseOver 事件的元素。 我还尝试将“this”作为参数，如下所示：

const certs = document.getElementsByClassName("certificate");

for (var i = 0; i < certs.length; i++) {
    certs[i].addEventListener("mouseover", mouseOver(this));
    certs[i].addEventListener("mouseout", mouseOut(this));
}

function mouseOver(elem) {
    elem.querySelector(".overlay").classList.add("active");
}

function mouseOut(elem) {
    elem.querySelector(".overlay").classList.remove("active");
}

两种方式都不起作用，并且知道我被困在某种程度上...... 有没有办法做到这一点？ 如何使用触发事件的确切元素？

（我不想给每个元素一个唯一的 ID 以使其可重用）

Answer 1

addEventListener 的第二个参数是一个函数。现在，您正在立即调用该函数，它返回undefined，因此无论何时将鼠标移到或移出，它都会尝试运行undefined。只传递函数变量本身。

const certs = document.getElementsByClassName("certificate");

for (var i = 0; i < certs.length; i++) {
    certs[i].addEventListener("mouseover", mouseOver);
    certs[i].addEventListener("mouseout", mouseOut);
}

function mouseOver(elem) {
    elem.querySelector(".overlay").classList.add("active");
}

function mouseOut(elem) {
    elem.querySelector(".overlay").classList.remove("active");
}