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 中对其进行了简短的测试。）