Question

我无法将事件监听器应用于我创建的阵列中的所有项目。我在这里看了很多其他相关的帖子，但似乎都没有涵盖我的确切情况。

我知道for循环正在运行，因为我将其记录到控制台并且可以看到每次迭代都会弹出。我甚至可以在控制台中看到事件监听器已应用于每次迭代，但在实际将鼠标悬停在页面上的元素上时不会触发。

我可能遗失的任何线索？完整的代码如下。

<head>
    <title>Test Page</title>
</head>

<style>
    .red-text {
        color: red;
        font-size: 75px;
        transition: 4s;
        font-family: Times;
    }

    .new-header {
        color: blue;
        font-size: 100px;
        transition: 3s;
        font-style: bold;
    }
</style>

<body>
    <h1>Welcome</h1>
    <p>This is the first paragraph</p>
    <p>Here is the second paragraph</p>
    <p>And this is the final paragraph</p>

    <script>


        var h = document.querySelector("h1");
        var p = document.querySelectorAll("p");

        var changeHeader = function() {
            h.className = h.className + " new-header";
        }

        var addRedClass = function() {
            p.className = p.className + " red-text";
        }

        h.addEventListener("mouseover", changeHeader); 

        for(var i = 0; i < p.length; i += 1) {
            console.log(p[i]);
            p[i].addEventListener("mouseover", addRedClass);
        }

    </script>

</body>

同样，数组中的每个元素都是目标，我可以验证是否正在应用侦听器，但鼠标悬停时不会触发。

提前感谢任何建议！

Answer 1

您需要在addRedClass功能上拥有正确的范围。

var addRedClass = function() {
    this.className = this.className + " red-text";
};

使用this.className，您引用了被鼠标悬停的<p>标记。

您不需要在this函数中使用changeHeader的原因是因为变量h仅包含标头节点。但是，变量p包含nodeList，它不是<p>节点的单个引用。因此，当addEventListener触发时，它会将您已转移的<p>标记作为范围传递给addRedClass。这就是this用于更改className的原因。

Answer 2

p[i].addEventListener("mouseover", addRedClass);

因此，只要 p中的任何元素被鼠标移除，就会调用addRedClass函数。这很好。

现在让我们来看看这个功能：

p.className = p.className + " red-text";

您修改className的{{1}}。

元素对象的非实时NodeList。

它没有p属性（直到你创建它）。

大概想要使用className或循环this.className并反复使用p。

Javascript - 将事件侦听器添加到数组中的所有项目

2 个答案: