Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

События - это действия или события, которые происходят в системе, которую вы программируете, о которой система сообщает вам, поэтому при желании вы можете ответить на них. Например, если пользователь нажимает кнопку на веб-странице, вы можете ответить на это действие, указав информационное окно. В этой статье мы обсудим некоторые важные концепции, связанные с событиями, и посмотрим, как они работают в браузерах. Это не будет исчерпывающим исследованием; просто то, что вам нужно знать на этом этапе.

Предпосылки: Базовая компьютерная грамотность, базовое понимание HTML и CSS, JavaScript first steps.
Задача: Чтобы понять фундаментальную теорию событий, как они работают в браузерах и как события могут различаться в разных средах программирования.

Серия удачных событий

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

В случае Интернета события запускаются внутри окна браузера и, как правило, привязываются к определенному элементу, который находится в нем - это может быть один элемент, набор элементов, документ HTML, загруженный на текущую вкладку или все окно браузера. Существует множество различных событий, которые могут произойти, например:

  • Пользователь нажимает мышь на определенный элемент или наводит курсор на определенный элемент.
  • Пользователь нажимает клавишу на клавиатуре.
  • Пользователь изменяет размер или закрывает окно браузера.
  • Завершение загрузки веб-страницы.
  • Представляемая форма.
  • Воспроизведение видео, пауза или завершение воспроизведения.
  • Произошла ошибка.

Вы увидите (и взглянув на Event reference MDN), что есть много событий, на которые можно ответить.

Каждое доступное событие имеет обработчик событий, который является блоком кода (обычно это функция JavaScript, определяемая пользователем), которая будет запускаться при срабатывании события. Когда такой блок кода определен для запуска в ответ на срабатывание события, мы говорим, что мы регистрируем обработчик событий. Обратите внимание, что обработчики событий иногда называют прослушивателями событий (event listeners) - они в значительной степени взаимозаменяемы для наших целей, хотя, строго говоря, они работают вместе. Слушатель прослушивает событие и обработчик - это код, который запускается в ответ на это.

Примечание: Важно отметить, что веб-события не являются частью основного языка JavaScript - они определены как часть JavaScript-API, встроенных в браузер.

Простой пример

Давайте посмотрим на простой пример, чтобы объяснить, что мы имеем в виду здесь. Вы уже видели события и обработчики событий, используемые во многих примерах в этом курсе, но давайте вспомним только для того, чтобы закрепить наши знания. В следующем примере у нас есть один <button>, который при нажатии делает изменение фона случайным цветом:

<button>Change color</button>

JavaScript выглядит так:

var btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random()*(number+1));
}

btn.onclick = function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

В этом коде мы сохраняем ссылку на кнопку внутри переменной btn, используя функцию Document.querySelector (). Мы также определяем функцию, которая возвращает случайное число. Третья часть кода - обработчик события. Переменная btn указывает на элемент <button> и этот тип объекта имеет несколько событий, которые могут запускаться на нем и, следовательно, доступны обработчики событий. Мы прислушиваемся к запуску события щелчка, устанавливая свойство обработчика события onclick равным анонимной функции, содержащей код, который генерировал случайный цвет RGB и устанавливает цвет фона <body>, равный ему.

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

Пример вывода выглядит следующим образом:

Это не только веб-страницы

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

Например, Node.js - очень популярная среда исполнения JavaScript, которая позволяет разработчикам использовать JavaScript для создания сетевых и серверных приложений. Node.js event model полагается на слушателей для прослушивания событий и эмиттеров периодически извещать события - это звучит не так, как разные, но код совсем другой, используя такие функции, как on(), чтобы зарегистрировать прослушиватель событий и once(), чтобы зарегистрировать прослушиватель событий, который отменяет регистрацию после его запуска один раз. Хорошим примером использования являются протоколы событий HTTP connect event docs.

В качестве другого примера вы также можете использовать JavaScript для создания надстрочных надстроек - улучшения функциональности браузера - с помощью технологии WebExtensions. Модель события похожа на модель веб-событий, но немного отличается - свойства прослушивателей событий с верблюжьей оболочкой (например, onMessage, а не onmessage) и должны сочетаться с функцией addListener. См. runtime.onMessage page для примера.

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

Способы использования веб-событий

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

Свойства обработчика событий

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

var btn = document.querySelector('button');

btn.onclick = function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

Свойство onclick - это свойство обработчика события, используемое в этой ситуации. Это, по сути, свойство, подобное любому другому, доступному на кнопке (например, btn.textContentt или btn.style), но это особый тип - если вы установите его равным некоторому коду, этот код будет запущен, когда событие срабатывает.

Вы также можете установить свойство handler равным имени функции (как мы видели в Build your own function). Следующее будет работать одинаково:

var btn = document.querySelector('button');

function bgChange() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

btn.onclick = bgChange;

Доступны различные свойства обработчика событий. Давайте проведем эксперимент.

Прежде всего сделайте локальную копию random-color-eventhandlerproperty.html и откройте ее в своем браузере. Это всего лишь копия простого случайного примера цвета, с которым мы играли уже в этой статье. Теперь попробуйте изменить btn.onclick на следующие разные значения в свою очередь и наблюдая результаты в примере:

  • btn.onfocus и btn.onblur — Цвет изменится, когда кнопка будет сфокусирована и не сфокусирована (попробуйте нажать вкладку, чтобы включить вкладку на кнопке и снова выключить). Они часто используются для отображения информации о том, как заполнить поля формы, когда они сфокусированы или отобразить сообщение об ошибке, если поле формы только что было заполнено с неправильным значением.
  • btn.ondblclick — Цвет будет изменяться только при двойном щелчке.
  • window.onkeypress, window.onkeydown, window.onkeyup — Цвет будет меняться при нажатии клавиши на клавиатуре. keypress ссылается на общее нажатие (кнопка вниз, а затем вверх), в то время как нажатие keydown и нажатие keyup ссылаются только на клавиши вниз и клавиши вверх по клавишам соответственно. Обратите внимание, что это не работает, если вы попытаетесь зарегистрировать этот обработчик событий на самой кнопке - нам пришлось зарегистрировать его на объекте window, который представляет все окно браузера.
  • btn.onmouseover и btn.onmouseout — Цвет будет меняться при перемещении указателя мыши, чтобы он начинал парить над кнопкой или когда он переставал нависеть над кнопкой и удалялся от нее соответственно.

Некоторые события очень общие и доступны практически в любом месте (например, обработчик onclick может быть зарегистрирован практически для любого элемента), тогда как некоторые из них более конкретны и полезны только в определенных ситуациях (например, имеет смысл использовать onplay только для определенных элементов, таких как как <video>).

Inline обработчики событий - не используйте эти

Вы также можете увидеть такой шаблон в своем коде:

<button onclick="bgChange()">Press me</button>
function bgChange() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

Note: You can find the full source code for this example on GitHub (also see it running live).

Самый ранний метод регистрации обработчиков событий, обнаруженных в Интернете, включает в себя атрибуты HTML-обработчика событий (например, встроенные обработчики событий), такие как показанные выше - значение атрибута - это буквально код JavaScript, который вы хотите запустить при возникновении события. В приведенном выше примере вызывается функция, определенная внутри элемента <script> на той же странице, но вы также можете вставить JavaScript непосредственно внутри атрибута, например:

<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>

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

Для начала не рекомендуется смешивать ваш HTML и ваш JavaScript, так как становится трудно разобрать - лучше держать ваш JavaScript в одном месте; если он находится в отдельном файле, вы можете применить его к нескольким документам HTML.

Даже в одном файле встроенные обработчики событий не являются хорошей идеей. Одна кнопка в порядке, но что, если у вас было 100 кнопок? Вам нужно добавить в файл 100 атрибутов; это очень быстро превратилось в кошмар для обслуживания. С помощью JavaScript вы можете легко добавить функцию обработчика событий ко всем кнопкам на странице независимо от того, сколько их было, используя что-то вроде этого:

var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].onclick = bgChange;
}

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

addEventListener() и removeEventListener()

Новейший тип механизма событий определен в спецификации Document Object Model (DOM) Level 2 Events, которая предоставляет браузеру новую функцию - addEventListener(). Это работает аналогично свойствам обработчика событий, но синтаксис явно отличается. Мы могли бы переписать наш случайный пример цвета, чтобы выглядеть так:

var btn = document.querySelector('button');

function bgChange() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}   

btn.addEventListener('click', bgChange);

Note: You can find the full source code for this example on GitHub (also see it running live).

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

btn.addEventListener('click', function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
});

Этот механизм имеет некоторые преимущества по сравнению с более старыми механизмами, обсуждавшимися ранее. Для начала существует аналогичная функция removeEventListener(), которая удаляет ранее добавленный прослушиватель. Например, это приведет к удалению набора слушателей в первом блоке кода в этом разделе:

btn.removeEventListener('click', bgChange);

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

Во-вторых, вы можете также зарегистрировать несколько обработчиков для одного и того же прослушивателя. Следующие два обработчика не будут применяться:

myElement.onclick = functionA;
myElement.onclick = functionB;

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

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

Обе функции теперь будут выполняться при щелчке элемента.

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

Какой механизм я должен использовать?

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

Остальные два являются относительно взаимозаменяемыми, по крайней мере для простых целей:

  • Свойства обработчика событий имеют меньшую мощность и параметры, но лучше совместимость между браузерами (поддерживается еще в Internet Explorer 8). Вероятно, вам следует начать с них, когда вы учитесь.
  • События уровня 2 DOM (addEventListener() и т. д.) являются более мощными, но также могут стать более сложными и менее хорошо поддерживаться (поддерживается еще в Internet Explorer 9). Вы также должны поэкспериментировать с ними и стремиться использовать их там, где это возможно.

Основные преимущества третьего механизма заключаются в том, что при необходимости можно удалить код обработчика событий, используя removeEventListener(), и при необходимости вы можете добавить несколько элементов-слушателей того же типа к элементам. Например, вы можете вызвать addEventListener('click', function() {...}) для элемента несколько раз, с разными функциями, указанными во втором аргументе. Это невозможно при использовании свойств обработчика событий, поскольку любые последующие попытки установить свойство будут перезаписывать более ранние, например:

element.onclick = function1;
element.onclick = function2;
etc.

Примечание: Если вам требуется поддержка браузеров старше Internet Explorer 8 в вашей работе, вы можете столкнуться с трудностями, так как такие древние браузеры используют разные модели событий из более новых браузеров. Но никогда не бойтесь, большинство библиотек JavaScript (например, jQuery) имеют встроенные функции, которые абстрагируют различия между браузерами. Не беспокойтесь об этом слишком много на этом этапе вашего учебного путешествия.

Другие концепции событий

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

Event objects

Иногда внутри функции обработчика событий вы можете увидеть параметр, заданный с таким именем, как event, evt или просто e. Это называется объектом события и оно автоматически передается обработчикам событий для предоставления дополнительных функций и информации. Например, давайте немного перепишем наш случайный пример цвета:

function bgChange(e) {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}  

btn.addEventListener('click', bgChange);

Note: You can find the full source code for this example on GitHub (also see it running live).

Здесь вы можете увидеть, что мы включаем объект события e в функцию, а в функции - настройку стиля фона на e.target - это сама кнопка. Свойство target объекта события всегда является ссылкой на элемент, который только что произошло. Поэтому в этом примере мы устанавливаем случайный цвет фона на кнопке, а не на странице.

Примечание: Вы можете использовать любое имя, которое вам нравится для объекта события - вам просто нужно выбрать имя, которое вы затем можете использовать для ссылки на него в функции обработчика событий. e/evt/event чаще всего используются разработчиками, потому что они короткие и легко запоминаются. Всегда хорошо придерживаться стандарта.

e.target невероятно полезен, когда вы хотите установить один и тот же обработчик событий на нескольких элементах и сделать что-то для всех, когда на них происходит событие. Например, у вас может быть набор из 16 плиток, которые исчезают при нажатии. Полезно всегда иметь возможность просто указать, что вещь исчезнет, как e.target, вместо того, чтобы выбирать ее более сложным способом. В следующем примере (см. useful-eventtarget.html для полного исходного кода, а также посмотрите, как он работает здесь), мы создаем 16 элементов <div> с использованием JavaScript. Затем мы выберем все из них, используя document.querySelectorAll (), затем пропустим каждый из них, добавив обработчик onclick к каждому, что делает его таким, чтобы случайный цвет применялся к каждому клику:

var divs = document.querySelectorAll('div');

for (var i = 0; i < divs.length; i++) {
  divs[i].onclick = function(e) {
    e.target.style.backgroundColor = bgChange();
  }
}

Результат выглядит следующим образом (попробуйте щелкнуть по нему - получайте удовольствие):

Большинство обработчиков событий, с которыми вы столкнулись, имеют только стандартный набор свойств и функций (методов), доступных для объекта события (см. Event для ссылки на полный список). Однако некоторые более продвинутые обработчики добавляют специальные свойства, содержащие дополнительные данные, которые им необходимо выполнять. Например, Media Recorder API имеет событие, доступное для данных, которое срабатывает, когда записано какое-либо аудио или видео и доступно для выполнения чего-либо (например, для сохранения или воспроизведения). Соответствующий объект события ondataavailable handler имеет свойство данных, содержащее записанные аудио- или видеоданные, чтобы вы могли получить к нему доступ и что-то сделать с ним.

Предотвращение поведения по умолчанию

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

Проблема возникает, когда пользователь не отправил данные правильно - как разработчик, вы хотите остановить отправку на сервер и дать им сообщение об ошибке, сообщающее им, что не так и что нужно сделать, чтобы все исправить. Некоторые браузеры поддерживают функции автоматической проверки данных формы, но, поскольку многие этого не делают, вам не следует полагаться на них и выполнять свои собственные проверки валидации. Давайте посмотрим на простой пример.

Во-первых, простая форма HTML, в которой требуется ввести ваше имя и фамилию:

<form>
  <div>
    <label for="fname">First name: </label>
    <input id="fname" type="text">
  </div>
  <div>
    <label for="lname">Last name: </label>
    <input id="lname" type="text">
  </div>
  <div>
     <input id="submit" type="submit">
  </div>
</form>
<p></p>

Теперь некоторый JavaScript - здесь мы реализуем очень простую проверку внутри обработчика события onsubmit (событие отправки запускается в форме, когда оно отправлено), который проверяет, пусты ли текстовые поля. Если они есть, мы вызываем функцию preventDefault() объекта события, которая останавливает отправку формы, а затем выводит сообщение об ошибке в абзаце ниже нашей формы, чтобы сообщить пользователю, что не так:

var form = document.querySelector('form');
var fname = document.getElementById('fname');
var lname = document.getElementById('lname');
var submit = document.getElementById('submit');
var para = document.querySelector('p');

form.onsubmit = function(e) {
  if (fname.value === '' || lname.value === '') {
    e.preventDefault();
    para.textContent = 'You need to fill in both names!';
  }
}

Очевидно, что это довольно слабая проверка формы - это не помешает пользователю проверить форму с пробелами или цифрами, введенными в поля, например, но это, к примеру, подходит. Вывод выглядит следующим образом:

Note: for the full source code, see preventdefault-validation.html (also see it running live here.)

Банкротство событий и захват событий

Последним предметом для рассмотрения здесь является то, с чем вы  не часто сталкиваетесь, но это может быть настоящей болью, если вы этого не понимаете. Буферизация и захват событий - это два механизма, описывающих, что происходит, когда два обработчика одного и того же типа событий активируются на одном элементе. Давайте посмотрим на пример, чтобы сделать это проще - откройте пример show-video-box.html на новой вкладке (и исходный код на другой вкладке). Он также доступен в прямом эфире:

Это довольно простой пример, который показывает и скрывает <div> с элементом <video> внутри него:

<button>Display video</button>

<div class="hidden">
  <video>
    <source src="rabbit320.mp4" type="video/mp4">
    <source src="rabbit320.webm" type="video/webm">
    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
  </video>
</div>

Когда нажата кнопка <button>, отображается видео, изменяя атрибут класса на <div> от hidden до showing (в CSS этого примера содержатся эти два класса, которые помещают окно с экрана (off) и на экране (on), соответственно):

btn.onclick = function() {
  videoBox.setAttribute('class', 'showing');
}

Затем мы добавляем еще несколько обработчиков событий onclick - первый в <div>, а второй - в <video>. Идея заключается в том, что при щелчке по области <div> вне видео, поле должно быть снова скрыто; когда кликаете, видео должно начинаться.

videoBox.onclick = function() {
  videoBox.setAttribute('class', 'hidden');
};

video.onclick = function() {
  video.play();
};

Но есть проблема - в данный момент, когда вы нажимаете видео, оно начинает воспроизводиться, но одновременно вызывает скрытие <div>. Это связано с тем, что видео находится внутри <div> - это часть его, поэтому при нажатии на видео на самом деле выполняются оба вышеупомянутых обработчика событий.

Bubbling and capturing explained

Когда событие инициируется элементом, который имеет родительские элементы (например, <video> в нашем случае), современные браузеры выполняют две разные фазы - этап захвата и фазу bubbling.

  • Браузер проверяет, имеет ли внешний элемент самого внешнего элемента (<html>) обработчик события onclick, зарегистрированный на нем на этапе захвата и запускает его, если это так.
  • Затем он переходит к следующему элементу внутри <html> и выполняет одно и то же, затем следующее и так далее, пока не достигнет элемента, на который на самом деле нажали.

На стадии bubbling происходит полная противоположность:

  • Браузер проверяет, имеет ли элемент, на который был фактически нажат обработчик события onclick, зарегистрированный на нем в фазе bubbling, и запускает его, если это так.
  • Затем он переходит к следующему непосредственному элементу предка и выполняет одно и то же, затем следующее и так далее, пока не достигнет элемента <html>.

(Нажмите на изображение, чтобы увеличить диаграмму)

В современных браузерах по умолчанию все обработчики событий регистрируются в фазе bubbling. Итак, в нашем текущем примере, когда вы нажимаете видео, событие click вызывается из элемента <video> наружу в элемент <html>. По пути:

  • Он находит обработчик video.onclick... и запускает его, поэтому видео сначала начинает воспроизводиться.
  • Затем он находит обработчик videoBox.onclick... и запускает его, поэтому видео также скрывается.

Устранение проблемы со stopPropagation()

Это поведение раздражает, но есть способ исправить это! Стандартный объект события имеет функцию, доступную на нем, называемую stopPropagation(), которая при вызове в объекте события обработчика делает так, чтобы обработчик выполнялся, но событие больше не пузырится дальше по цепочке, поэтому больше не будет запускать обработчиков.

Поэтому мы можем исправить нашу текущую проблему, изменив вторую функцию-обработчик в предыдущем блоке кода:

video.onclick = function(e) {
  e.stopPropagation();
  video.play();
};

Вы можете попробовать создать локальную копию show-video-box.html source code и попробовать его самостоятельно исправить или просмотреть фиксированный результат в show-video-box-fixed.html (также см. исходный код здесь).

Примечание: Зачем беспокоиться как с захватом (capturing), так и с пузырьками (bubbling)? Ну, в плохие старые времена, когда браузеры были гораздо менее совместимы друг с другом, чем сейчас, Netscape использовал только захват событий, а Internet Explorer использовал только пузырьки событий. Когда W3C решил попытаться стандартизировать поведение и достичь консенсуса, они оказались в этой системе, которая включала в себя и то, и другое, что было реализовано в одном из современных браузеров.

Примечание: Как упоминалось выше, по умолчанию все обработчики событий регистрируются в фазе bubbling и это имеет большее значение большую часть времени. Если вы действительно хотите зарегистрировать событие на этапе захвата, вы можете сделать это, зарегистрировав обработчик с помощью addEventListener() и установив для третьего дополнительного свойства значение true.

Event delegation

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

Хорошим примером является серия элементов списка - если вы хотите, чтобы каждый из них отображал сообщение при нажатии, вы можете установить прослушиватель событий click на родительский <ul> и он будет пузыриться в элементах списка.

Эта концепция объясняется далее в блоге Дэвида Уолша, с несколькими примерами - см. How JavaScript Event Delegation Works.

Вывод

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

Кроме того, важно понимать, что различные контексты, в которых используется JavaScript, имеют тенденцию иметь разные модели событий - от веб-API до других областей, таких как браузерные WebExtensions и Node.js (серверный JavaScript). Мы не ожидаем, что вы сейчас поймете все эти области, но это, безусловно, помогает понять основы событий, когда вы продвигаетесь вперед по изучению веб-разработки.

Если вы ничего не поняли, не стесняйтесь прочитать статью снова или свяжитесь с нами, чтобы обратиться за помощью.

See also

  • Event order (discussion of capturing and bubbling) — an excellently detailed piece by Peter-Paul Koch.
  • Event accessing (discussing of the event object) — another excellently detailed piece by Peter-Paul Koch.
  • Event reference

 

In this module

 

 
 

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: slychai85, Paul_Yuhnovich
Обновлялась последний раз: slychai85,