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

Как передать объект на котором сработал ивент в функцию makeLineActive при его срабатывании для каждого из четырех объектов в массиве scrollElements?
  • 14 декабря 2023 г. 16:07
Ответы на вопрос 2
Для передачи элемента в функцию `makeLineActive` внутри `eventListener`, необходимо использовать функцию обратного вызова, которая будет вызываться при срабатывании события. В этой функции можно передать элемент, на котором произошло событие.

Пример реализации:

```javascript
// Создаем массив объектов
var scrollElements = [
  { id: 1, name: 'Элемент 1', element: document.getElementById('element1') },
  { id: 2, name: 'Элемент 2', element: document.getElementById('element2') },
  { id: 3, name: 'Элемент 3', element: document.getElementById('element3') },
  { id: 4, name: 'Элемент 4', element: document.getElementById('element4') }
];

function makeLineActive(element) {
  // Обработка события для переданного элемента
  console.log('Активный элемент:', element);
}

// Для каждого объекта в массиве scrollElements
scrollElements.forEach(function(item) {
  // Добавляем eventListener к элементу объекта
  item.element.addEventListener('click', function(event) {
    // Вызываем функцию makeLineActive с передачей элемента
    makeLineActive(item.element);
  });
});
```

В данном примере создается массив `scrollElements`, который содержит объекты с информацией об элементах страницы и их идентификаторами. Затем используется функция `forEach`, чтобы пройтись по каждому объекту массива `scrollElements`.

Для каждого объекта добавляется `eventListener`, который реагирует на событие клика. Внутри обработчика события вызывается функция `makeLineActive` с передачей элемента `item.element`, который был кликнут.

Таким образом, при клике на каждый из четырех элементов массива `scrollElements`, будет вызываться функция `makeLineActive` с передачей соответствующего элемента. Это позволит вам обработать событие для каждого объекта в массиве.
В обработчик события приходит, как ни странно, событие (event). У него есть параметр target ,
Похожие вопросы