Unexpected firing of change event in Javascript

Question

I am using url parameters to tell the backend how to sort my multiple lists on a page. The parameters are being set based on select blocks for each list(sortBy, orderBy). On page load I am setting the selects to match the parameters.

function setSortOptions()
{
    var select = document.getElementsByTagName("select"),
        qParams = getParameters();

    for (var i=0, l = select.length; i < l; i++)
    {
        var self = select[i],
            name = self.name,
            value = qParams[name],
            opt = self.options[value];

        if(opt) opt.selected = true;

        select[i].addEventListener("change", SortMyLists(event), false);
    }
}

With my current function the event listener is firing SortMyLists immediately. Why is this when I am changing the selected option before assigning the event listener?

You are executing SortMyLists(event) function, just put it as SortMyLists which is the reference to the function, event is passed automatically — juvian, Mar 18 '15 at 20:45

score 0 · Accepted Answer · answered Mar 18 '15 at 20:48

0

Don't execute the function. Just pass a reference to it:

select[i].addEventListener("change", SortMyLists`, false);

answered Mar 18 '15 at 20:48

bvaughn

13,300
45
46

Unexpected firing of change event in Javascript

1 Answers1