Question

我正在收集文档var listen = document.getElementsByTagName('img');中的所有图像元素，这会导致数组。现在，我必须指定listen[0]，listen[1]，listen[2]，listen[3]等来侦听此数组中元素的事件。问题是有没有办法像listen[any item from this array]或函数那样做。只是不必指定要手动监听的每个元素。

实施例

现在我必须为每个数组项执行以下操作： listen[3].click = function() {};

提前谢谢大家的帮助！

Answer 1

根据您想要的内容以及DOM的外观，您可能希望在某个地方的DOM树上使用事件侦听器，而不是创建大量侦听器：

document.addEventListener('click', function(e) {
    if (e.target.nodeName !== 'IMG') {
        return;
    }

    alert('img clicked');
});

演示：http://jsfiddle.net/APSMT/1/

请注意，我已将事件监听器附加到document，但如果您可以将其更具体，则

Answer 2

使用合理的新浏览器，您可以使用Array.forEach：

[].forEach.call(document.getElementsByTagName('img'), function (img) {
    el.addEventListener('click', callback);
});

或“旧skool”（甚至可能更好阅读）：

var imgs = document.getElementsByTagName('img');
for (var i = 0, len = imgs.length; i < len; ++i) {
    imgs[i].addEventListener('click', callback);
}

只读一次HTMLCollection.length可以加快速度。它永远不会慢。

您不应为每次迭代创建一个Function对象：

// Don't
for (...) {
    img[i].onclick = function () { ... }
}

// Do
function onclick () {
     // `this` will be img[i]
}
for (...) {
    img[i].onclick = onclick;
}

我如何收听所有数组项目？

实施例

2 个答案: