javascript - Javascript - ユーザーが Facebook の画像をクリックしたときにリッスンする方法は?

Question

ユーザーが Facebook ニュースフィードの画像をクリックして何かを行うときに、関数を起動する効果的な方法を知りたいです。

各画像にリスナーを追加できますが、これはあまり効果的ではありません。その他の方法で？

Answer 1

このようなものはどうですか：http：//jsfiddle.net/c24w/DJ2ax/4/

HTML

<div id="newsfeed">
    <img src="http://i46.tinypic.com/2cos8hw.png" id="1">
    <img src="http://i46.tinypic.com/2cos8hw.png" id="2">
    <img src="http://i46.tinypic.com/2cos8hw.png" id="3">
    <div><a href="#">Something else clickable</a></div>
</div>

JavaScript

var newsfeed = document.getElementById('newsfeed');

newsfeed.onclick = function handleNewsfeedClick(e) {
    var el = e.srcElement;
    if (el.tagName === 'IMG') {
        console.log('Clicked image ' + el.id);
    }
};

これは、クリックイベントリスナーをニュースフィードにアタッチすることです。ニュースフィードの子要素をクリックすると、イベントはニュースフィードまで伝播し、クリックリスナーによってキャッチされます。次に、クリックイベントのソースが画像であったかどうかを確認します。

出力はブラウザのコンソールに送られます。（Chromeで簡単にテストしました。）