Question

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

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();
}

顺便提一下，您可以将事件处理程序绑定到最近的祖先元素，该元素在您单击时包装您希望产生效果的所有元素（注意：使用存在的最近的祖先在事件绑定时的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

Answer 2

您想要的NodeList（getElementByClassName()返回）的属性为length（小写）。

要传递对函数的引用，只需使用其名称;不要在它后面添加括号。否则，您正在调用该函数并分配或传递其返回值。

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

Answer 3

您可以在Array.prototype.forEach

的结果上致电document.getElementsByClassName("item")

var foo = function () { alert('foo'); };

Array.prototype.forEach.call(document.getElementsByClassName('item'), function ( item ) {
    item.addEventListener('click', foo);
});

小提琴： http://jsfiddle.net/nw4Xs/7/

Answer 4

如果您对使用jQuery感兴趣，可以更简单地编写它。虽然没有必要，但是当你想要做更多的事情时，它可能会为你节省很多时间。在基础层面：

function foo...

$(".item").click(foo);

这将获得具有“item”类的所有DOM元素，并将foo附加到click事件。如果您有兴趣，有很多文档和使用jQuery的帮助。

将onclick分配给整个班级

4 个答案: