Событийная модель
Что такое события в браузере и почему без них не написать ни одного приложения.
Обновлено 14 октября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Чтобы приложение было интерактивным, нам нужно понимать, что пользователь совершил то или иное действие на странице. Браузер распознает действия пользователя и создаёт событие.
События — это сигналы, которые браузер посылает разработчику, а разработчик может на сигнал реагировать. По аналогии со светофором: видим зелёный свет, едем дальше 🚦
События бывают разных типов: клик, нажатие клавиши на клавиатуре, прокрутка страницы и так далее.
Происходящие события можно обрабатывать и выполнять код, когда нужное событие происходит. Например, при клике на кнопку показывать всплывающее окно.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Существует два способа обработать события:
on -свойства DOM-элементов
Скопировать ссылку «on-свойства DOM-элементов» Скопировано
Большинство событий связаны с DOM-элементами. Если пользователь кликнул на кнопку, то событие click связано с конкретным DOM-элементом — кнопкой, на которой кликнул пользователь.
Каждый DOM-элемент имеет большой набор свойств, которые начинаются на on :
Если в это свойство записать анонимную функцию, то эта функция будет вызываться каждый раз, когда браузер будет создавать событие, связанное с этим элементом. Такие функции называют функциями-обработчиками события.
const buttonElement = document.getElementById('change')const squareDiv = document.getElementById('square') // чтобы реагировать на нажатие кнопки, записываем функцию в свойство onclick.// Эта функция будет вызываться при каждом нажатии на кнопку. Часто говорят,// что эта функция обрабатывает событиеbuttonElement.onclick = function() squareDiv.style = `background-color: $;`> function getColor() const colors = [ '#49A16C', '#064236', '#ED6742', '#F498AD', '#1A5AD7', '#AFC9DA', '#FFD829', '#282A2E', '#5E6064', '#E6E6E6' ] return colors[Math.floor(Math.random() * colors.length)]>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 .
Метод add Event Listener ( )
Скопировать ссылку «Метод addEventListener()» Скопировано
🤖 Если обрабатывать события с помощью on -свойств, то получится добавить только одну функцию-обработчик на каждый элемент. Часто одного обработчика недостаточно. Чтобы не создавать ограничение на пустом месте, используют альтернативный метод подписки на события — метод add Event Listener ( ) .
Метод вызывается у DOM-элемента. Аргументами нужно передать тип события (справочная информация) и функцию, которую нужно выполнить:
const buttonElement = document.getElementById('change')const squareDiv = document.getElementById('square') // чтобы реагировать на нажатие кнопки, подписываемся на событие click и передаем// функцию-обработчик. Эта функция будет вызываться при каждом нажатии на кнопкуbuttonElement.addEventListener('click', function() squareDiv.style = `background-color: $;`>)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(`Вы нажали на кнопку: $`)>)window.addEventListener('keydown', function (event) // используем объект события, чтобы получить информацию о нажатой клавише alert(`Вы нажали на кнопку: $event.key>`) >)
Помимо объекта события, внутри функции можно использовать ключевое слово this . Оно позволяет получить DOM-элемент, на котором сработал обработчик. Это позволяет создать обработчик один раз, но привязать её к нескольким DOM-элементам.
Например, мы объявим обработчик в виде именованной функции и повесим её на нажатие нескольких кнопок. При клике на кнопку будем менять её цвет:
function changeColor() // меняем цвет кнопки, на которой произошло событие. кнопка доступна с помощью // ключевого слова this this.style = `background-color: $;`;>; const buttons = document.getElementsByTagName('button');for (let i = 0; i < buttons.length; ++i) const button = buttons[i]; // к каждой кнопке привязываем обработчик button.addEventListener('click', changeColor); // обратите внимание, что мы не вызываем // функцию changeColor, а только пишем ее имя>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, а только пишем ее имя >
Всплытие событий
Скопировать ссылку «Всплытие событий» Скопировано
const container = document.getElementById('container')const video = document.getElementById('cat') // обрабатываем событие click на 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: $`>); // обрабатываем событие click на видеоvideo.addEventListener('click', function() this.currentTime = 0 // отматываем видео на начало this.play()>)const container = document.getElementById('container') const video = document.getElementById('cat') // обрабатываем событие click на 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.
В нашем примере мы кликнули на , это самый вложенный элемент. Браузер создал событие, и мы обработали его в коде. После этого браузер передаёт событие родителю (то есть элементу, который содержит ) — элементу . Мы получаем его и обрабатываем. И он всплывает дальше, пока не дойдёт до .
Обработчики сначала срабатывают на самом вложенном элементе, затем на его родителе, затем выше и так далее, вверх по цепочке вложенности.
Если кликнуть по блокам на демо, то можно увидеть, как событие всплывает вверх к родителям:
let activelet counter = 0 // обрабатываем событие click на всех 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 >>let active let counter = 0 // обрабатываем событие click на всех 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 > >
Всплытие события можно остановить с помощью метода stop Propagation ( ) у объекта события:
video.addEventListener('click', function (event) event.stopPropagation() this.currentTime = 0 this.play()>)video.addEventListener('click', function (event) event.stopPropagation() this.currentTime = 0 this.play() >)
На практике
Скопировать ссылку «На практике» Скопировано
Николай Лопин советует
Скопировать ссылку «Николай Лопин советует» Скопировано
🛠 Всегда подписывайтесь на события с помощью add Event Listener ( ) , так вы избежите доработок, когда потребуется повесить несколько обработчиков на одно и то же событие.
🛠 Если нужно обработать все события определённого типа, вызовите метод add Event Listener ( ) у объекта window :
// обрабатываем все клики на страницеwindow.addEventListener('click', function () alert('clicked')>)// обрабатываем все клики на странице window.addEventListener('click', function () alert('clicked') >)
🛠 Если вы не используете объект события в обработчике, то можно не указывать его в списке параметров обработчика. Вместо function ( event ) пишите function ( ) .
🛠 Всплытие событий — важный концепт, поэкспериментируйте с ним, чтобы лучше в нём разобраться.