Question

我有以下标记和脚本来模拟一个简单的计算器

HTML：

<input id="txtResult" type="text" readonly="readonly" /><br />
    <input id="txtInput" type="text" /><br />
    <button id="btn7" class="number">7</button>
    <button id="btn8" class="number">8</button>
    <button id="btn9" class="number">9</button><br />
    <button id="btn4" class="number">4</button>
    <button id="btn5" class="number">5</button>
    <button id="btn6" class="number">6</button><br />
    <button id="btn1" class="number">1</button>
    <button id="btn2" class="number">2</button>
    <button id="btn3" class="number">3</button><br />
    <button id="btnClear">C</button>
    <button id="btn0" class="number">0</button>
    <button id="btnClearEntry">CE</button><br />
    <button id="btnPlus">+</button>
    <button id="btnMinus">-</button>

使用Javascript：

脚本试图将click事件处理程序附加到按钮上。

window.onload = function()
{
    var buttons = document.getElementsByClassName("number");

    for (var btn in buttons)
    {
        console.log(btn); //print the value of "buttons", i.e 1, 2 ,3

        btn.addEventListener("click", numberClick, false);  // JavaScript runtime error: Object doesn't support property or method 'addEventListener'
    }


    //However accessing an element directly works !!!
    var btn5 = document.getElementById("btn5");

    btn5.addEventListener("click", numberClick, false);
}

function numberClick()
{
    var input = document.getElementById("txtInput");
    input.value = input.value == "0" ? this.innerText : input.value + this.innerText;
}

这里的问题是当我遍历按钮并尝试附加事件处理程序时，它引发了异常。但是，当使用getElementById直接检索按钮时，代码可以正常工作。

你能解释一下原因吗？

Answer 1

document.getElementsByClassName()返回一个类似于对象的数组，这样可以更好地迭代：

var buttons = document.getElementsByClassName("number");
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", numberClick, false);
}

你可以按照自己的方式迭代数组（不推荐使用它，因为它迭代了所有可枚举的属性，而不仅仅是有时会弄乱代码的数组元素），但是如果你这样做了，那么buttons[btn]就是对象，不像你试图使用btn那样。

Answer 2

nodeList是类似数组的，因此应该使用常规的for循环，并且querySelectorAll有更好的支持

window.onload = function() {

    var buttons = document.querySelectorAll("number");

    for (var i=buttons.length; i--;) {
        buttons[i].addEventListener("click", numberClick, false);
    }
}

使用for-in循环时，它是

for ( key in object )

所以它会是

for (var btn in buttons) {
    buttons[btn].addEventListener
}

枚举Javascript中getElementsByClassName返回的元素

2 个答案: