Объяснение событий JavaScript

JavaScript в браузере использует модель программирования, управляемую событиями. Все начинается со следования за событием. Это введение в события JavaScript и как работает обработка событий.

Вступление

JavaScript в браузере использует модель программирования, управляемую событиями.

Все начинается со следования за событием.

Событием может быть загрузка DOM или асинхронный запрос, который завершает выборку, или пользователь щелкает элемент или прокручивает страницу, или пользователь вводит текст с клавиатуры.

Есть много разных мероприятий.

Обработчики событий

Вы можете ответить на любое событие, используяОбработчик события, которая вызывается при возникновении события.

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

JavaScript предлагает три способа зарегистрировать обработчик событий:

Встроенные обработчики событий

Этот стиль обработчиков событий сегодня очень редко используется из-за его ограничений, но в первые дни JavaScript это был единственный способ:

<a href="site.com" onclick="dosomething();">A link</a>

Обработчики событий DOM

Это обычное явление, когда объект имеет не более одного обработчика событий, поскольку в этом случае нет возможности добавить несколько обработчиков:

window.onload = () => {
  //window loaded
}

Чаще всего используется при работе сXHRЗапросы:

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
  //.. do something
}

Вы можете проверить, назначен ли уже обработчик свойству, используяif ('onsomething' in window) {}.

С помощьюaddEventListener()

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

window.addEventListener('load', () => {
  //window loaded
})

Обратите внимание, что IE8 и более ранние версии не поддерживают это, а вместо этого используют собственныеattachEvent()API. Имейте это в виду, если вам нужно поддерживать старые браузеры.

Прослушивание разных элементов

Вы можете слушатьwindowдля перехвата «глобальных» событий, таких как использование клавиатуры, и вы можете прослушивать определенные элементы, чтобы проверять события, происходящие с ними, например, щелчок мышью по кнопке.

Вот почемуaddEventListenerиногда вызываетсяwindow, иногда на элементе DOM.

Объект события

Обработчик события получаетEventобъект в качестве первого параметра:

const link = document.getElementById('my-link')
link.addEventListener('click', event => {
  // link clicked
})

Этот объект содержит множество полезных свойств и методов, например:

  • target, элемент DOM, вызвавший событие
  • type, тип события
  • stopPropagation(), вызывается, чтобы остановить распространение события в DOM

(см. полный список).

Другие свойства предоставляются событиями определенного типа, напримерEventэто интерфейс для различных конкретных событий:

У каждого из них есть ссылка на страницу MDN, поэтому вы можете проверить все их свойства.

Например, когда происходит KeyboardEvent, вы можете проверить, какая клавиша была нажата, в удобочитаемом формате (Escape,Enterи так далее), проверивkeyсвойство:

window.addEventListener('keydown', event => {
  // key pressed
  console.log(event.key)
})

По событию мыши мы можем проверить, какая кнопка мыши была нажата:

const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
  // mouse button pressed
  console.log(event.button) //0=left, 2=right
})

Возбуждение событий и захват событий

Пузыри и захват - это две модели, которые используются для распространения событий.

Предположим, ваша структура DOM

<div id="container">
  <button>Click me</button>
</div>

Вы хотите отслеживать, когда пользователи нажимают на кнопку, и у вас есть 2 слушателя событий, один наbutton, и один на#container. Помните, что щелчок по дочернему элементу всегда будет распространяться на его родительский элемент, если вы не остановите распространение (см. Ниже).

Эти прослушиватели событий будут вызываться по порядку, и этот порядок определяется используемой моделью восходящей цепочки / захвата событий.

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

В нашем примере обработчик наbuttonбудет стрелять до#containerобработчик.

Захватнаоборот: внешние обработчики событий запускаются перед более конкретным обработчиком,button.

По умолчанию всплывают все события.

Вы можете выбрать захват событий, применив третий аргумент к addEventListener, установив для него значениеtrue:

document.getElementById('container').addEventListener(
  'click',
  () => {
    //window loaded
  },
  true
)

Обратите внимание, чтосначала запускаются все обработчики событий захвата.

Затем все обработчики восходящих событий.

Порядок следует этому принципу: DOM просматривает все элементы, начиная с объекта Window, и ищет элемент, по которому был выполнен щелчок. При этом он вызывает любой обработчик событий, связанный с событием (фаза захвата).

Как только он достигает цели, он затем повторяет путь к родительскому дереву до объекта Window, снова вызывая обработчики событий (фаза восходящей цепочки).

Остановка распространения

Событие в элементе DOM будет распространено на все его дерево родительских элементов, если оно не остановлено.

<html>
  <body>
    <section>
      <a id="my-link" ...>

Событие щелчка наaбудет распространяться наsectionа потомbody.

Вы можете остановить распространение, вызвавstopPropagation()метод Event, обычно в конце обработчика события:

const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
  // process the event
  // ...

  event.stopPropagation()
})

Вот список наиболее распространенных событий, с которыми вам придется столкнуться.

Нагрузка

loadстреляют поwindowиbodyэлемент после завершения загрузки страницы.

События мыши

clickсрабатывает при нажатии кнопки мыши.dblclickпри двойном щелчке мышью. Конечно в этом случаеclickзапускается непосредственно перед этим событием.mousedown,mousemoveиmouseupможет использоваться в комбинации для отслеживания событий перетаскивания. Будь осторожен сmousemove, поскольку он срабатывает много раз во время движения мыши (см.удушениепотом)

События клавиатуры

keydownсрабатывает при нажатии кнопки клавиатуры (и каждый раз, когда клавиша повторяется, пока кнопкаостаетсянажата).keyupсрабатывает при отпускании клавиши.

Прокрутка

Вscrollсобытие запущеноwindowкаждый раз, когда вы прокручиваете страницу. Внутри обработчика событий вы можете проверить текущую позицию прокрутки, установив флажокwindow.scrollY.

Имейте в виду, что это мероприятие не разовое. Он срабатывает много раз во время прокрутки, а не только в конце или начале прокрутки, поэтому не выполняйте никаких тяжелых вычислений или манипуляций в обработчике - используйтеудушениевместо.

Дросселирование

Как мы уже упоминали выше,mousemoveиscroll- это два события, которые не запускаются один раз для каждого события, а, скорее, они постоянно вызывают свою функцию обработчика событий в течение всего действия.

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

Если вы выполните сложную операцию в обработчике событий, это повлияет на производительность и приведет к замедлению работы пользователей вашего сайта.

Библиотеки, которые обеспечивают регулирование, напримерЛодашреализовать его в более чем 100 строках кода для обработки всех возможных вариантов использования. Это простая и понятная реализация, в которой используетсяsetTimeoutдля кеширования события прокрутки каждые 100 мс:

let cached = null
window.addEventListener('scroll', event => {
  if (!cached) {
    setTimeout(() => {
      //you can access the original event at `cached`
      cached = null
    }, 100)
  }
  cached = event
})

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js:


Tech Wiki Online!