/ ↲
    Расширенный поиск

    JavaScript

    Событийная модель

    Что такое события в браузере и почему без них не написать ни одного приложения.

    Время чтения: 7 мин

    Кратко

    Скопировано

    Чтобы приложение было интерактивным, нам нужно понимать, что пользователь совершил то или иное действие на странице. Браузер распознает действия пользователя и создаёт событие.

    События — это сигналы, которые браузер посылает разработчику, а разработчик может на сигнал реагировать. По аналогии со светофором: видим зелёный свет, едем дальше 🚦

    События бывают разных типов: клик, нажатие клавиши на клавиатуре, прокрутка страницы и так далее.

    Происходящие события можно обрабатывать и выполнять код, когда нужное событие происходит. Например, при клике на кнопку показывать всплывающее окно.

    Как пишется

    Скопировано

    Существует два способа обработать события:

    • с помощью 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)]}
          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()};`})
          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}`)})
          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, а только пишем ее имя}
          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, а только пишем ее имя
}
    Открыть демо в новой вкладке

    Всплытие событий

    Скопировано

    Рассмотрим пример. У нас есть <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()})
          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 activelet 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  }}
          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()})
          video.addEventListener('click', function (event) {
  event.stopPropagation()
  this.currentTime = 0
  this.play()
})

    На практике

    Скопировано

    Николай Лопин советует

    Скопировано

    🛠 Всегда подписывайтесь на события с помощью addEventListener(), так вы избежите доработок, когда потребуется повесить несколько обработчиков на одно и то же событие.

    🛠 Если нужно обработать все события определённого типа, вызовите метод addEventListener() у объекта window:

            
          
          // обрабатываем все клики на страницеwindow.addEventListener('click', function () {  alert('clicked')})
          // обрабатываем все клики на странице
window.addEventListener('click', function () {
  alert('clicked')
})

    🛠 Если вы не используете объект события в обработчике, то можно не указывать его в списке параметров обработчика. Вместо function (event) {…} пишите function() {…}.

    🛠 Всплытие событий — важный концепт, поэкспериментируйте с ним, чтобы лучше в нём разобраться.

    Читайте также

    • DOM

      На чём стоят три слона, на которых держится веб?

    • <button>

      Тег чтобы добавить на страницу кнопку.