无法从for循环中读取未定义对象的属性

前端开发 2026-07-09

我有一个for循环的函数，它遍历一个HTML集合，并为集合中的元素添加一个事件监听器。我的问题是收到一个错误提示：事件函数无法读取未定义的属性。我尝试将HTML集合中的元素作为参数传递给事件函数。我该如何修复？

main.js:5 Uncaught TypeError: Cannot read properties of undefined (reading 'style')
    at HTMLImageElement.<anonymous> (main.js:5:22)
(anonymous) @   main.js:5

function main(){
    heads = document.getElementsByClassName("heads");
    for(var i = 0; i < heads.length; i++){
        heads[i].addEventListener("mouseover", function(){
            heads[i].style.animation = "colorIn 2s";
            heads[i].style.filter = "none";   
            }
        )
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="main.css" rel="stylesheet">

    <title>player tracker</title>
</head>
<body id="main" onload="main()">
    <h1>players online:</h1>
    <img src="https://mc-heads.net/avatar/Xx_DruceGamer_xX.png" class="heads" id="me" height="125px">
    <img src="https://mc-heads.net/avatar/Jimbout527.png" class="heads">
    <img src="https://mc-heads.net/avatar/Jimbout216.png" class="heads">
    <img src="https://mc-heads.net/avatar/mrwolffff.png" class="heads">
    <img src="https://mc-heads.net/avatar/MohMohMoh.png" class="heads">
    <img src="https://mc-heads.net/avatar/wild_billy.png" class="heads">
    <img src="https://mc-heads.net/avatar/coco_lover123.png" class="heads">
    <img src="https://mc-heads.net/avatar/YAKOBISAAC5687.png" class="heads">
    <script src="main.js"></script>
</body>
</html>

.heads{
    height:125px;
    margin: 54px;
    filter: grayscale();
    animation: none;
}

@keyframes colorIn{
    50% {filter:blur()}
    100% {filter:none}
}

解决方案

你真的需要一个事件处理程序吗？

img.heads{
    height: 40px;
    margin: 5px;
    filter: grayscale();
    animation: none;
    cursor: pointer;

    &:hover {
     animation: colorIn;
     filter: none;
    }
}

@keyframes colorIn{
    50% {filter:blur()}
    100% {filter:none}
}

<h1>players online:</h1>
<img src="https://mc-heads.net/avatar/Xx_DruceGamer_xX.png" class="heads">
<img src="https://mc-heads.net/avatar/Jimbout527.png" class="heads">
<img src="https://mc-heads.net/avatar/Jimbout216.png" class="heads">
<img src="https://mc-heads.net/avatar/mrwolffff.png" class="heads">
<img src="https://mc-heads.net/avatar/MohMohMoh.png" class="heads">
<img src="https://mc-heads.net/avatar/wild_billy.png" class="heads">
<img src="https://mc-heads.net/avatar/coco_lover123.png" class="heads">
<img src="https://mc-heads.net/avatar/YAKOBISAAC5687.png" class="heads">

如果是这样，为每个元素都写一个事件处理程序就显得过于繁琐。请改用事件代理来实现

document.addEventListener(`mouseover`, handle);
document.addEventListener(`mouseout`, handle);

function handle(evt) {
  if (evt.target.classList.contains(`heads`)) {
    const me = evt.target;
    const isOut = evt.type.endsWith(`out`);
    me.style.animation = isOut ? `none` : `colorIn`;
    return me.style.filter = isOut ? `grayscale()` : `none`;
  }

  return true;
}

img.heads{
    height: 40px;
    margin: 5px;
    filter: grayscale();
    animation: none;
    cursor: pointer;
}

@keyframes colorIn{
    50% {filter:blur()}
    100% {filter:none}
}

<h1>players online:</h1>
<img src="https://mc-heads.net/avatar/Xx_DruceGamer_xX.png" class="heads">
<img src="https://mc-heads.net/avatar/Jimbout527.png" class="heads">
<img src="https://mc-heads.net/avatar/Jimbout216.png" class="heads">
<img src="https://mc-heads.net/avatar/mrwolffff.png" class="heads">
<img src="https://mc-heads.net/avatar/MohMohMoh.png" class="heads">
<img src="https://mc-heads.net/avatar/wild_billy.png" class="heads">
<img src="https://mc-heads.net/avatar/coco_lover123.png" class="heads">
<img src="https://mc-heads.net/avatar/YAKOBISAAC5687.png" class="heads">

JavaScript