IGS

IGS
Вернуться к Курс

Базовый курс JavaScript

0% Завершено
0/25 Шагов
  1. 1) console.log(), Переменные
  2. 2) Типы данных, Операторы
  3. 3) Условные конструкции
  4. 4) Объекты, массивы
  5. 5) Циклы
  6. 6) Функции. Диалоговые окна
  7. 7) Результат функции. Стрелочная фукция
  8. 8) callback, find, filter
  9. 9) Введение в методы и свойства
  10. 10) Методы строк и чисел
  11. 11) Методы массивов
  12. 12) Работа с DOM
  13. 13) Элементы,HTMLCollection и NodeList
  14. 14) Создание, добавление, замена и удаление элементов. Управление атрибутами элементов. Свойство className
  15. 15) addEventListener()
  16. 16) window, event
  17. 17) Работа с формами
  18. 18) Таймеры. this
  19. JSON
  20. 19) Обработка ошибок
  21. 20) JSON, Promise, async и await
  22. 21) callBack()
  23. 22) fetch
  24. 7) Взаимодействие с DOM (Document Object Model)
  25. 23) LocalStorage, sessionStorage
Базовый курс JavaScript 15) addEventListener()
В прогрессе
Урок 15 из 25
В прогрессе

15) addEventListener()

Метод .addEventListener() позволяет назначать функцию (обработчик события) определенному событию на элементе DOM (объекте веб-страницы). Это мощный инструмент, который позволяет реагировать на различные действия пользователя, такие как клики мышью, наведение курсора, ввод текста и многое другое.

Синтаксис .addEventListener() выглядит следующим образом:

				
					element.addEventListener(eventType, handler, options)
  • lement — любой HTMLElement на странице.
  • eventType — строка, содержащая название события. Наиболее популярные события 'click', 'change', 'submit', 'keydown', 'keyup', 'mousemove', 'mouseenter', 'mouseleave'.
  • handler — функция, которая будет вызвана, когда событие произойдёт.
  • options/capture — необязательный параметр, который описывает дополнительные свойства для срабатывания события.
    • capture — включает или выключает захват события элементом, на который установлен обработчик. Это значит, что событие сначала сработает на элементе и только потом сработает на всех вложенных элементах. Принимает значение true или false
    • options: { capture: bool, passive: bool, once: bool } — при передаче объекта аргумент будет распознан как объект настроек, так можно установить больше параметров.
      • passive – говорит о том, что внутри handler никогда не будет вызвана функция event.preventDefault(), если функция event.preventDefault() все-таки вызвана, браузер должен её игнорировать и выводить предупредительное сообщение в консоль.
      • once – включает автоматическую отписку от события после первого срабатывания.