如何在JavaScript中获取图像URL onmouseover？

Question

我试图在鼠标悬停时通过纯JavaScript获取任何图像的src。

// Retrieve image URL.
document.getElementsByTagName('img').onmouseover = getURL();

function getURL() {
    var URL = this.getAttribute('src');
}

我无法将任何这些图像绑定到ID，只能绑定到getElementById。我必须得到任何图像，而无需修改DOM和没有jQuery。貌似getElementsByTagName可以获得一个数组。我该如何使这个功能起作用？感谢。

Answer 1

.getElementsByTagName()返回一个数组的节点列表。您必须为每个图像添加事件处理程序或使用event delegation。

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

Answer 2

由于它返回一个数组，因此必须指定要获取的数组索引。这应该将onmouseover函数应用于页面上的第一个img标记。

// Retrieve image URL.
document.getElementsByTagName('img')[0].onmouseover = getURL;

function getURL() {
    var URL = this.getAttribute('src');
}

并将其应用于页面上的所有图像：

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