javascript - 相同的索引在循环中给出不同的 DOM 元素

Question

我尝试将两个事件侦听器添加到相同的 DOM 元素，如下所示：

const rows = document.querySelectorAll(`.row`);

for (let i = 0; i < rows.length; i++) {
    rows[i].addEventListener(`touchend`, (e) => {
        console.log(i)
        if (documentClick) {
            const code = rows[i].dataset.code;
        }
    });

    rows[i].addEventListener(`click`, (e) => {
        console.log(i)
        const code = rows[i].dataset.code;
    });
}

<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>
<div class="row">x</div>

当我在控制台中检查单击元素的索引时，它给了我不同的索引。怎么可能，为什么会发生？

标签： javascriptdomselectors-api