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

Question

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

var h1 = document.getElementsByTagName("h1");
h1length = h1.length;
for (var i=0; i <= h1.length; i++) 
{
    h1[i].addEventListener("mouseover", lightUp, false);
}
function lightUp()
{
    h1[i].style.textShadow = "2px 2px 5px blue";
}

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

Answer 1

出于各种原因，您的 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 进行操作。（我希望这会引发异常：试图在 undefined 上访问 .style。）

Answer 2

我强烈建议从基于索引的循环切换到 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>

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

How can I apply a event listener to an array of elements?

javascript

bookmarklet