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

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

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

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

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

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

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

Подробнее о событиях можно посмотреть на 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 основана на том, что некие прослушиватели прослушивают события, а некие эмиттеры (передатчики) периодически генерируют события. В общем-то, это похоже на модель событий в JavaScript для веб-страниц, но код совсем другой. В нем используя такие функции, как on() — регистрирация прослушивателя событий, и once() — регистрирация прослушивателя событий, которая отменяется после первого срабтывания. Хорошим примером использования являются протоколы событий HTTP connect event docs.

В качестве другого примера вы также можете использовать JavaScript для создания кросс-браузерных расширений — улучшения функциональности браузера с помощью технологии WebExtensions. В отличии от модели веб-событий здесь свойства прослушивателей событий пишутся в так называемом регистре CamelCase (например, 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.textContent или btn.style), но это особый тип. Если вы установите его равным какому-нибудь коду, этот код будет запущен, когда событие сработает.

Вы также можете установить свойство обработчика равным имени функции (как мы видели в статье Создайте свою функцию). Следующий пример будет работать так же:

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

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

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

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

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

Примечание: Вы можете найти полный исходник кода из этого примера на GitHub (также взгляните на его выполнение).

Самый ранний метод регистрации обработчиков событий, обнаруженных в Интернете, включает в себя 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);

Примечание: Вы можете найти исходный код из этого примера на GitHub (также взгляните на его выполнение).

Внутри функции 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);

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

Кроме того, в этом механизме событий имеется ряд других мощных функций и опций. Эта тема выходит за рамки данной статьи, но если вы хотите изучить подробнее, переходите по ссылкам: Метод Event​Target​.add​Event​Listener() и Метод Event​Target​.remove​Event​Listener().

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

Из трех механизмов определенно не нужно использовать атрибуты событий 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, 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);

Примечание: Вы можете найти исходник кода для этого примера на GitHub (также взгляните на его выполнение).

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

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

e.target применяют, когда нужно установить один и тот же обработчик событий на несколько элементов и, когда на них происходит событие, применить определенное действие к ним ко всем. Например, у вас может быть набор из 16 плиток, которые исчезают при нажатии. Полезно всегда иметь возможность просто указать, чтобы объект исчез, как e.target, вместо того, чтобы выбирать его более сложным способом. В следующем примере (см. исходный код на  useful-eventtarget.html,а как он работает можно посмотреть здесь), мы создаем 16 элементов <div> с использованием JavaScript. Затем мы выберем все из них, используя document.querySelectorAll(), и с помощью цикла for выберем каждый из них, добавив обработчик 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">Имя: </label>
    <input id="fname" type="text">
  </div>
  <div>
    <label for="lname">Фамилия: </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 = 'Оба поля должны быть заполнены!';
  }
}

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

Примечание: чтобы увидеть исходный код, откройте preventdefault-validation.html (также запустите здесь).

Всплытие и перехват событий

Последним предметом для рассмотрения в этой теме является то, с чем вы не часто будете сталкиваться, но это может стать настоящей головной болью, если вы не поймете, как работает следующий механизм. Всплытие и перехват событий — два механизма, описывающих, что происходит, когда два обработчика одного и того же события активируются на одном элементе. Посмотрим на пример. Чтобы сделать это проще — откройте пример 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 примера содержит эти два класса, которые размещают блок вне экрана и на экране соответственно):

div {
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%);
        ...
      }
.hidden { 
   left: -50%; 
  } 
.showing { 
   left: 50%; 
  }

 

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

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

var videoBox = document.querySelector('div');
var video = document.querySelector('video');

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

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

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

Всплытие и перехват событий — концепция выполнения

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

На стадии захвата происходит следующее:

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

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

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

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

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

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

Исправление проблемы с помощью stopPropagation()

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

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

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

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

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

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

Делегирование события

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

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

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

Вывод

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

Кроме того, важно понимать, что различные контексты, в которых используется 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

 

В этом модуле

 
 

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

Метки: 
Внесли вклад в эту страницу: chergav, kryukalexander, ConstantineZz, mdnwebdocs-bot, Zibroff, vOICe-xx, CharlyLovegood, slychai85, Paul_Yuhnovich
Обновлялась последний раз: chergav,