如何将事件侦听器应用于元素数组？

如何解决如何将事件侦听器应用于元素数组？

所以我正在尝试制作一个书签，当您将鼠标悬停在事物上时，它们会亮起，这就是我目前所拥有的

nest

但是当我将鼠标悬停在我正在使用的 h1 元素上时，这并没有做任何事情，有人能告诉我我做错了什么如果我在 lightUp 之后添加一个 ()，它会立即运行该函数没有我徘徊。 此外，for 循环没有任何问题，当我在没有悬停的情况下应用文本阴影时，它将它应用于所有 h1 元素，我认为这是侦听器出了问题。

解决方法

出于各种原因，您的 lightUp 函数不应依赖于您用来添加侦听器的 i 变量。它应该从事件中获取 h1，如：

function lightUp(event) {
  event.target.style.textShadow = "2px 2px 5px blue";
}

或者在添加监听器时绑定，如下：

h1[i].addEventListener("mouseover",() => lightUp(h1[i]),false);

function lightUp(element)
{
  element.style.textShadow = "2px 2px 5px blue";
}

---

在您的 for 循环运行后，i 的值将是 h1.length + 1，因此您的 lightUp 函数将始终尝试对不存在的 h1 进行操作。 （我希望这会引发异常：尝试访问 .style 上的 undefined。）

,

我强烈建议从基于索引的循环切换到 for...of，这样更易​​读：

const headlines = document.getElementsByTagName("h1");
for (const headline of headlines) {
    headline.addEventListener("mouseover",lightUp,false);
}

function lightUp(event) {
  event.target.style.textShadow = "2px 2px 5px blue";
}

<h1>Foo</h1>
<h1>Bar</h1>
<h1>Baz</h1>