Как получить индекс элемента при клике?

Вариант 1 (плохой, но очевидный):

dots.forEach(function(dot, i) {
    dot.addEventListener("click", function() {
        console.log(i);
    });
});

Плох он тем, что приходится навешивать слишком много (а точнее, неоправданно много) обработчиков.

Вместо foreach() можно, разумеется, воспользоваться и простым циклом:

var i, length = dots.length;
for (i = 0; i < length; i++) {
    dots[i].addEventListener("click", function() {
        console.log(i);
    });
}

Вариант 2 (получше):

Для его реализации необходимо обернуть необходимые элементы в родительский элемент, своего рода "контейнер" (предположим, у него id = cont).

Тогда можно навесить один обработчик события на этот контейнер:

var cont = document.getElementById("cont");
cont.addEventListener("click", function(event) { // навешиваем один обработчик на родительский элемент
    console.log(dots.indexOf(event.target)); // в свойстве `target` будет содержаться непосредственно тот элемент, по которому кликнули
});

Но в этом случае придется искать индекс элемента в массиве отдельно (метод indexOf()).

Также стоит помнить, что искомого элемента в массиве может не быть (кликнули не на элемент с классом dot), а куда-нибудь мимо (но все еще в пределах родительского блока). В этом случае стоит сразу проверить, есть ли элемент в массиве, а затем уже выводить его индекс, если элемент найден - стандартная процедура:

cont.addEventListener("click", function(event) {
    var index = dots.indexOf(event.target);
    if (~index) {
        console.log(index);
    }
});