javascript - 避免在 JS 中分配事件处理程序的循环

Question

我有这段代码，我在其中尝试使用 classList 和 querySelector 等 JS 函数，但由于处理程序的循环等原因，它最终变得非常冗长:

var cg = document.querySelectorAll('.control-group'),
    cgL = cg.length;

while (cgL--) {
    var _cg = cg[cgL],
        inputs = _cg.querySelectorAll('input'),
        i = 0;

    for (l = inputs.length; i < l; i++) {
        inputs[i].addEventListener('focus', focus, false);
        inputs[i].addEventListener('blur', focus, false);
    }

    function focus() {
        _cg.classList.toggle('focus');
    }
}

fiddle :http://jsfiddle.net/YGeh5/3/

有什么方法可以避免循环 NodeList 来为它的每个元素分配事件处理程序吗？

Answer 1

你可以使用 Array.forEach() .但是由于您返回了一个 NodeList，并且其原型(prototype)中没有 forEach()，因此您需要使用 .call 并将其作为上下文提供。

然而，it's ES5. Most modern browsers have it though .另外，the polyfill is also a loop ，只是从你那里抽象出来。

Here's your code ，几乎直接转换为使用 forEach():

var cg = document.querySelectorAll('.control-group');

Array.prototype.forEach.call(cg, function (group) {
  var inputs = group.querySelectorAll('input');

  function focus() {
    group.classList.toggle('focus');
  }

  Array.prototype.forEach.call(inputs, function (input) {
    input.addEventListener('focus', focus, false);
    input.addEventListener('blur', focus, false);
  });

});