如何监听所有数组项

How do I listen on all array items?

本文关键字：数组 监听 何监听      更新时间：2023-09-26

我正在收集来自文档var listen = document.getElementsByTagName('img');的所有图像元素，这导致了一个数组。现在我必须指定listen[0]、listen[1]、listen[2]、listen[3]等来监听来自该数组的元素上的事件。问题是，是否有任何方法只是做一些像listen[any item from this array]，或一个函数。只是不需要手动指定要监听的每个元素。

例子

现在我必须这样做，对于每个数组项:listen[3].click = function() {};

根据您想要的内容和DOM的外观，您可能希望在DOM树的某个位置使用事件侦听器，而不是创建大量侦听器:

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

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

注意，我已经将事件侦听器附加到document，但是如果您可以使其更具体，您应该

对于一个合理的新浏览器，您可以使用Array.forEach:

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

或者"old 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;
}
相关文章：