Как получить id элемента используя addEventListener и getElementsByClassName?

Question

[Zobakka]

Добрый день

Направьте пожалуйста мою голову в нужную сторону.

Мне нужно было получить номер конкретного id элемента из HTML коллекции, полученной при помощи getElementsByClassName, на котором произошло событие, в моем случае - onclick.

Я нашел рабочий ответ, но не могу понять, как он работает.

Вот код, что есть был у меня. Мне надо было определить на каком из span был сделан клик.

<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);
}

Answer 1

[Роман]

// получаем массив элементов с именем класса '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);


}

Answer 2

[Stalker_RED]

Или так:

Comments

[Роман]

Не стал приводить свои варианты, потому что вопрос был о том как работает именно тот вариант. Но вы правы, ваш по симпатичнее и хаков меньше (только замыкание, которое и не хак вовсе:)

Так же можно было в цикле фор сделать так


или так