javascript - 页面上任何图像的 javascript img src

Question

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

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

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<9target中调用了该属性srcElement。）这就是您定义委托事件侦听器的方式。<img>如您所见，它不是在元素上定义的，而是在它们的共同祖先上定义的。

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

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

在 Internet Explorer <9 中，您必须使用attachEvent，它非常相似但不一样。对于跨浏览器解决方案，请使用常见的 JS 框架，如 jQuery、Prototype 或其他任何东西。

score 0 · Accepted Answer

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

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

2 回答 2