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

または「オールドスクール」（さらに読みやすいかもしれません）：

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

HTMLCollection.length1 回だけ読み取ると、速度が向上します。遅くなることはありません。

反復ごとに 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 に答える