将参数传递给 addEventListener 调用？

Question

我是 JavaScript 的新手，正在寻找一种将参数传递给事件侦听器的简单方法。我正在从一个 API 调用（它返回一个数据对象列表以显示为 div）动态创建一堆 div，并想让每个 div 都可以点击。我的问题是我无法弄清楚如何在单击元素时传递参数，因为它超出了范围。我只是希望我编写的“load_email”函数能够访问 data[i].id。这是我到目前为止所拥有的：    // Put response into json form    .then(response => response.json())    .then(data => {        // Log data to the console, create email items        console.log(data);        for (var i = 0; i < data.length; i++) {          const element = document.createElement('div');          element.classList.add('box');          element.classList.add('px-2');          element.classList.add('py-1');          element.innerHTML = `            <div class="row">              <div class="col-3">                <strong>${data[i].sender}</strong>              </div>              <div class="col-5">                ${data[i].subject}              </div>              <div class="col-4 text-right">                ${data[i].timestamp}              </div>            </div>          `;          if (data[i].read == true) {            element.classList.add('white');          } else{            element.classList.add('grey');          }          element.addEventListener('click', () => load_email(data[i].id); **//THIS IS WHERE IM STRUGGLING**          document.querySelector('#emails-view').append(element);        }    });function load_email(id){  document.querySelector('#emails-view').style.display = 'none';  document.querySelector('#compose-view').style.display = 'none';  document.querySelector('#open-mail-view').style.display= 'block';  console.log(`load email id ${id}`)}

Answer 1

const j = i;

element.addEventListener('click', () => load_email(data[j].id);

请注意，这var是函数作用域，而let和const是块作用域。