<span class="slider-nav__dot"></span>
<span class="slider-nav__dot"></span>
<span class="slider-nav__dot"></span>var dots = document.getElementsByClassName('slider-nav__dot');
for (var i = 0; i < dots.length; i++) {
(function (index) {
dots[index].addEventListener("click", function () {
console.log(index);
})
})(i);
}
// получаем массив элементов с именем класса 'slider-nav__dot'
var dots = document.getElementsByClassName('slider-nav__dot');
// перебираем в цикле все элементы из массива
for (var i = 0; i < dots.length; i++) {
// ВНИМАНИЕ!!!!
// создаем анонимную, само вызывающуюся функцию
// в качестве параметра ей передается i
(function (index) {
// ВНИМАНИЕ!!!!
// внутри этой функции переданный ей i уже index.
// И если i на всех итерациях это одна и та же переменная с разными значениями
// то переменная index является самостоятельной переменной,
// со своим уникальным значением в каждой итерации цикла
// создаем функцию-слушатель события "click" она существует (ее время жизни)
// до тех пор пока не будет удалена из слушателей.
// Внутри нее используется переменная index объявленная вовне
// создавая тем самым ЗАМЫКАНИЕ. То есть для каждой итерации цикла
// переменная index не будет удалена после завершения итерации
// а будет продолжать жить как замыкание пока жива функция-слушатель ее использующая
dots[index].addEventListener("click", function () {
console.log(index);
})
})(i);
}
Средний
Простой