[英]addEventListener Created an Infinite Loop
我添加了一个事件监听器,它创建了一个无限循环,我真的不知道我做错了什么。
它会不断地单击图像
这是我的代码:
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]];
};
希望有人能找到我的错误..谢谢!
getElementsByTagName
返回一个实时NodeList x
而不是将其添加为处理程序 <img>
1
有两件事你需要考虑,首先,正如我在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);
}
}
一个问题似乎是您没有正确使用回调。
回调需要是函数对象,不能按照您的意图返回。
function (cases, theme, debut, capture) {
return function() { newImage(this, cases, theme, debut, capture); };
}
尝试返回匿名函数。
会更好地了解你如何调用这些函数,但我注意到这一行:
images[i].addEventListener("click",x(cases,theme,debut,capture),false);
您正在调用函数x
,而不是将其指定为事件侦听器。 由于该函数会向页面添加图像,因此循环永远不会完成,因为它会遍历页面上的所有图像。 这一行应该是:
images[i].addEventListener("click", x , false );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.