[__Alex__]

Переделал по аналогии, ожидаемо заработало, т.к. по сути стало равным закомментированному куску.

<div id='1'>1: X</div>
<div id='2'>2: X</div>
<div id='3'>3: X</div>
<div id='out'></div>

<script>
    function out(id) {
        return function() {
            document.getElementById('out').innerHTML += (id + ' ');
        }
    }

    function listener(id) {
        document.getElementById(id).addEventListener('click', out(id));
        /*
                а так работает корректно!!!:
                    document.getElementById(id).addEventListener('click', function() {
                        document.getElementById('out').innerHTML += (id + ' ');
                    });
        */
    }

    listener(1);
    listener(2);
    listener(3);

</script>

Но осталось не понятно, почему работает именно так, почему не работает в первом случае? Подскажите, что почитать, чтобы разобраться в этом вопросе.