Avoid loops for assigning event handlers in JS
<p>I have this code, in which I'm trying to embrace JS functions like <code>classList</code> and <code>querySelector</code> but it ends up being very verbose due to loops etc for handlers:</p>

<pre><code>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 &lt; l; i++) {
        inputs[i].addEventListener('focus', focus, false);
        inputs[i].addEventListener('blur', focus, false);
    }

    function focus() {
        _cg.classList.toggle('focus');
    }
}
</code></pre>

<p>Fiddle: <a href="http://jsfiddle.net/YGeh5/3/" rel="nofollow">http://jsfiddle.net/YGeh5/3/</a></p>

<p>Is there any way to avoid having to loop around a NodeList to assign an Event Handler to each of it's elements?</p>
