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.

Answer 1

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 2

You can use the class too as a selector.

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

Then loop over these to attach event handlers.