while循环抛出错误javascript

我使用while循环在元素中附加事件。但是，事件已成功添加，但函数也会在控制台上引发错误。如果我使用pre-increment，那么它工作得很好。我只是想知道后增量有什么问题

循环头中的i++意味着i的值比进行测试时大一倍。您将跳过元素0并尝试处理超过列表末尾的元素

因此，运行时：

while (elements[i++])

被测试的元素索引将从0一直到最后一个元素，该点之后的i值将比该值大一个。这是因为i++意味着使用i的值，但随后增加它

当您使用pre-increment++i时，它仍然是错误的，除非您将i初始化为-1

这就是为什么我们有for循环：

这样，从循环测试到循环体结束，i的值保持不变。

试试这个

var elements = document.getElementsByTagName('*'),
    i = 0;

while (elements[i]) {    
    if (elements[i].className == 'c') {
        elements[i].addEventListener('click', function (e) {
            alert(this.className)
        })
    }

    i++;
}

演示：

不要使用++运算符。您应该使用聚合操作。它们是针对循环的有用抽象层。它们允许您考虑迭代，而不必考虑诸如递增之类的复杂的副作用操作

var elements = document.getElementsByTagName('*');

function toArray(list) {
    return Array.prototype.slice.call(list);
}

toArray(elements).forEach(function (element) {
    if (element.className === 'c') {
        element.addEventListener('click', function () {
            alert(this.className);
        });
    }
});

---

IE9+。如果您需要IE8或更低版本的支持，您可以使用像Lodash这样的库，它提供了forEach函数等。

var elements = document.getElementsByTagName('*'),
    i = 0;

while (elements[i]) {    
    if (elements[i].className == 'c') {
        elements[i].addEventListener('click', function (e) {
            alert(this.className)
        })
    }

    i++;
}

var elements = document.getElementsByTagName('*');

function toArray(list) {
    return Array.prototype.slice.call(list);
}

toArray(elements).forEach(function (element) {
    if (element.className === 'c') {
        element.addEventListener('click', function () {
            alert(this.className);
        });
    }
});