javascript - 将 onclick 分配给整个类(class)

Question

我正在尝试将事件处理程序附加到具有特定 div 的所有元素上。我创建了一个 jsfiddle 显示我的代码示例。有人可以指出我正确的方向吗？

http://jsfiddle.net/nw4Xs/

var l = document.getElementsByClassName("item").Length;
var foo = function () { alert("foo"); };
for (var i = l - 1; i >= 0; i--) {
    document.getElementsByClassName("item")[i].onclick = foo();
}

请不要使用 jquery 答案

谢谢

Answer 1

我建议(除非您明确需要反向迭代):

var els = document.getElementsByClassName('item'),
    l = els.length,
    foo = function () { alert("foo"); };

for (var i = 0; i< l; i++) {
    els[i].onclick = foo;
}

JS Fiddle demo .

您的代码存在问题:

// 'Length' should be 'length':
var l = document.getElementsByClassName("item").Length;
var foo = function () { alert("foo"); };

// since you're not changing the class-name there's no need to
// go in reverse (it's just confusing to read):
for (var i = l - 1; i >= 0; i--) {
    // you're re-querying every iteration (plus when you're getting the length), why?
    // keeping the parentheses assigns the (non-existent) return value of the function,
    // instead of binding the function to the 'click' event:
    document.getElementsByClassName("item")[i].onclick = foo();
}

顺便说一句，您可以将事件处理程序绑定(bind)到最近的祖先元素，该元素包含您希望在单击时产生效果的所有元素(注意:使用存在的最近祖先在事件绑定(bind)时的 DOM 中，在本例中是 body，因为没有其他包装元素，在大多数情况下都会有，并且应该使用最接近的元素以避免事件必须一直冒泡到“顶部”):

var bindTarget = document.body, // use the closest wrapping element
    foo = function (e) {
        var e = e || window.event,
            clicked = e.target || e.srcElement;
        if (clicked.className.indexOf('item') > -1) {
            alert("foo");
        }
    };

bindTarget.onclick = foo;

JS Fiddle demo .