Javascript-將事件偵聽器添加到數組中的所有項目

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>標記。

您不需要在changeHeader函數中使用this的changeHeader是因為變量h僅包含標頭節點。 但是，變量p包含一個nodeList ，它不是對<p>節點的單個引用。 因此，當addEventListener觸發時，它將把您鼠標懸停的<p>標記傳遞給addRedClass作為范圍。 這就是為什么this工程，以改變類名。

Answer 2

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

因此，每當將p中的任何元素移到鼠標上時，就會調用addRedClass函數。 這可以。

現在讓我們看一下該函數：

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

您修改p的className 。

這是元素對象的非活動NodeList。

它沒有className屬性（直到創建它）。

大概想使用this.className或遍歷p並重復使用p[i].className 。

Javascript-將事件偵聽器添加到數組中的所有項目

問題描述

2 個解決方案

解決方案1
5 已采納 2016-08-31 15:02:15

解決方案2
3 2016-08-31 15:01:25

Javascript-將事件偵聽器添加到數組中的所有項目

問題描述

2 個解決方案

解決方案1 5 已采納 2016-08-31 15:02:15

解決方案2 3 2016-08-31 15:01:25

解決方案1
5 已采納 2016-08-31 15:02:15

解決方案2
3 2016-08-31 15:01:25