循环绑定mouseover事件时如何仅修改被hover元素的样式？

核心优化思路 #

无需依赖循环变量i定位元素，直接利用DOM事件回调的内置特性获取当前触发悬停的元素即可，从根源避免作用域相关的异常问题。

方案1：使用this指向当前绑定事件的元素 #

普通函数作为DOM事件的回调函数时，this默认指向当前绑定事件的DOM节点，直接替换代码中的webItems[i]为this即可：

let webItems = document.querySelectorAll(".web-item");
for (let i = 0; i < webItems.length; i++) {
    webItems[i].addEventListener("mouseover", function() {
        this.style.filter = "brightness(30%)";
        this.children[1].style.display = "block";
    });
    // 建议补充mouseout事件，实现鼠标离开后样式恢复
    webItems[i].addEventListener("mouseout", function() {
        this.style.filter = "brightness(100%)";
        this.children[1].style.display = "none";
    });
}

方案2：使用事件对象的currentTarget属性 #

如果后续需要使用箭头函数作为回调（箭头函数没有自身的this指向），可以通过事件对象的currentTarget属性获取绑定事件的元素：

let webItems = document.querySelectorAll(".web-item");
for (let i = 0; i < webItems.length; i++) {
    webItems[i].addEventListener("mouseover", (e) => {
        e.currentTarget.style.filter = "brightness(30%)";
        e.currentTarget.children[1].style.display = "block";
    });
}

更优方案：纯CSS实现 #

这个悬停效果完全不需要JavaScript实现，直接用CSS伪类:hover即可，性能更高、逻辑更简洁：

/* 先给说明文本设置默认隐藏样式 */
.web-item .web-item-caption {
    display: none;
}
.web-item:hover {
    filter: brightness(30%);
}
.web-item:hover .web-item-caption {
    display: block;
}

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