将相同的事件侦听器添加到多个元素

时间:2014-04-05 20:08:21

标签: javascript dom javascript-events

我看到了类似的问题,但要么它们与我想要的不够接近,要么就像它们各自的答案一样不清楚 - 让我们看看:

我有什么:以下代码块。

        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"元素提供自己的侦听器。由于我们正在谈论为多个元素做某事,因此似乎不合逻辑。没什么大不了的,因为我只有两个,但我会经常这样做,并不总是只有“两个”索引。

2 个答案:

答案 0 :(得分:1)

使用name="rbTipo"查找所有元素,并循环遍历它们,为每个元素添加侦听器:

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

答案 1 :(得分:1)

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

我不会指望NodeList s / HTMLCollection的可枚举性。 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);
    }
});