javascript - addEventListener 创建了一个无限循环

Question

我添加了一个事件监听器，它创建了一个无限循环我真的不明白我做错了什么。

发生的事情是它一直自己点击图片

这是我的代码:

function attachOnClickEvent(cases,theme,debut,capture){
    var images=document.getElementsByTagName('img');
    for(var i=0;i<images.length;i++){
        images[i].addEventListener("click",x(cases,theme,debut,capture),false);
    }
};

var x=function(cases,theme,debut,capture){newImage(this,cases,theme,debut,capture);};

function newImage(elem,cases,theme,debut,capture){
    var images=preloadImages(cases,theme);
    var imgTab=document.getElementsByTagName('img');
    var Id=elem.id;
    elem.src=images[randomTab[Id]];

}; 

希望有人能发现我的错误..谢谢!

Answer 1

1. getElementsByTagName正在返回一个实时 NodeList
2. 您正在调用您的函数 x每次而不是将其添加为处理程序
3. 一个新的<img>已创建
4. NodeList 的长度增加了 1
5. 下一次迭代与上一次迭代距离末尾的距离相同

您需要考虑两件事，首先是我在 2 中提到的，你正在调用 x当你不想的时候。其次，您可以通过向下循环来避免实时列表的一些问题

---

获得所需结果的一个解决方法可能是重写 attachOnClickEvent像这样

function attachOnClickEvent(cases, theme, debut, capture) {
    var images = document.getElementsByTagName('img'),
        handler = function (e) {
            return x(cases, theme, debut, capture);
        },
        i;
    for (i = images.length - 1; i >= 0; --i) {
        images[i].addEventListener("click", handler, false);
    }
}