Чтобы приложение было интерактивным, нам нужно понимать, что пользователь совершил то или иное действие на странице. Браузер распознает действия пользователя и создаёт событие.
События — это сигналы, которые браузер посылает разработчику, а разработчик может на сигнал реагировать. По аналогии со светофором: видим зелёный свет, едем дальше 🚦
События бывают разных типов: клик, нажатие клавиши на клавиатуре, прокрутка страницы и так далее. Происходящие события можно обрабатывать и выполнять код, когда нужное событие происходит. Например, при клике на кнопку показывать всплывающее окно.
Как пишется
Существует два способа обработать события:
- с помощью
on-свойств DOM-элементов; - методом
addEventListener().
on-свойства DOM-элементов
Большинство событий связаны с DOM-элементами. Если пользователь кликнул на кнопку, то событие click связано с конкретным DOM-элементом — кнопкой, на которой кликнул пользователь.
Каждый DOM-элемент имеет большой набор свойств, которые начинаются на on:
onclick;onscroll;onkeypress;onmouseenter;- и так далее.
Если в это свойство записать анонимную функцию, то эта функция будет вызываться каждый раз, когда браузер будет создавать событие, связанное с этим элементом. Такие функции называют функциями-обработчиками события.
const buttonElement = document.getElementById('change')
const squareDiv = document.getElementById('square')
// чтобы реагировать на нажатие кнопки, записываем функцию в свойство onclick.
// Эта функция будет вызываться при каждом нажатии на кнопку. Часто говорят,
// что эта функция обрабатывает событие
buttonElement.onclick = function() {
squareDiv.style = `background-color: ${getColor()};`
}
function getColor() {
const colors = [
'#49A16C', '#064236',
'#ED6742', '#F498AD',
'#1A5AD7', '#AFC9DA',
'#FFD829', '#282A2E',
'#5E6064', '#E6E6E6'
]
return colors[Math.floor(Math.random() * colors.length)]
}Чтобы перестать обрабатывать событие, нужно записать в свойство значение null.
Метод addEventListener()
🤖 Если обрабатывать события с помощью on-свойств, то получится добавить только одну функцию-обработчик на каждый элемент. Часто одного обработчика недостаточно. Чтобы не создавать ограничение на пустом месте, используют альтернативный метод подписки на события — метод addEventListener().
Метод вызывается у DOM-элемента. Аргументами нужно передать тип события (справочная информация) и функцию, которую нужно выполнить:
const buttonElement = document.getElementById('change')
const squareDiv = document.getElementById('square')
// чтобы реагировать на нажатие кнопки, подписываемся на событие click и передаем
// функцию-обработчик. Эта функция будет вызываться при каждом нажатии на кнопку
buttonElement.addEventListener('click', function() {
squareDiv.style = `background-color: ${getColor()};`
})Как понять
Функция-обработчик
Функция-обработчик, или просто обработчик, — это функция, которая вызывается браузером при наступлении события.
При вызове браузер передаёт в обработчик объект события с помощью аргумента.
Объект события — это JavaScript-объект с информацией о событии. В объекте события есть как общие свойства (тип события, время события), так и свойства, которые зависят от типа события (например, на какую кнопку нажал пользователь).
Чтобы работать с объектом события, нужно добавить параметр в объявление обработчика. Обработаем нажатие на кнопки клавиатуры и получим из объекта события информацию о нажатой кнопке:
window.addEventListener('keydown', function (event) {
// используем объект события, чтобы получить информацию о нажатой клавише
alert(`Вы нажали на кнопку: ${event.key}`)
})Помимо объекта события, внутри функции можно использовать ключевое слово this. Оно позволяет получить DOM-элемент, на котором сработал обработчик. Это позволяет создать обработчик один раз, но привязать её к нескольким DOM-элементам.
Например, мы объявим обработчик в виде именованной функции и повесим её на нажатие нескольких кнопок. При клике на кнопку будем менять её цвет:
function changeColor() {
// меняем цвет кнопки, на которой произошло событие. кнопка доступна с помощью
// ключевого слова this
this.style = `background-color: ${getColor()};`;
};
const buttons = document.getElementsByTagName('button');
for (let i = 0; i < buttons.length; ++i) {
const button = buttons[i];
// к каждой кнопке привязываем обработчик
button.addEventListener('click', changeColor); // обратите внимание, что мы не вызываем
// функцию changeColor, а только пишем ее имя
}Всплытие событий
Подробнее: 0009 Всплытие и погружение событий
Рассмотрим пример. У нас есть <div> элемент, в который вложено видео. Мы подписались на события click как на <div>, такч и на <video>. Если событие происходит на <div>, то мы меняем его цвет на случайный из списка. Если событие происходит на <video>, то мы запускаем видео. Попробуйте кликнуть на коробку:
const container = document.getElementById('container')
const video = document.getElementById('cat')
// обрабатываем событие click на <div>
container.addEventListener('click', function() {
const colors = ['#49A16C', '#064236', '#ED6742', '#F498AD', '#1A5AD7', '#AFC9DA',
'#FFD829', '#282A2E', '#5E6064']
const randomColorIndex = Math.floor(Math.random() * colors.length)
container.style = `background-color: ${colors[randomColorIndex]}`
});
// обрабатываем событие click на видео
video.addEventListener('click', function() {
this.currentTime = 0 // отматываем видео на начало
this.play()
})🤖 Обратите внимание, что событие срабатывает на обоих элементах — цвет фона меняется и запускается видео. Этому есть объяснение, оно называется всплытие событий (event bubbling).
Когда пользователь совершает действие, браузер ищет самый вложенный элемент, к которому относится событие. Затем это событие передаётся родительскому элементу и так далее до самого корня DOM.
В нашем примере мы кликнули на <video>, это самый вложенный элемент. Браузер создал событие, и мы обработали его в коде. После этого браузер передаёт событие родителю <video> (то есть элементу, который содержит <video>) — элементу <div>. Мы получаем его и обрабатываем. И он всплывает дальше, пока не дойдёт до <body>.
Обработчики сначала срабатывают на самом вложенном элементе, затем на его родителе, затем выше и так далее, вверх по цепочке вложенности.
Если кликнуть по блокам на демо, то можно увидеть, как событие всплывает вверх к родителям:
let active
let counter = 0
// обрабатываем событие click на всех <div>
let divs = Array.from(document.querySelectorAll('div')).reverse()
for (let i = 0; i < divs.length; ++i) {
const isLast = (i + 1 === divs.length)
divs[i].addEventListener('click', clickHandlerGenerator(isLast))
}
function clickHandlerGenerator(isLast = false) {
return function() {
let me = this
setTimeout(function() {
if (active) {
active.classList.remove('active')
}
me.classList.add('active')
active = me
if (isLast) {
setTimeout(function() {
active.classList.remove('active')
active = undefined
counter = 0
}, 300)
}
}, counter * 300)
++counter
}
}Всплытие события можно остановить с помощью метода stopPropagation() у объекта события:
video.addEventListener('click', function (event) {
event.stopPropagation()
this.currentTime = 0
this.play()
})