如何监听所有数组项？

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