javascript - Add Event Listener to Collection of HTML Elements

Question

I know that getElementsByTagName and getElementsByClassName need an index identifier in order for the objects to be bound to an event listener.

So the question is, how do I add an event listener to a collection of HTML elements found using getElementsByTagName or getElementsByClassName?

<input class="inputs" type="submit" value="Hello" />
<input class="inputs" type="submit" value="World" />

var inputElem = document.getElementsByTagName('input');
inputElem.addEventListener('click', function(){
    alert(this.value);
}, false);

I know how to do this in jQuery, but I want to know how to do it with pure JS.

Answer 1

Adding eventlistener to each of them is not advisable. May be this can help:

http://jsfiddle.net/b8gotLL6/

document.getElementById('parent').addEventListener('click', function(e){
alert(e.target.value);
})

And if you only want to do using getElementsByTagName or getElementsByClassName, then i guess you need to iterate for the array returned.