Javascript：在循环中创建的事件侦听器中使用实际变量值

Question

所以我有一些像这样的代码：

var word = 'hello'.split('')
var index = 0
for (letter of word) {
    button = document.createElement('button')
    button.innerText = letter
    button.addEventListener('mouseover', function () {
        alert(index)
    })
    index++
    document.body.appendChild(button)
}

我遇到的问题是，警报总是会给我 index 的最终值，而不是每个元素的0 - 4。

我确信我之前已经看到了这样一个问题的解决方案，我老实说完全期望这会被标记为重复，但对于我的生活，我似乎无法弄明白正确的搜索条件，以找到我正在寻找的答案。