How best to deal with looping and addEventListeners?

Question

My previous question - Why JavaScript alerts allways 4 in when for-loop is for 3? - shows that its extremly difficult to catch up with for-loops in JS for addEventListeners, so I came with a brute solution... How can I proper loop it and keep it easy to read for newbie?

document.getElementById('layerChangerOryginal').addEventListener('click', function() { Layer1() });
document.getElementById('layerChanger1').addEventListener('click', function() { Layer1() });
document.getElementById('layerChanger2').addEventListener('click', function() { Layer2() });
document.getElementById('layerChanger3').addEventListener('click', function() { Layer3() });

function Layer1() {
    document.getElementById('oryginalLayer1').className='container layer1';
    document.getElementById('oryginalLayer2').className='container layer2';
    document.getElementById('oryginalLayer3').className='container layer3';
}
function Layer2() {
    document.getElementById('oryginalLayer1').className='container layer3';
    document.getElementById('oryginalLayer2').className='container layer1';
    document.getElementById('oryginalLayer3').className='container layer2';
}
function Layer3() {
    document.getElementById('oryginalLayer1').className='container layer3';
    document.getElementById('oryginalLayer2').className='container layer2';
    document.getElementById('oryginalLayer3').className='container layer1';
}

It's hard to get for me. The best understanding for me is going to be when I showed you simple code Its working and ask how to improve it. — Szymon Toda, Sep 13 '12 at 21:05
Why don't you use one of the solutions from your earlier question? I know closures are not easy for newbies, but if you're going to do much Javascript you need to learn about them. — Barmar, Sep 14 '12 at 00:32

score 2 · Accepted Answer · answered Sep 14 '12 at 00:38

2

for (var i = 1; i <= 3; i++) {
  document.getElementById('layerChanger'+i).addEventListener('click', window['Layer'+i]);
}

This works because any top-level function or variable named name is the value of window[name].

answered Sep 14 '12 at 00:38

Barmar

741,623
53
500
612

João Paulo Macedo · Answer 2 · 2012-09-14T21:12:31.307

Here's a solution using loops:

var a, i, j,
    eventFunc, 
    args_list = [[1, 2, 3], [3, 1, 2], [3, 2, 1]],

    str1 = 'container layer',
    str2 = 'oryginalLayer',
    byId = function(x) {
        return document.getElementById(x);
    };


for (i = 1; i < 4; ++i) {
    eventFunc = function() {
        for (j = 1; j < 4; ++j) {
            byId(str2 + j).className = str1 + args_list[i][j];
        }
    };

    byId('layerChanger' + i).addEventListener('click', eventFunc, false);

    if (i === 1) {
        byId('layerChangerOryginal').addEventListener('click', eventFunc, false);
        ++i;
    }
}

Seems a little bit more complicated than the equivalent code below:

var str = 'container layer',
    byId = function (x) {
        return document.getElementById(x);
    },

    createLayerFunc = function ( a, b, c ) {
        return function LayerX(x) {
            byId('oryginalLayer1').className = str+a;
            byId('oryginalLayer2').className = str+b;
            byId('oryginalLayer3').className = str+c;
        };
    },

    Layer1 = createLayerFunc(1, 2, 3),
    Layer2 = createLayerFunc(3, 1, 2),
    Layer3 = createLayerFunc(3, 2, 1);


byId('layerChangerOryginal').addEventListener('click', Layer1, false);
byId('layerChanger1').addEventListener('click', Layer1, false);
byId('layerChanger2').addEventListener('click', Layer2, false);
byId('layerChanger3').addEventListener('click', Layer3, false);

How best to deal with looping and addEventListeners?

2 Answers2