如何通过addEventListener为多张图片添加样式事件？循环绑定报错求解

错误原因 #

你碰到的 Uncaught TypeError: Cannot set property 'style' of undefined 问题，根源在于用var声明的变量i没有块级作用域。循环结束后，i的值会变成images.length，当鼠标事件触发时，匿名函数里的images[i]其实是images[images.length]，超出了元素集合的索引范围，自然是undefined。

修复方案 #

方案1：用this指向当前触发事件的元素

事件触发时，this会指向当前触发事件的<img>元素，直接用它来设置样式即可，同时建议单独修改transform属性，避免覆盖其他样式：

const images = document.querySelectorAll(".gallery img");

for (var i = 0; i < images.length; i++) {
    images[i].addEventListener('mouseout', function() {
        this.style.transform = "scale(.8)";
    });
    images[i].addEventListener('mouseover', function() {
        this.style.transform = "scale(1.2)";
    });
}

方案2：用let声明循环变量

let拥有块级作用域，每次循环的i都是独立的，不会被后续循环修改：

const images = document.querySelectorAll(".gallery img");

for (let i = 0; i < images.length; i++) {
    images[i].addEventListener('mouseout', function() {
        images[i].style.transform = "scale(.8)";
    });
    images[i].addEventListener('mouseover', function() {
        images[i].style.transform = "scale(1.2)";
    });
}

方案3：用forEach遍历元素集合

更简洁的写法，直接遍历每个图片元素绑定事件：

document.querySelectorAll(".gallery img").forEach(img => {
    img.addEventListener('mouseout', () => img.style.transform = "scale(.8)");
    img.addEventListener('mouseover', () => img.style.transform = "scale(1.2)");
});

方案4：纯CSS实现（推荐）

如果不需要额外JS逻辑，用CSS伪类:hover就能实现相同效果，更高效且代码更简洁，还能加过渡动画让效果更平滑：

.gallery img {
    transition: transform 0.3s ease; /* 添加平滑过渡 */
    transform: scale(.8); /* 默认缩放0.8 */
}
.gallery img:hover {
    transform: scale(1.2); /* 鼠标悬浮时缩放1.2 */
}

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