Question

我可能会忽略一些显而易见的事情，但这似乎并不合适。

我有这个小代码块，其中addEventListener方法应该触发一个函数并同时传递一个参数，这样我就可以使用一个循环创建所有EventListeners时使用不同的函数。它确实有效，但在网站完成加载时会立即调用该函数。

为什么函数在触发之前不会等待，而是立即运行？

var html = document.getElementsByTagName('html');
var pics = document.getElementsByClassName('pics');
var functions = [];

for(h=0;h<pics.length;h++){
    array[h] = show(h);
}

for(p=0;p<pics.length;p++){
    pics[p].addEventListener('click',array[p]);
}

function show(index){
    html[0].style.backgroundColor = "black";
}

Answer 1

在剧本中

for (h = 0; h < pics.length; h++) {
    array[h] = show(h);
  }

您正在调用函数show，其值为h。

当时调用它。所以，背景以给定的颜色设置。

这不是因为addEventListener您要添加第二个for loop

你可以这样写。

for (h = 0; h < pics.length; h++) {
    array[h] = show; // don't  call,store the function reference
  }

  for (p = 0; p < pics.length; p++) {
    pics[p].addEventListener('click', array[p].bind(this,p));
  }

您可以将两个for循环缩短为一个

  for (p = 0; p < pics.length; p++) {
    pics[p].addEventListener('click', show.bind(this,p));
  }

注意：

addEventListener期待callback而不是function call。

Answer 2

在页面加载时调用

array[h] = show(h);。这是工作代码。

var html = document.getElementsByTagName('html');
var pics = document.getElementsByClassName('pics');
var functions = [];
var array = [];

for(h=0;h<pics.length;h++){
  array[h] = function () { show(h) };
}

for(p=0;p<pics.length;p++){
  pics[p].addEventListener('click',array[p]);
}

function show(index){
  html[0].style.backgroundColor = "black";
}

在没有触发事件的情况下调用Javascript addEventListener函数

2 个答案: