Question

我有一张图片列表我想在我的页面上的任何“img”上监听点击操作或悬停操作，无论ID如何。我想使用常规的javascript并且对现代浏览器友好。

我做了很多研究和阅读，但我还没有找到解决方案。我在想我的代码可能看起来像这样，但我不是肯定的：

var allimg = document.getElementsByTagName('img');
for(var i = 0; i < allimg.length; ++i) {
   // do something
}

如何添加onlick，我是否需要将其作为pageload上的函数调用？如何点击javascript对所有img标签做出反应？

Answer 1

使用事件委托：

document.getElementsByTagName('body')[0].onclick = function (event) {
    if (event.target.nodeName === "IMG") {
        console.log('do something');
    }
}

Fiddle

Answer 2

你有可能拥有jQuery吗？如果是的话......

$(img).on('click',function(e){
  console.log('rad')
});

否则..你走在正确的轨道上。未经测试，但这应该让你在那里......

function clickHandler(e){
  console.log('I love goats')   
}

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

Answer 3

无需为每个元素添加侦听器。在循环中尝试这个。 allimg[i].onclick/onmouseover = function(){//your code}

OnClick或OnHover事件在javascript中收听所有IMG

3 个答案: