页面上任何图像的 javascript img src答案

【问题标题】：javascript img src for any image on the page页面上任何图像的 javascript img src
【发布时间】：2012-07-05 04:16:25
【问题描述】：

我是 JS 新手 - 还在学习。我正在寻找类似于this example的解决方案

用于使用 onclick 在警报中显示图像的源链接。但是，我想将其应用于页面上的 any 图像，并且任何图像上都没有 ID。或许这就是神秘的“this”的应用？谁能帮我？谢谢！

【问题讨论】：

【解决方案1】：

不，这与委托事件侦听器以及事件在 DOM 中传播的方式有关。

当您点击页面中的某个元素时，会生成一个click 事件。对于您的目的而言，此事件在元素上触发，并被您使用 onclick 定义的函数捕获。

但该事件也会“冒泡”到父级，并且它被那里定义的onclick 函数（如果有）捕获。然后到父级的父级，以此类推。

你现在要做的是在根元素上捕获事件，它是 document 对象本身，或者如果你仍然想使用 onclick 可能是 document.body 元素（已弃用)。

事件对象被传递给 onclick 函数，它包含触发事件的原始元素：

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

（e.target || e.srcElement 部分是因为在 IEtarget 属性称为srcElement。）这就是您定义委托事件侦听器的方式。如您所见，它不是在 <img> 元素上定义的，而是在它们的共同祖先上定义的。

但由于您只能以传统方式定义一个 click 事件侦听器，我强烈建议您使用更现代的方法，例如 addEventListener 方法，它允许您在同一元素上添加多个事件侦听器相同的事件类型：

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

在 Internet Explorer attachEvent，这非常相似但又不一样。对于跨浏览器解决方案，请使用常见的 JS 框架，如 jQuery、Prototype 或其他。

【讨论】：

我研究过'bubble up'，但仍然没有很好的掌握。我认为这意味着事件会向上浮动到可能的最高父元素并触发它在途中传递的每个元素！听起来你是在说我误解了，是吗？
不客气 - 很抱歉，如果我当时没有提供更多详细信息，我似乎错过了你的消息。

【解决方案2】：

如果我理解您的问题，这就是您的解决方案，

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

【讨论】：