javascript - 将 onclick 分配给整个班级

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 小提琴演示。

您的代码存在问题：

// '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 小提琴演示。

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 的文档和帮助。