将参数传递给 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是块作用域。