Adding event listeners to multiple elements

Question

I've been struggling with this for a good couple of hours now.

I want to add an event listener to all <select>s on a page and I've got this piece of code so far:

onload = function(e) {
    sels = document.getElementsByTagName('select');
    for(i=0; i<sels.length; i++) {
        sels[i].addEventListener('change', alert('test!'), false);
    }
}

This only triggers the alert when the page is loaded and not when I change the value in any of my <select>s.

Can I get a nudge in the right direction, please? :-)

Answer 1

Aside from wrapping the alert in a function, like mentioned before, don't use getElementsByTagName for every iteration of the loop:

onload = function(e) {
    sels = document.getElementsByTagName('select');
    for(i=0; i<sels.length; i++) {
        sels[i].addEventListener('change', function(){alert('test!')}, false);
    }
}

You have the list of select elements saved to a variable, it's not necessary, not to mention inefficient to get all these elements, each loop iteration.

Answer 2

I created the following simple function, which iterates over all of the elements that match the selector, and add an event listener for the event with the passed handler.

This is similar functionality for jQuery's $(selector).on(event, handler)

function addEventListeners(selector, event, handler, useCapture){

    useCapture = useCapture || false;

    Array.prototype.forEach.call(
        document.querySelectorAll(selector)
       ,function(el, ix) { 
          el.addEventListener(event, handler, useCapture);
        }
    );
}

So for the OP the way to use this function would be like so:

addEventListeners("select", "change", function(evt){ console.log(evt); });

See also my answer for Event listener for current and future elements

Answer 3

You need to have there anonymous function for that as you invoke alert() function immediately in your example:

 ... .addEventListener('change', function() { alert('test!')}, false ...

For now according to your code addEventListener tries to add result of undefined (return of alert() function).

Or you can just pass function handler for that:

function alertMe() {
    alert( 'test!' );
}
...

... .addEventListener('change', alertMe, false ...

Note: that by making somefunction(arg[, arg...]) call you reference not to function, but to what function returns.