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

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);
  }

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

它在那时被调用。因此，背景设置为给定的颜色。

这不是因为您在第二个 for 循环 中添加了 addEventListener

可以这样写。

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期待回调，而不是函数调用。