向多个元素添加相同的事件监听器答案

【问题标题】：Adding the same event listener to multiple elements向多个元素添加相同的事件监听器
【发布时间】：2014-05-18 03:32:01
【问题描述】：

我看到了类似的问题，但要么它们与我想要的不够接近，要么与它们各自的答案一样不清楚——让我们看看：

我有什么：以下代码块：

        addEventListener("load", function() {
            for(var x in document.getElementsByName("rbTipo")) {
                document.getElementsByName("rbTipo")[x].addEventListener("change", function() {
                    if(document.getElementById("rbTipoA").checked) {
                        document.getElementById("painelAluno").style.display = "block";
                        document.getElementById("painelEscola").style.display = "none";
                    }
                    else if(document.getElementById("rbTipoE").checked) {
                        document.getElementById("painelAluno").style.display = "none";
                        document.getElementById("painelEscola").style.display = "block";
                    }
                    else {
                        document.getElementById("painelAluno").style.display = "none";
                        document.getElementById("painelEscola").style.display = "none";
                    }
                });
            }
        });

应该怎么做：

对于每个带有 name="rbTipo" 的 DOM 元素，将其添加到 change 监听器；
更改第三方元素的 CSS 属性。

它做错了什么：

显然doc[...]byName("rbTipo")[x] 没有选择元素本身。表示x 不是从getElementsByName 返回的数组的当前迭代索引？

我尝试了什么：

为每个name="rbTipo" 元素分配自己的监听器。似乎不合逻辑，因为我们正在谈论为多个元素做某事。没什么大不了的，因为我只有两个，但我会经常这样做，而且并不总是使用“只有两个”索引。

【问题讨论】：

在循环体中做一个console.log(x)。我想我在NodeLists 中听说过浏览器可枚举性问题。您绝对应该将集合缓存在一个变量中，并使用正确的array-like iteration over it
显然 Chrome 从 1++ 枚举 NodeList，而不是 0++，这对我来说真的毫无意义。请让您的评论成为答案——这真的很有用。
请注意：虽然下面的答案有效，但当您开始吸引大量听众时，您会想看看stackoverflow.com/questions/1687296/…

标签： javascript dom dom-events

【解决方案1】：

for(var x in document.getElementsByName("rbTipo"))

我不会指望NodeLists/HTMLCollections 的可枚举性。 Better use array-style iteration.

此外，您不应重复查询，而应将集合存储在变量中。顺便说一句，您确实已经为每个元素提供了自己的侦听器，这有点不必要。

addEventListener("load", function() {
    var rbTipos = document.getElementsByName("rbTipo"),
        rbTipoA = document.getElementById("rbTipoA"),
        rbTipoE = document.getElementById("rbTipoE"),
        painelA = document.getElementById("painelAluno"),
        painelE = document.getElementById("painelEscola");
    function listener() {
        if(rbTipoA.checked) {
            painelA.style.display = "block";
            painelE.style.display = "none";
        } else if(rbTipoE.checked) {
            painelA.style.display = "none";
            painelE.style.display = "block";
        } else {
            painelA.style.display = "none";
            painelE.style.display = "none";
        }
    }
    for(var i=0; i<rbTipos.length; i++) {
        rbTipos[i].addEventListener("change", listener);
    }
});

【讨论】：

【解决方案2】：

找到所有带有name="rbTipo"的元素，并循环遍历它们，为每个元素添加监听器：

var rbTipos = document.querySelectorAll('[name="rbTipo"]');
for (var i = 0; i < rbTipos.length; i++) {
  rbTipos[i].addEventListener('change', myEventFunction);
}

【讨论】：