OnClick或OnHover事件监听javascript中的所有IMG

Question

I have a list of images I would like to listen for click actions or hover actions on any "img" on my page regarless of ID. And I want to use regular javascript and be friendly with modern browsers.

I have done a lot of research and reading but I have yet to find a solution. I am thinking that my code might look something like this but I'm not positive:

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

How do I add onlick to this, do I need to call it as a function on pageload? how do I have the javascript react to all img tags when clicked?

Answer 1

Use event delegation:

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

Fiddle

Answer 2

any chance you might have jQuery? If so...

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

otherwise.. you are on the right track. Untested but this should get you there...

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

No use adding listeners to every element. Try this inside your loop. allimg[i].onclick/onmouseover = function(){//your code}