javascript - ページ上の任意の画像のjavascriptimgsrc

Question

私はJSの初心者です-まだ学んでいます。この例に似た解決策を探しています

onclickを使用してアラートに画像のソースリンクを表示します。ただし、ページ上の任意の画像に適用したいので、どの画像にもIDがありません。おそらくこれは神秘的な「これ」のアプリケーションですか？誰か助けてもらえますか？ありがとう！

score 0 · Accepted Answer

私があなたの質問を理解しているなら、これはあなたの解決策です、

var img = document.getElementsByTagName('img');
for(var i=0;i<img.length;i++){
    alert(img[i].src);
}

score 0 · Accepted Answer

いいえ、これはデリゲートイベントリスナーと、イベントがDOM全体に広がる方法と関係があります。

ページ内の要素をクリックすると、clickイベントが生成されます。目的にとって重要なことですが、このイベントは要素に対して発生し、で定義した関数によってキャッチされますonclick。

ただし、イベントは親にも「バブルアップ」し、onclickそこで定義されている関数がある場合はそれによってキャッチされます。そして、親の親に、というように続きます。

今、あなたがしなければならないことは、documentオブジェクト自体であるルート要素、またはdocument.bodyまだ使用したい場合は要素onclick（非推奨）でイベントをキャッチすることです。

イベントオブジェクトはonclick関数に渡され、イベントを発生させた元の要素が含まれています。

document.body.onclick = function(e) {
    var tgt = e.target || e.srcElement;
    if (tgt.tagName === "IMG")
        alert(tgt.src);
}

（これe.target || e.srcElementは、IE <9ではtargetプロパティが呼び出されるためsrcElementです。）これが、デリゲートイベントリスナーを定義する方法です。<img>ご覧のとおり、要素ではなく、共通の祖先で定義されています。

ただし、従来の方法では1つのイベントリスナーしか定義できないため、同じイベントタイプの同じ要素に複数のイベントリスナーを追加できるメソッドclickなど、より新しいものを使用することを強くお勧めします。addEventListener

document.body.addEventListener("click", function(e) {
    ...
});

Internet Explorer <9ではattachEvent、を使用する必要があります。これは非常に似ていますが、同じではありません。クロスブラウザソリューションの場合は、jQueryやPrototypeなどの一般的なJSフレームワークを使用します。

2 に答える 2