EventListener为何自动触发、点击时却无响应？

问题根源 #

你在绑定点击事件时犯了一个典型错误：

movieDiv.addEventListener("click", console.log(i));

这里的console.log(i)是直接执行函数，而非传递函数引用。页面加载时循环执行到该行，就会立刻调用console.log(i)，并把执行结果（undefined）传给事件监听器。这就导致两个问题：页面加载时自动打印所有i值，而点击元素时没有可执行的函数，自然毫无反应。

修复方法 #

需要把事件逻辑包裹在函数里，传递函数引用给addEventListener，这样只有点击触发时才会执行代码：

// 方式1：箭头函数
movieDiv.addEventListener("click", () => console.log(i));

// 方式2：普通函数表达式
movieDiv.addEventListener("click", function() {
  console.log(i);
});

你使用的是let i（块级作用域），每个事件处理函数会正确捕获当前循环的i值，无需额外处理作用域问题。

修复后的循环代码片段 #

for (let i = 0; i < allMovies.length; i++) {
  const movieDiv = document.createElement("div");
  movieDiv.className = "movie-banner";

  const movieTitle = document.createElement("span");
  movieTitle.className = "movie-banner__title";
  movieTitle.textContent = allMovies[i].title;

  const movieImage = document.createElement("img");
  movieImage.className = "movie-banner__image";
  movieImage.src = allMovies[i].image;

  const movieDur = document.createElement("span");
  movieDur.className = "movie-banner__desc";
  movieDur.textContent = allMovies[i].duration;

  homePage.appendChild(movieDiv);
  movieDiv.appendChild(movieTitle);
  movieDiv.appendChild(movieImage);
  movieDiv.appendChild(movieDur);

  // 修复后的事件绑定
  movieDiv.addEventListener("click", () => console.log(i));
}

内容的提问来源于stack exchange，提问作者Jord van Eldik