时间戳

首页 > 解决方案 > addEventListener 是否采用注册 eventListener 时的值以供将来执行？

javascript - addEventListener 是否采用注册 eventListener 时的值以供将来执行？

问题描述

const showMovies = function (title, url, rating, id) {
  const newMovieElement = document.createElement('li');
  newMovieElement.className = 'movie-element';
  newMovieElement.innerHTML = <div class='movie-elementimage'>
  <img src='${url}' alt='${title}'>
  </div>
  <div class='movie-elementinfo'> 
  <h2>${title} </h2>
  <p> ${rating}/5 Stars</p>
  </div>
  ;

  document.getElementById('movie-list').append(newMovieElement);

  newMovieElement.addEventListener('click', function () {
    newMovieElement.style.display = 'none';
});
};

每次调用 showMovies 函数时，我都会创建一个新的 LI 并将其存储在 const newMovieElement 中。现在假设这个函数被调用了两次，那么最后创建的 LI 将被存储在 const newMovieElement 中。我还在为删除 LI 而创建的每个 LI 上添加了一个 eventListener。现在假设我单击第一个 LI，那么哪个 LI 应该消失，因为newMovieElement.style.display = 'none';在单击时，newMovieElement 存储了第二个 LI，因此这将设置display:nonenewMovieElement（添加了第二个 LI）而不是第一个 LI？

结果是，如果我单击第一个 LI，那么它只会消失（这确实是必需的），但从技术上讲，第二个 LI 不应该根据代码消失吗？

标签： javascriptdomonclickaddeventlistenerdisplay

解决方案

每个动态创建的函数（例如您的事件处理程序）都将周围的范围绑定到它，因此它可以访问这些变量（包括newMovieElement）。这称为“词法作用域”或“闭包”。每个都newMovieElement包含另一个<li>元素。

在这里阅读：

推荐阅读