Метод addEventListener
Добавить в избранное
Метод addEventListener позволяет назначить на элемент обработчики событий. С его помощью, можно указать, например, что делать при клике по кнопке, или что делать при наборе текста в текстовом поле.
Вот список самых часто используемых DOM-событий.
События мыши:
click - происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
contextmenu - происходит, когда кликнули на элемент правой кнопкой мыши.
mouseover / mouseout - когда мышь наводится на / покидает элемент.
mousedown / mouseup - когда нажали / отжали кнопку мыши на элементе.
mousemove - при движении мыши.
dblclick - Сделан двойной щелчок.
События на элементах управления:
submit - пользователь отправил форму <form>.
change - Содержимое элемента изменилось (срабатывает в том числе, если изменились значение атрибутов).
select - Текст или дочерние элементы выделены.
focus - Элемент получил фокус. К примеру, клик по текстовому полю даёт на него фокус и можно набирать текст
blur - Элемент потерял фокус.
load - Завершена загрузка страницы в браузере.
DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен.
unload - Страница в браузере закрывается или происходит переход на другую страницу по ссылке.
scroll - Происходит прокрутка страницы или элемента.
Клавиатурные события:
keydown - Зажата кнопка на клавиатуре.
keypress - Тоже что и "keydown", но и кнопка зажимается настолько долго, что происходит повторный набор символа.
keyup- Была отпущена нажатая кнопка.
CSS events:
transitionend – когда CSS-анимация завершена.
Существует множество других событий по надобности вы сможете с ними ознакомится на разных ресурсах.
Синтаксис
элемент.addEventListener('тип события', функция);
Пример 1
Сделаем так, чтобы при клике на кнопку выводилось сообщение:
let button = document.querySelector('#button');
button.addEventListener('click', function() {
alert('message');
});
можете с копировать и вставить в свои файлы и проверить.
Пример 2
Сделаем так, чтобы при потери фокуса в инпуте выводилось сообщение, содержащее текст этого инпута:
let input = document.querySelector('#input');
input.addEventListener('blur', function() {
alert(this.value);
});
можете с копировать и вставить в свои файлы и проверить.