0

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

例子

现在我必须为每个数组项做这样的事情： listen[3].click = function() {};

4

2 回答 2

3

根据您想要的以及 DOM 的外观，您可能希望在 DOM 树的某个位置使用更高的事件侦听器，而不是创建很多侦听器：

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

    alert('img clicked');
});

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

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

于 2013-04-02T22:34:00.220 回答
1

使用合理的新浏览器，您可以使用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;
}
于 2013-04-02T22:24:23.130 回答