javascript - OnClick 或 OnHover 事件侦听 JavaScript 中的所有 IMG

Question

我有一个图像列表，我想在我的页面上的任何“img”上收听点击操作或悬停操作，无论 ID 是什么。我想使用常规的 javascript 并与现代浏览器友好。

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

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

如何将 onlick 添加到此，我是否需要在页面加载时将其作为函数调用？点击时如何让 javascript 对所有 img 标签做出反应？

Answer 1

使用事件委托：

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

小提琴

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}