为带指定class的元素绑定事件后，如何获取触发事件的元素？

问题根源 #

你写的代码里有两个关键错误：

1. 绑定事件时，你直接调用了mouseOver()和mouseOut()，这会导致函数立即执行，而不是把函数作为事件处理器传递给addEventListener。
2. 用var声明循环变量i，会导致循环结束后所有事件处理器共享同一个i值，引发意外行为（不过在你这个场景里，因为第一个错误已经导致函数提前执行，这个问题没暴露出来，但也是需要修正的点）。

修正后的基础写法 #

把函数名作为参数传递（不要加括号），同时用let声明循环变量，确保每个迭代的变量独立：

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

for (let 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会正确指向触发事件的.certificate元素，因为事件处理器函数在触发时，this默认绑定到事件源元素。

更简洁的写法：使用forEach遍历 #

getElementsByClassName返回的是HTMLCollection，可以先转成数组，再用forEach遍历，代码更简洁：

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

certs.forEach(cert => {
    cert.addEventListener("mouseover", () => {
        cert.querySelector(".overlay").classList.add("active");
    });
    cert.addEventListener("mouseout", () => {
        cert.querySelector(".overlay").classList.remove("active");
    });
});

也可以复用之前的mouseOver/mouseOut函数，效果一致：

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

certs.forEach(cert => {
    cert.addEventListener("mouseover", mouseOver);
    cert.addEventListener("mouseout", mouseOut);
});

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

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

更高效的方案：事件委托 #

如果页面上的.certificate元素可能动态添加（比如后续通过JS生成），用事件委托更合适，只需要给父元素绑定一次事件，就能处理所有子元素的事件：

// 假设所有.certificate的父元素是#cert-container，根据实际DOM结构修改
document.getElementById("cert-container").addEventListener("mouseover", (e) => {
    const cert = e.target.closest(".certificate");
    if (cert) {
        cert.querySelector(".overlay").classList.add("active");
    }
});

document.getElementById("cert-container").addEventListener("mouseout", (e) => {
    const cert = e.target.closest(".certificate");
    if (cert) {
        cert.querySelector(".overlay").classList.remove("active");
    }
});

e.target是触发事件的具体元素，closest(".certificate")会找到最近的带.certificate类的祖先元素，确保即使鼠标移到.certificate内部的子元素上，也能正确找到目标元素。

内容的提问来源于stack exchange，提问作者atzaka