Как изменяется переменная в цикле события?
Нашли кнопку, сохранили ссылку.
Запустили цикл. Появилась переменная i = 0;
    На клик по кнопке повесили функцию, которая КОГДА КЛИКНУТ на кнопку возьмет переменную i и выведет в консоль.
Цикл не закончился, переменная i = 1;
   На клик по кнопке повесили ЕЩЕ такую же функцию.
Цикл не закончился, переменная i = 2;
    На клик по кнопке повесили ЕЩЕ такую же функцию.
Цикл продолжается, но теперь i = 3, условие цикла дает false, цикл прекратился, но i = 3.
По кнопке кликнули....
Запустилась функция номер раз: ищет переменную i, находит, а там 3 -> в консоль ее.
Запустилась функция номер два: ищет переменную i, находит, а там 3 -> в консоль ее.
Запустилась функция номер три: ищет переменную i, находит, а там 3 -> в консоль ее.
ИТОГО: в консоли три тройки.
Это происходит потому что у тебя в начале проходит цикл до того момента пока i не становится равной 3, но при этом addEventListener не срабатывает (он работает только при клике). 
А когда ты кликаешь срабатывает addEventListener где i уже равно 3