Javascript循环对象数组并添加eventListener有一个奇怪的行为

Question

我不懂 Javascript 中的概念。首先，我创建了一个箭头函数 init()，它遍历一个对象数组并初始化一个附加了 eventListener 的图像标签。

init: () => {
        let catsContainer = document.getElementById('catsContainer')
        for (let cat of data.cats) {
            let element = `<img src="img/${cat.image}" catName="${cat.name}" alt="catImage" id="catOneImage" width="50" height="50">`;
            element = octopus.htmlToElement(element)
            catsContainer.appendChild(element)
            element.addEventListener('click', ((elementCopy) => {
                return () => {
                    view.loadImage(elementCopy)
                }
            })(element));
        }
    }

单击该图像时，将通过 loadImage() 函数加载新的大图像（更改 src 属性）。

loadImage: function (el) {
        let catBigImage = document.getElementById('catBigImage');
        let catName = document.getElementById('catName');
        catBigImage.setAttribute('src', el.getAttribute('src'))
        catName.innerHTML = el.getAttribute('catName')
        catBigImage.addEventListener('click', () => {
            let obj = data.cats.find(o => o.name === el.getAttribute('catName'));
            console.log(`obj:: ${obj}`)
            octopus.incrementCounter(obj)
            console.log(obj)
        });
    }

通常当您单击该大图像时，所选对象的计数属性必须增加。问题是当加载新图像时，我的代码会保留最后加载的对象并增加其计数器。直到现在我才真正理解这种行为。

您可以在上传的屏幕截图中看到，在第三次单击新加载的图像 (cat4) 时，我的代码还会增加最后加载的图像 (cat2)，从而产生 4 个 console.log 行。

Answer 1

发生这种情况是因为这段代码：

    catBigImage.addEventListener('click', () => {
        let obj = data.cats.find(o => o.name === el.getAttribute('catName'));
        console.log(`obj:: ${obj}`)
        octopus.incrementCounter(obj)
        console.log(obj)
    });

...添加一个事件处理程序每​​次执行。它不会替换之前绑定的事件处理程序。

您应该将此代码移出loadImage 函数，并且只执行一次。

根据经验，当在处理事件的函数中添加事件侦听器时，这是一种代码异味。