如何監聽所有數組項？

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