将事件侦听器添加到HTML元素集合

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

It's pretty simple like @Rutwick Gangurde said. Once you get the elements you just need to loop through and attach the event.

var inputElem = document.getElementsByTagName('input');

for(var i = 0; i < inputElem.length; i++) {

    inputElem[i].addEventListener('click', function(){
        alert(this.value);
    }, false);
}

Here it is in a fiddle: http://jsfiddle.net/wm7p0a77/

Answer 2

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.

Answer 3

Try querySelectorAll method.

var inputElem = document.querySelectorAll('input');

Which returns a NodeList and you can loop through the array to add the event listeners.

Answer 4

you can try like this:first get all the element of the particular type the loop through it.

 var elems = document.getElementsByClassName('inputs'); for(var i = 0; i < elems.length; i++) { elems[i].addEventListener('click', function(){ alert(this.value); }, false); } 

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

Answer 5

You can use the class too as a selector.

var elems = document.getElementsByClassName('inputs');

Then loop over these to attach event handlers.

Answer 6

var i=0, inputElem = document.getElementsByTagName('input'), len = inputElem.length;    
while(i < len){
  inputElem[i].addEventListener('click', function(){
      alert(this.value);
  }, false);
 i++;
}

Answer 7

You can use delegates to implement this. Get hold of a parent element to these inputs and add an event listener to that parent element. This way you will be just attaching one event and make use of event bubbling to accomplish your task. In that event listener, you might have to check the target of the event and if that target equals the input element, you can run your logic inside this condition.

You can do something like this in your event handler function.

// ...
// get event and source element e = e || window.event;
src = e.target || e.srcElement;
if (src.nodeName.toLowerCase() !== "input") {
    return; 
}
// ...

Answer 8

First, use getElementsByClassName, instead of getElementsByTagName. Then Loop through them, adding the event listener like this:

var inputElem = document.getElementsByClassName('inputs');
var i;
for (i = 0; i < inputElem .length; i++) {
    inputElem [i].addEventListener('click', (function(i) {
        return function() {
           alert(this.value);
        };
    })(i), false);
}

Here it is on jsfiddle