Слайдер, как заменить onclick на addEventListener?

Question

[Вадим В]

Небольшой вопрос, если я не хочу вешать обработчик события onclick в html, а хочу использовать addEventListener вот в этом примере https://codepen.io/VadimVeksler/pen/pmxYZY, как мне привязать нужный слайд к точкам внизу, которые переключают слайды - onclick="currentSlide(1)" здесь передается в функцию обработчик номер слайда. Как мне такое провернуть с addEventListener, как сказать какой слайд нужно отобразить?

Сделал вот так, есть может более интересный способ?
const dots = document.querySelectorAll(".dot");

dots.forEach((item, index) => {
  item.addEventListener("click", e => {
    currentSlide(index + 1)
  })
})

Comments

[Одиночка Айс]

Например, вычислив index элемента в массиве

Answer 1

[Анатолий Чернышев]

Как вариант можно задавать значения в дополнительных атрибутах, и потом при срабатывании события их считывать

<h1 data_elem="1">link</h1>

var elem = document.querySelector('h1')
elem.addEventListener('click', function(e) {
  console.log(e.target.getAttribute('data_elem'))
})

Comments

[Вадим В]

Тоже об этом думал, но вот owl corusel библиотека так не работает. На элементах нет никаких data-set атрибутов, как-то через JS связывает слайды с контролс

[Анатолий Чернышев]

reyzele, Ну или как вариант, это считывание порядкового номера элемента в массиве выборок.

Answer 2

[Шохрух Шаймардонов]

elem.addEventListener('click', function(arg) {
    //Your code is here...
});