Javascript обработчик событий: Введение в браузерные события

Содержание

Введение в события — Изучение веб-разработки

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

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

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

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

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

Подробнее о событиях можно посмотреть в Справочнике по событиям.

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

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

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

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

<button>Change color</button>

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

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

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

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

В этом коде мы сохраняем ссылку на кнопку внутри переменной btn типа const, используя функцию 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 для примера.

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

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

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

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

const 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), но оно относится к особому типу. Если вы установите его равным какому-нибудь коду, этот код будет запущен при возникновении события (при нажатии на кнопку).

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

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

function bgChange() {
  const 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>).

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

Самый ранний из введённых в сеть Web методов регистрации обработчиков событий базируется на HTML атрибутах (встроенные обработчики событий):

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

Значение атрибута —  это буквально код JavaScript, который вы хотите запустить при возникновении события. В приведённом выше примере вызывается функция, определённая внутри элемента <script> на той же странице, но вы также можете вставить JavaScript непосредственно внутри атрибута, например:

<button>Press me</button>

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

Более того, не рекомендуется смешивать HTML и JavaScript файлы, так как в дальнейшем такой код становится сложнее с точки зрения обработки (парсинга). Лучше держать весь JavaScript в одном месте. Также, если он находится в отдельном файле, вы можете применить его к нескольким документам HTML.

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

Например:

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

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

Обратите внимание, что для перебора всех элементов, которые содержит объект NodeList, можно воспользоваться встроенным методом forEach():

buttons.forEach(function(button) {
  button.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);

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

Итак в коде выше мы включаем объект события 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 type="text">
  </div>
  <div>
    <label for="lname">Фамилия: </label>
    <input type="text">
  </div>
  <div>
     <input 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 = 'Оба поля должны быть заполнены!';
  }
}

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

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

Последним предметом для рассмотрения в этой теме является то, с чем вы не часто будете сталкиваться, но это может стать настоящей головной болью, если вы не поймёте, как работает следующий механизм. Всплытие и перехват событий — два механизма, описывающих, что происходит, когда два обработчика одного и того же события активируются на одном элементе. Посмотрим на пример. Чтобы сделать это проще — откройте пример show-video-box.html в одной вкладке и исходный код в другой вкладке. Он также представлен ниже:

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

<button>Display video</button>

<div>
  <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). Может сейчас вы не особо в этом разбираетесь, но по мере изучения веб-разработки начнёт приходить более ясное понимание тематики.

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

  • Event order (обсуждение захвата и всплытий) — превосходно детализированная часть от Peter-Paul Koch.
  • Event accessing (discussing of the event object) — another excellently detailed piece by Peter-Paul Koch.
  • Event reference

События в Javascript

HTML события это такая «вещь», которая временами происходит с HTML элементами.

HTML событие может быть неким действием, которое делает браузер или пользователь.

При использовании на HTML странице скрипта JavaScript он может реагировать на эти события.

Вот несколько примеров HTML событий:

  • HTML страница закончила загружаться
  • Поле ввода было изменено
  • Пользователь нажал на HTML кнопку

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

С одинарными кавычками:
элемент событие=’код JavaScript‘>

С двойными кавычками:
<элемент событиекод JavaScript«>

В следующем примере элементу button добавлен атрибут onclick с JavaScript кодом:


<button>
	Какая сейчас дата и время?
</button>

В приведенном примере при нажатии пользователем на кнопку код JavaScript изменит содержимое элемента с id=»demo» и выведет в него текущую дату и время.

В следующем примере JavaScript код изменит содержимое самого элемента (используется команда this.innerHTML):


<button>
	Какая сейчас дата и время?
</button>

Однако, очень редко можно увидеть код JavaScript, состоящий из одного выражения. Поэтому обычно в атрибут события записывают вызов JavaScript функции:


<button>
	Какая сейчас дата и время?
</button>

Часто используемые HTML события

Ниже приводится список некоторых часто используемых HTML событий:

Событие Описание
onchange HTML элемент был изменен
onclick Пользователь кликнул мышкой на HTML элемент
onmouseover Пользователь навел мышку на HTML элемент
onmouseout Пользователь вывел мышку за пределы HTML элемента
onkeydown Пользователь нажал на клавишу клавиатуры
onload Браузер закончил загружать страницу

Конечно, список событий гораздо длиннее. Смотрите раздел События HTML DOM и HTML атрибуты-события.

Что может делать JavaScript с событиями?

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

  • Выполнять действия повторяющиеся после загрузки страницы
  • Выполнять действия повторяющиеся после закрытия страницы
  • Действия, которые должны выполняться при нажатии пользователем на кнопку
  • Проверка данных, введенных пользователем в поле формы
  • И многое другое …

В JavaScript существует множество способов работать с событиями:

  • HTML атрибуты-события могут напрямую выполнять код JavaScript
  • HTML атрибуты-события могут вызывать функции JavaScript
  • Вы можете установить собственную функцию обработки события
  • Вы можете запретить отправку и обработку события
  • И многое другое …

Строка (объект String) Вверх Область видимости в Javascript

Обработчики Событий в JS (как работает addEventListener)

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

Любой DOM элемент запускает событие, когда мы с ним как-то взаимодействуем (кликаем, наводим мышь и др.).
Обработчики событий в JS используются для того, чтобы реагировать на эти события.

Обработчики событий можно «вешать» на любые элементы DOM (Data Object Model) дерева, а также глобальные объекты window и document.

Предположим, на нашей странице есть html элемент button с классом «btn»:

1<div>

2 <button>Click</button>

3</div>

Давайте выделим наш элемент button и присвоим его переменной button:

1const button = document.querySelector('.btn');

Чтобы «повесить» обработчик событий на наш элемент button, нужно использовать специальный метод — addEventListener.
Этот метод принимает 2 аргумента:

  1. Тип события (мы будем «слушать» событие «click»).
  2. Так называемую колбэк (callback) функцию, которая запускается после срабатывания нужного события.

Колбэк функция (callback function) — отличается от обычной функции, тем, что ее запускаем не мы, а браузер, который делает это после срабатывания события.

1const button = document.querySelector('.btn');

2button.addEventListener('click', function () {

3 console.log('click');

4});

Таким образом, каждый раз после срабатывания события «click» будет запускаться наша коллбэк функция
и мы будем получать строку «click» в нашей консоли.

Обработчики событий JS (выносим логику коллбэк функции за пределы метода addEventListener)

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

1const button = document.querySelector('.btn');

2

3function handleClick() {

4 console.log('click');

5}

6button.addEventListener('click', handleClick);

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

Давайте использовать готовую логику в функции handleClick — для новой кнопки:

1<div>

2 <button>Click</button>

3 <button>Click 2</button>

4</div>

1const button = document.querySelector('.btn');

2const buttonTwo = document.querySelector('.btnTwo');

3

4function handleClick() {

5 console.log('click');

6}

7button.addEventListener('click', handleClick);

8

9

10buttonTwo.addEventListener('click', handleClick);

Как снять обработчик события addEventListener с элемента?

Чтобы снять обработчик события с какого-либо элемента, нужно использовать метод removeEventListener.
В качестве аргументов нужно указать не только название события («click»), но и название коллбэк функции,
которая привязана к элементу.

1buttonTwo.removeEventListener('click', handleClick);

Метод removeEventListener не сработает, если в качестве коллбэк функции использовать безымянную функцию, так как будет отсутствовать возможность сослаться на нее.

Обработка событий на нескольких DOM элементах

Как использовать обработчик событий addEventListener, когда нам требуется использовать его сразу на нескольких
элементах?

Предположим, на нашей странице есть 5 кнопок с классом «btn»:

1<div>

2 <button>Click 1</button>

3 <button>Click 2</button>

4 <button>Click 3</button>

5 <button>Click 4</button>

6 <button>Click 5</button>

7</div>

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

Подход 1. Используем отдельный addEventListener для каждой кнопки

Здесь мы можем выделить все кнопки с одинаковым классом и присвоить их переменной buttons.
Далее нам потребуется использовать цикл forEach, чтобы пробежаться по каждой кнопке в полученном списке,
и повесить на нее обработчик событий addEventListener.

1const buttons = document.querySelectorAll('.btn');

2

3function handleClick() {

4 console.log('click');

5}

6

7buttons.forEach((button) => {

8 button.addEventListener('click', handleClick);

9});

Подход 2. Делегирование события (Event delegation)

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

То есть, мы можем повесить обработчик событий на родительский div с классом «wrapper»,
и обрабатывать события, которые активируются на дочерних элементах button.

Это возможно благодаря механизму, который называется «всплытие» (bubbling) в Javascript,
который означает, что если событие срабатывает на каком-то элементе, оно также срабатывает на всех его родительских элементах.

Внутри нашей коллбэк функции у нас есть доступ к объекту «Событие» (Event), внутри которого мы можем использовать свойство target,
чтобы получить элемент, на который мы кликнули.

1const wrapper = document.querySelector('.wrapper');

2

3function handleClick(e) {

4 console.log('click', e.target);

5

6

7

8}

9

10wrapper.addEventListener('click', handleClick);

Обработка событий в jQuery

В этом видео мы с вами разберем, как навешивать евенты на елементы в jQuery. В чистом javascript мы с вами это делали с помощью addEventListener. Главная разница между эвентами в чистом javascript и в jQuery, это то, что они работают кроссбраузерно. И вам не нужно например internet explorer обрабатывать каким-то отдельным методом. Да и код в jQuery получается еще короче.

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

<button>Submit</button>

и добавим listener с помощью метода .click

$('.submit').click(function () {
  console.log('clicked')
})

То есть код очень похож на код на javascript, но немного короче. Это потому, что это синтаксический сахар. Полная версия выглядит вот так.

$('.submit').on('click', function () {
  console.log('clicked')
})

метод .on позволяет нам указывать какой евент мы хотим.

Точно так же можно использовать методы mouseenter, mouseleave для навешивания этих событий.

Давайте добавим div

<div>Square</div>

и навесим на него 2 события

$('.square').mouseenter(function () {
  console.log('square enter')
}).mouseleave(function () {
  console.log('square leave')
})

Как вы видите в результате выполнения mouseenter мы получаем все тот же jQuery элемент и можем навесить на него еще одно событие.

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

$('.square').mouseenter(function () {
  console.log('square enter')
  $('.square').css('background', 'blue')
  $('.square').css('font-size', '24px')
}).mouseleave(function () {
  console.log('square leave')
  $('.square').css('background', 'none')
  $('.square').css('font-size', 'initial')
})

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

Вот приблизительно так выглядит код на jQuery у всех, кто только начинает на нем писать. Если мы представите такого кода хотя бы 500 строк, то получается лапша.

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

Сначала вынесем селектор в переменную, так как мы ищем ее аж 5 раз.

var $square = $('.square')

$square.mouseenter(function () {
  console.log('square enter')
  $square.css('background', 'blue')
  $square.css('font-size', '24px')
}).mouseleave(function () {
  console.log('square leave')
  $square.css('background', 'none')
  $square.css('font-size', 'initial')
})

Теперь мы можем вынести методы mouseleave и mouseenter в переменные

var $square = $('.square')
var enterHandler = function () {
  console.log('square enter')
  $square.css('background', 'blue')
  $square.css('font-size', '24px')
}
var leaveHandler = function () {
  console.log('square leave')
  $square.css('background', 'none')
  $square.css('font-size', 'initial')
}

$square.mouseenter(enterHandler)
  .mouseleave(leaveHandler)

Также мы можем писать css цепочками.

var $square = $('.square')
var enterHandler = function () {
  console.log('square enter')
  $square.css('background', 'blue')
    .css('font-size', '24px')
}
var leaveHandler = function () {
  console.log('square leave')
  $square.css('background', 'none')
    .css('font-size', 'initial')
}

$square.mouseenter(enterHandler)
  .mouseleave(leaveHandler)

Но вообще добавлять стили в javascript не самое правильное решение. Поэтому давайте будем навешивать класс при ховере на елемент.

var $square = $('.square')
var enterHandler = function () {
  console.log('square enter')
  $square.addClass('active')
}
var leaveHandler = function () {
  console.log('square leave')
  $square.removeClass('active')
}

$square.mouseenter(enterHandler)
  .mouseleave(leaveHandler)

И теперь нам нужно только написать стили. Так как их у нас немного, то не будем создавать отдельный файл с стилями, а напишем их прямо в html.

<style>
  .active {
    background: blue;
    font-size: 24px;
  }
</style>

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

Давайте создадим елемент и вставим его в DOM и навесим на него событие.

Мы можем просто на body вызвать метод .append и передать туда кусок html. и он сразу же вставится в конец body.

$('body').append('<div>Created by javascript</div>')

Теперь давайте навесим евент до того, как мы добавили елемент.

$('.byJavascript').click(function () {
  console.log('created by javascript')
})

$('body').append('<div>Created by javascript</div>')

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

Для этого есть очень простое решение. Нам нужно просто навешить евент на уже существующий елемент например body, а проверять что событие произошло на нужно нам елементе.

Давайте попробуем переписать этот же код.

$('body').on('click', '.byJavascript', function () {
  console.log('created by javascript')
})

То есть мы навесили евент клик на body, но указали вторым аргументом, что нас интересует елемент .byJavascript. И теперь даже если елемент будет создан позже, то евент сработает.

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

JavaScript: захват события восходящей цепочки событий

Поток событий

Когда HTML-страница взаимодействует с JavaScript, она должна быть реализована через события, такие как: события щелчка мыши, события прокрутки страницы, загрузка и т. Д., И если вы хотите знать, при каких обстоятельствах вызываются эти события, вам необходимо дополнительно понять «Поток событий».

Что такое поток событий?

Описывает порядок, в котором события поступают со страницы, который также можно понимать как порядок распространения событий.
Тремя этапами потока событий DOM являются: этап захвата событий, целевой этап и этап восходящей цепочки событий.

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

«Событие уровня DOM2» определяет два метода для обработки операции указанного или удаленного обработчика событий: addEventListener () и removeEventListener (), которым необходимо получить 3 параметра: имя обрабатываемого события, функцию в качестве обработчика событий и Логическое значение. Если логическое значение истинно, это означает, что обработчик событий вызывается на этапе захвата, в противном случае он называется обработчиком событий на этапе восходящей цепочки.

Связывание событий

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Поток событий</title> 
</head>
<body>
    <a href="javascript:;">Кнопка</a>
		
		 <script>

    window.onload = function(){

        var oBtn = document.getElementById('btn');

        oBtn.addEventListener('click',function(){
            console.log('btn находится в фазе захвата события');
        }, true);
        oBtn.addEventListener('click',function(){
            console.log('btn находится в фазе всплытия события');
        }, false);

        document.addEventListener('click',function(){
            console.log("документ находится на стадии захвата события");
        }, true);
        document.addEventListener('click',function(){
            console.log("Документ находится в стадии всплытия событий");
        }, false);  
				
    };

    </script>
</body>
</html>

Масштаб мероприятия

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
				width: 200px;
				height: 200px;
				background: fuchsia;
			}

			
				position: relative;
				top: 50px;
				left: 50px;
				width: 100px;
				height: 100px;
				background: pink;
			}

			
				position: relative;
				top: 25px;
				left: 25px;
				width: 50px;
				height: 50px;
				background: yellow;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<div></div>
			</div>
		</div>
		<script type="text/javascript">
			var wrap = document.getElementById('wrap');
			wrap.addEventListener('click', function() {
				alert("Я обернут");
			}, false);
		</script>
	</body>
</html>

Согласно приведенному выше примеру, при щелчке по любой части фиолетового div (включая часть, покрытую дочерними элементами) появится всплывающее сообщение «Я обернулось», а при щелчке за пределами div нет ответа. Сфера действия события регистрации элемента заключается в том, что сам элемент находится на странице Размер занимаемого пространства, но так ли это на самом деле?
просто поместите синий div за пределы обтекания через CSS, HTML и js останутся без изменений.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
				width: 200px;
				height: 200px;
				background: orange;
			}

			
				position: relative;
				top: 50px;
				left: 50px;
				width: 100px;
				height: 100px;
				background: 
			}

			 / * модифицируется верх во внутреннем * /
			
				position: relative;
				top: 152px;
				left: 25px;
				width: 50px;
				height: 50px;
				background: 
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<div></div>
			</div>
		</div>
		<script type="text/javascript">
			var wrap = document.getElementById('wrap');
			wrap.addEventListener('click', function() {
				alert("Я обернут");
			}, false);
		</script>
	</body>
</html>

При щелчке по синему элементу div по-прежнему появляется сообщение «Я обернулось». Видно, что: когда элемент зарегистрирован с событием, объем этого события составляет: сам элемент занимает пространство страницы плюс область пространства, занятую вложенным элементом (если он вложен Элемент покрывает контейнерный элемент, а объем события — это пространство, занимаемое самим контейнерным элементом).

Порядок выполнения мероприятий

Из области действия события мы заключаем, что, когда элемент зарегистрирован для события, область действия этого события составляет: собственное пространство страницы элемента плюс пространство, занятое вложенным элементом (если вложенный элемент покрывает элемент контейнера, событие Объем действия — это размер пространства, занимаемого самим элементом контейнера), поэтому, когда происходит событие щелчка, каков порядок их выполнения?

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

Событие принимается наиболее конкретным элементом (т. Е. Самым глубоким вложенным узлом в документе) в начале, а затем распространяется до менее конкретных узлов.
Мы меняем логическое значение обработчика событий на false, чтобы элемент находился в фазе восходящей цепочки для вызова обработчика событий.
Код CSS и HTML остается без изменений, код JS:

var wrap = document.getElementById('wrap');
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');

wrap.addEventListener('click',function(){
  alert("Я обернут");
},false);
outer.addEventListener('click',function(){
  alert('Я внешний');
},false);
inner.addEventListener('click',function(){
  alert('Я внутренний');
},false);

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

Запись событий

Захват события означает, что менее конкретный узел должен получить событие раньше, а наиболее конкретный узел должен получить событие последним.
Например, мы меняем логическое значение обработчика событий на true, чтобы элемент находился в фазе захвата для вызова обработчика событий.
Код CSS и HTML остается без изменений, код JS:

var wrap = document.getElementById('wrap');
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
    
wrap.addEventListener('click',function(){
  alert("Я обернут");
},true);
outer.addEventListener('click',function(){
  alert('Я внешний');
},true);
inner.addEventListener('click',function(){
  alert('Я внутренний');
},true);

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

Предотвратить всплытие и захват событий

Метод w3c — e.stopPropagation (), а IE использует e.cancelBubble = true.
Его функция заключается в предотвращении восходящей цепочки целевого элемента, то есть предотвращении восходящей цепочки события целевого элемента в родительский элемент. Но это не предотвратит поведение браузера по умолчанию.

function stopBubble(e) { 
	if ( e && e.stopPropagation ) 
	   e.stopPropagation(); 
	else 
	   window.event.cancelBubble = true; 
	}

Отмените событие по умолчанию:
Метод w3c — e.preventDefault (), а IE использует e.returnValue = false;

Поскольку это поведение по умолчанию, конечно, элемент должен иметь поведение по умолчанию, чтобы его можно было отменить. Если сам элемент не имеет поведения по умолчанию, вызов будет недействительным. Какой элемент имеет поведение по умолчанию? Например, ссылка, кнопка отправки и т. Д. Если для параметра cancelable объекта Event установлено значение false, это означает, что поведение по умолчанию отсутствует.В настоящее время, даже если есть поведение по умолчанию, вызов preventDefault не будет работать.

<a href="http://www.baidu.com/" >baidu</a>
var a = document.getElementById("test");
a.onclick =function(e){
	if(e.preventDefault){
	    e.preventDefault();
	}else{
	window.event.returnValue == false;
	}
}

return false
javascript return false предотвратит только поведение по умолчанию. Если используется jQuery, он предотвратит как поведение по умолчанию, так и всплытие объектов.

Все обработчики событий JavaScript — полный список с описанием

21.08.18 JavaScript 1821

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

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

  • onabort – прерывание воспроизведения;
  • onafterprint – закончена печать;
  • onautocomplete – выполнено автозаполнение формы;
  • onautocompleteerror – ошибка при автозаполнении формы;
  • onbeforeprint – подготовка к печати;
  • onbeforeunload — документ выгружен;
  • onblur – потеря фокуса;
  • oncancel – отмена действия;
  • oncanplay — можно начать воспроизведение указанного медиа-файла;
  • oncanplaythrough — можно начать воспроизведение указанного медиа-файла без необходимости остановки для буферизации;
  • onchange – изменение значения;
  • onclick – клик на элементе;
  • onclose – закрытие чего-либо;
  • oncontextmenu – открытие контекстного меню;
  • oncopy – выполнено копирование;
  • oncuechange — изменение метки в элементе track;
  • oncut – выполнено вырезание контента;
  • ondblclick – двойной клик на элементе;
  • ondrag — перетаскивание элемента;
  • ondragend — перетаскивание элемента завершено;
  • ondragenter — элемент перетаскивается в допустимую целевую зону;
  • ondragexit – выход из режима перетаскивания;
  • ondragleave — элемент оставляет допустимую цель;
  • ondragover — элемент перетаскивается по допустимой целевой точке;
  • ondragstart – начало операции перетаскивания;
  • ondrop – перетаскиваемый элемент отпущен;
  • ondurationchange — изменение длины носителя;
  • onemptied – файл неожиданно стал недоступен;
  • onended – воспроизведение завершено;
  • onerror – произошла ошибка;
  • onfocus – установка фокуса на элементе;
  • onhashchange — изменение привязки части адреса;
  • oninput – начало ввода данных;
  • oninvalid – элемент поврежден;
  • onkeydown – нажата клавиша;
  • onkeypress — нажата клавиша и затем отпущена;
  • onkeyup – отпущена клавиша;
  • onload – элемент загружен;
  • onloadeddata – загружены данные файла;
  • onloadedmetadata – загружены метаданные файла;
  • onloadstart – начало загрузки элемента;
  • onmessage — появление сообщения;
  • onmousedown – нажата клавиша мыши;
  • onmouseenter – указатель мыши наведен на элемент;
  • onmouseleave – указатель мыши покинул элемент;
  • onmousemove — указатель мыши перемешен над элементом;
  • onmouseout — указатель мыши перемещается из элемента;
  • onmouseover — указатель мыши перемещается по элементу;
  • onmouseup — кнопка мыши отпускается над элементом;
  • onmousewheel (onwheel) – использовано колесико мыши;
  • onoffline – браузер запущен в оффлайн режиме;
  • ononline – браузер запущен в онлайн режиме;
  • onpagehide — пользователь переходит от страницы;
  • onpageshow — пользователь переходит на страницу;
  • onpaste – выполнена вставка контента;
  • onpause – приостановка воспроизведения;
  • onplay – начало воспроизведения;
  • onplaying – воспроизведения файла;
  • onpopstate — изменение истории окна;
  • onprogress – получение метаданных файла;
  • onratechange — изменение скорости воспроизведения;
  • onreset – выполнен сброс данных;
  • onresize – изменение размера элемента;
  • onscroll – прокрутка содержимого элемента;
  • onsearch – выполнен поиск;
  • onseeked — поиск закончился;
  • onseeking – поиск активен;
  • onselect – выбор некоторого текста или значения;
  • onshow – показ элемента;
  • onsort – выполнение сортировки;
  • onstalled — браузер не может получить мультимедийные данные по любой причине;
  • onstorage – обновлено веб-хранилище;
  • onsubmit – подтверждение отправки данных формы;
  • onsuspend – остановка извлечения метаданных;
  • ontimeupdate – изменение позиции (времени) воспроизведения файла, то есть перемотка файла;
  • ontoggle — пользователь открывает или закрывает элемент details;
  • onunload – загрузка выполнена, после чего произошло закрытие документа;
  • onvolumechange – громкость изменена;
  • onwaiting – ожидание восстановления воспроизведения.

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

Список родных событий Javascript
































Событие Обработчик события Поддерживающие HTML-элементы Описание

События мыши

click onClick * Практически все HTML-элементы Одинарный щелчок (нажата и отпущена кнопка мыши)
dblclick onDblClick * Практически все HTML-элементы Двойной щелчок
contextmenu onContextmenu * Практически все HTML-элементы Щелчок правой кнопкой мыши на элементе
selectstart onselectstart * Практически все HTML-элементы Начало выделения контента.

Изменение выделения скриптом.
mousewheel onMousewheel * Практически все HTML-элементы Нажата кнопка мыши в пределах текущего элемента
mousemove onMouseMove * Практически все HTML-элементы Перемещение курсора мыши в пределах текущего элемента
mouseout onMouseOut * Практически все HTML-элементы Курсор мыши выведен за пределы текущего элемента
mouseover onMouseOver * Практически все HTML-элементы Курсор мыши наведен на текущий элемент
mouseup onMouseUp * Практически все HTML-элементы Отпущена кнопка мыши в пределах текущего элемента
mousedown onMouseDown * Практически все HTML-элементы Нажата кнопка мыши в пределах текущего элемента

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

keydown onKeyDown * Практически все HTML-элементы Нажата клавиша на клавиатуре
keypress onKeyPress * Практически все HTML-элементы Нажата и отпущена клавиша на клавиатуре
keyup onKeyUp * Практически все HTML-элементы Отпущена клавиша на клавиатуре

События элементов форм

focus onFocus A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA Получение элементом фокуса (щелчок мышью на элементе или очередное нажатие клавиши табуляции)
blur onBlur A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA Потеря текущим элементом фокуса, т.е. переход к другому элементу. Возникает при щелчке мышью вне элемента либо нажатии клавиши табуляции
change onChange INPUT, SELECT, TEXTAREA Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur
reset onReset FORM Сброс данных формы ( щелчок по кнопке

<input type=»reset»> )
select onSelect INPUT, TEXTAREA Выделение текста в текущем элементе
submit onSubmit FORM Отправка данных формы ( щелчок по кнопке

<input type=»submit»> )
abort onAbort IMG, input type=»img» Прерывание загрузки изображения

События окна браузера

load onLoad BODY, FRAMESET Закончена загрузка документа
unload onUnload BODY, FRAMESET Попытка закрытия окна браузера и выгрузки документа
error onError IMG, WINDOW Возникновение ошибки выполнения сценария
move onMove WINDOW Перемещение окна
resize onResize WINDOW Изменение размеров окна
scroll onScroll * Практически все HTML-элементы Прокрутка окна или области

событий JavaScript


HTML-события — это «вещей» , которые происходят с элементами HTML.

Когда JavaScript используется на HTML-страницах, JavaScript может
«реагировать»
на
эти события.


HTML-события

Событие HTML может быть чем-то, что делает браузер или пользователем.

Вот несколько примеров событий HTML:

  • Веб-страница HTML завершила загрузку
  • Поле ввода HTML изменено
  • Нажата кнопка HTML

Часто, когда случаются события, вы можете захотеть что-то сделать.

JavaScript позволяет выполнять код при обнаружении событий.

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

В одинарных кавычках:

< элемент
событие = некоторый JavaScript >

С двойными кавычками:

< элемент
событие = « некоторый JavaScript » >

В следующем примере атрибут onclick (с кодом) добавляется к

Попробуй сам »

В приведенном выше примере код JavaScript изменяет содержимое
элемент с.

В следующем примере код изменяет содержимое
собственный элемент (используя , этот .innerHTML ):

Пример

Попробуй сам »

Код JavaScript

часто состоит из нескольких строк. Чаще всего можно увидеть функции вызова атрибутов событий:



Общие события HTML

Вот список некоторых распространенных событий HTML:

Событие Описание
на замену Изменен элемент HTML
onclick Пользователь щелкает элемент HTML
на мышке над Пользователь наводит указатель мыши на элемент HTML
onmouseout Пользователь отводит указатель мыши от элемента HTML
нажатие клавиши Пользователь нажимает клавишу на клавиатуре
загрузка Браузер завершил загрузку страницы

Список намного длиннее: W3Schools Справочник по JavaScript События HTML DOM.


Что умеет JavaScript?

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

могут использоваться для обработки и проверки пользовательского ввода, действий пользователя,
и действий браузера:

  • Что нужно делать каждый раз при загрузке страницы
  • Что делать при закрытии страницы
  • Действие, которое должно выполняться, когда пользователь нажимает кнопку
  • Контент, который следует проверять, когда пользователь вводит данные
  • И многое другое …

Для работы JavaScript с событиями можно использовать множество различных методов:

  • Атрибуты событий HTML могут выполнять код JavaScript напрямую
  • Атрибуты событий HTML могут вызывать функции JavaScript
  • Вы можете назначить свои собственные функции обработчика событий элементам HTML
  • Вы можете запретить отправку или обработку событий
  • И многое другое…

Вы узнаете намного больше о событиях и обработчиках событий в главах HTML DOM.



JavaScript DOM Navigation


В HTML DOM вы можете перемещаться по дереву узлов с помощью узла
отношения.


Узлы DOM

Согласно стандарту W3C HTML DOM, все в документе HTML является узлом:

  • Весь документ представляет собой узел документа
  • Каждый элемент HTML является узлом элемента
  • Текст внутри элементов HTML является текстовыми узлами
  • Каждый атрибут HTML является узлом атрибута (не рекомендуется)
  • Все комментарии являются узлами комментариев

В HTML DOM все узлы в дереве узлов могут быть доступны с помощью JavaScript.

Новые узлы могут быть созданы, и все
узлы могут быть изменены или удалены.


Взаимосвязи узлов

Узлы в дереве узлов имеют иерархические отношения друг с другом.

Термины родительский, дочерний и родственный используются для описания отношений.

  • В дереве узлов верхний узел называется корневым (или корневым узлом)
  • Каждый узел имеет ровно одного родителя, кроме корня (у которого нет родителя)
  • Узел может иметь несколько дочерних узлов
  • Братья и сестры (братья или сестры) — это узлы с одним и тем же родителем


Учебное пособие по DOM

Первый урок DOM

Hello world!

Из HTML-кода выше вы можете прочитать:

  • — корневой узел
  • не имеет родителей
  • является родительским для и
  • является первым потомком
  • — последний дочерний элемент

и:

  • имеет одного дочернего элемента: </code> </li> <li> <code> <title> </code> имеет одного дочернего элемента (текстовый узел): «DOM Tutorial» </li> <li> <code> <body> </code> имеет двух дочерних элементов: <code><br /> <h2> </h2> <p></code> и <code> </p> <p> </code> </li> <li> <code><br /> <h2> </h2> <p></code> имеет одного дочернего элемента: «DOM Lesson one» </li> <li> <code> <p> </code> имеет одного дочернего элемента: «Hello world!» </li> <li> <code><br /> <h2> </h2> <p></code> и <code> </p> <p> </code> являются братьями и сестрами </li> </ul> <hr/> <hr/> <h3><span class="ez-toc-section" id="%D0%9F%D0%B5%D1%80%D0%B5%D1%85%D0%BE%D0%B4_%D0%BC%D0%B5%D0%B6%D0%B4%D1%83_%D1%83%D0%B7%D0%BB%D0%B0%D0%BC%D0%B8"></span> Переход между узлами <span class="ez-toc-section-end"></span></h3> <p> Вы можете использовать следующие свойства узла для перехода между узлами с<br /> JavaScript: </p> <ul> <li> <code> родительский узел </code> </li> <li> <code> childNodes [<em> номер узла </em>] </code> </li> <li> <code> первый ребенок </code> </li> <li> <code> последний ребенок </code> </li> <li> <code> следующий <li> <code> предыдущие </ul> <hr/> <h3><span class="ez-toc-section" id="%D0%94%D0%BE%D1%87%D0%B5%D1%80%D0%BD%D0%B8%D0%B5_%D1%83%D0%B7%D0%BB%D1%8B_%D0%B8_%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D1%8F_%D1%83%D0%B7%D0%BB%D0%BE%D0%B2"></span> Дочерние узлы и значения узлов <span class="ez-toc-section-end"></span></h3> <p> Распространенная ошибка при обработке DOM - ожидание, что узел элемента будет содержать текст.</p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-3"></span> Пример: <span class="ez-toc-section-end"></span></h4> <p> <название > Учебник по DOM

    Узел элемента
    </code> (в примере выше) <strong> не содержит текста </strong>. </p> <p> Он содержит <b> текстовый узел </b> со значением «DOM Tutorial». </p> <p> Значение текстового узла доступно для<br /> узел<br /> <code> innerHTML </code> свойство: </p> <p> myTitle = document.getElementById («демонстрация»). innerHTML; </p> <p> Доступ к свойству innerHTML аналогичен доступу к <code> nodeValue </code><br /> первого ребенка: </p> <p> myTitle = документ.getElementById ("демонстрация"). firstChild.nodeValue; </p> <p> Доступ к первому ребенку также можно выполнить следующим образом: </p> <p> myTitle = document.getElementById («демонстрация»). childNodes [0] .nodeValue; </p> <p> Во всех (3) следующих примерах извлекается текст элемента <code> </p> <h2> </h2> <p></code> и копируется его<br /> в элемент <code> </p> <p> </code>: </p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-4"></span> Пример <span class="ez-toc-section-end"></span></h4> <p><h2><span class="ez-toc-section" id="%D0%9C%D0%BE%D1%8F_%D0%BF%D0%B5%D1%80%D0%B2%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0"></span> Моя первая страница <span class="ez-toc-section-end"></span></h2> <p> </p> <p> <script> <br /> документ.getElementById ("id02"). innerHTML = document.getElementById ("id01"). innerHTML; <br /> </script> </p> <p> </body> <br /> </html> </p> <p> Попробуй сам "</p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-5"></span> Пример <span class="ez-toc-section-end"></span></h4> <p><h2><span class="ez-toc-section" id="%D0%9C%D0%BE%D1%8F_%D0%BF%D0%B5%D1%80%D0%B2%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0-2"></span> Моя первая страница <span class="ez-toc-section-end"></span></h2> <p> </p> <p> <script> <br /> document.getElementById ("id02"). InnerHTML = document.getElementById ("id01"). FirstChild.nodeValue; <br /> </script> </p> <p> </body> <br /> </html> </p> <p> Попробуй сам "</p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-6"></span> Пример <span class="ez-toc-section-end"></span></h4> <p><h2><span class="ez-toc-section" id="%D0%9C%D0%BE%D1%8F_%D0%BF%D0%B5%D1%80%D0%B2%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0-3"></span> Моя первая страница <span class="ez-toc-section-end"></span></h2> <p> </p> <p> Здравствуйте! </p> </p> <p> <script> <br /> документ.getElementById ("id02"). innerHTML = document.getElementById ("id01"). childNodes [0] .nodeValue; <br /> </script> </p> <p> </body> <br /> </html> </p> <p> Попробуй сам "</p> <hr/> <h3><span class="ez-toc-section" id="%D0%92%D0%BD%D1%83%D1%82%D1%80%D0%B5%D0%BD%D0%BD%D0%B8%D0%B9_HTML"></span> Внутренний HTML <span class="ez-toc-section-end"></span></h3> <p> В этом руководстве мы используем свойство innerHTML для получения содержимого<br /> HTML-элемент. </p> <p> Однако обучение<br /> другие методы, описанные выше, полезны для понимания древовидной структуры и<br /> навигация по DOM. </p> <hr/> <h3><span class="ez-toc-section" id="%D0%9A%D0%BE%D1%80%D0%BD%D0%B5%D0%B2%D1%8B%D0%B5_%D1%83%D0%B7%D0%BB%D1%8B_DOM"></span> Корневые узлы DOM <span class="ez-toc-section-end"></span></h3> <p> Есть два специальных свойства, которые позволяют получить доступ к полному документу: </p> <ul> <li> <code> документ.body </code> - Тело документа </li> <li> <code> document.documentElement </code> - Полный документ </li> </ul> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-7"></span> Пример <span class="ez-toc-section-end"></span></h4> <p><h3><span class="ez-toc-section" id="JavaScript_HTMLDOM"></span> JavaScript HTMLDOM <span class="ez-toc-section-end"></span></h3> <p> </p> <p> Отображение document.body </p> </p> <p><p id = "demo"> </p> </p> <p> <script> <br /> document.getElementById ("demo"). innerHTML = document.body.innerHTML; <br /> </script> </p> <p> </body> <br /> </html> </p> <p>Попробуй сам "</p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-8"></span> Пример <span class="ez-toc-section-end"></span></h4> <p><h3><span class="ez-toc-section" id="JavaScript_HTMLDOM-2"></span> JavaScript HTMLDOM <span class="ez-toc-section-end"></span></h3> <p> </p> <p> Отображение документа.documentElement </p> </p> <p> <script> <br /> document.getElementById ("демонстрация"). innerHTML = document.documentElement.innerHTML; <br /> </script> </p> <p> </body> <br /> </html> </p> <p>Попробуй сам "</p> <hr/> <h3><span class="ez-toc-section" id="%D0%A1%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%BE_nodeName"></span> Свойство nodeName <span class="ez-toc-section-end"></span></h3> <p> Свойство <code> nodeName </code> определяет имя узла. </p> <ul> <li> nodeName только для чтения </li> <li> node Имя узла элемента совпадает с именем тега </li> <li> node Имя узла атрибута - это имя атрибута </li> <li> node Имя текстового узла всегда #text </li> <li> узел Имя узла документа всегда # документ </li> </ul> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-9"></span> Пример <span class="ez-toc-section-end"></span></h4> <p> Моя первая страница </p> <p> <script> <br /> документ.getElementById ("id02"). innerHTML = document.getElementById ("id01"). nodeName; <br /> </script> </p> <p>Попробуй сам "</p> <p> <b> Примечание. </b> <code> nodeName </code> всегда содержит имя тега в верхнем регистре элемента HTML. </p> <hr/> <h3><span class="ez-toc-section" id="%D0%A1%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%BE_nodeValue"></span> Свойство nodeValue <span class="ez-toc-section-end"></span></h3> <p> Свойство <code> nodeValue </code> определяет значение узла. </p> <ul> <li> node Значение для узлов элемента - <code> null </code> </li> <li> node Значение для текстовых узлов - это сам текст </li> <li> nodeValue для узлов атрибутов - это значение атрибута </li> </ul> <hr/> <h3><span class="ez-toc-section" id="%D0%A1%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%BE_nodeType"></span> Свойство nodeType <span class="ez-toc-section-end"></span></h3> <p> Свойство <code> nodeType </code> доступно только для чтения.Возвращает тип узла. </p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-10"></span> Пример <span class="ez-toc-section-end"></span></h4> <p> Моя первая страница </p> <p> <script> <br /> document.getElementById ("id02"). InnerHTML = document.getElementById ("id01"). nodeType; <br /> </script> </p> <p>Попробуй сам "</p> <p> Наиболее важные свойства nodeType: </p> <table> <tr> <th> Узел </th> <th> Тип </th> <th> Пример </th> </tr> <tr> <td> ELEMENT_NODE </td> <td> 1 </td> <td> <h2><span class="ez-toc-section" id="W3Schools"></span> W3Schools <span class="ez-toc-section-end"></span></h2> </td> </tr> <tr> <td> ATTRIBUTE_NODE </td> <td> 2 </td> <td> class = "heading" (устарело) </td> </tr> <tr> <td> TEXT_NODE </td> <td> 3 </td> <td> W3Школы </td> </tr> <tr> <td> COMMENT_NODE </td> <td> 8 </td> <td> <! - Это комментарий -> </td> </tr> <tr> <td> DOCUMENT_NODE </td> <td> 9 </td> <td> Сам документ HTML (родительский элемент <html>) </td> </tr> <tr> <td> DOCUMENT_TYPE_NODE </td> <td> 10 </td> <td> <! Doctype html> </td> </tr> </table> <p> Тип 2 устарел в HTML DOM (но работает).Он не является устаревшим в XML DOM. </p> <h2><span class="ez-toc-section" id="%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_%D0%BC%D0%B5%D1%80%D0%BE%D0%BF%D1%80%D0%B8%D1%8F%D1%82%D0%B8%D1%8F_-_%D0%98%D0%B7%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2%D0%B5%D0%B1-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B8"></span> Введение в мероприятия - Изучение веб-разработки <span class="ez-toc-section-end"></span></h2> <p> События - это действия или события, которые происходят в системе, которую вы программируете, о которых система сообщает вам, чтобы вы могли при желании каким-либо образом на них отреагировать. Например, если пользователь нажимает кнопку на веб-странице, вы можете отреагировать на это действие, отобразив информационное окно. В этой статье мы обсудим некоторые важные концепции, связанные с событиями, и посмотрим, как они работают в браузерах.Это не будет исчерпывающим исследованием; именно то, что вам нужно знать на данном этапе. </p> <table> <tbody> <tr> <th scope="row"> Предварительные требования: </th> <td> Базовая компьютерная грамотность, базовое понимание HTML и CSS, первые шаги в JavaScript. </td> </tr> <tr> <th scope="row"> Цель: </th> <td> Чтобы понять фундаментальную теорию событий, как они работают в браузерах и как события могут различаться в разных средах программирования. </td> </tr> </tbody> </table> <p> Как упоминалось выше, <strong> событий </strong> - это действия или события, которые происходят в системе, которую вы программируете - система выдает (или «запускает») какой-либо сигнал, когда происходит событие, и обеспечивает механизм, с помощью которого действие может быть выполнено автоматически (то есть запускается некоторый код) при возникновении события.Например, в аэропорту, когда взлетно-посадочная полоса свободна для взлета, пилот получает сигнал. В результате самолет может спокойно взлетать. </p> </p> <p> В случае Интернета события запускаются внутри окна браузера и, как правило, прикрепляются к определенному элементу, который находится в нем - это может быть один элемент, набор элементов, документ HTML, загруженный на текущей вкладке, или все окно браузера. Может произойти много разных типов событий. Например: </p> <ul> <li> Пользователь выбирает определенный элемент или наводит курсор на определенный элемент.</li> <li> Пользователь выбирает клавишу на клавиатуре. </li> <li> Пользователь изменяет размер или закрывает окно браузера. </li> <li> Веб-страница завершает загрузку. </li> <li> Форма отправлена. </li> <li> Видео воспроизводится, приостанавливается или заканчивается. </li> <li> Произошла ошибка. </li> </ul> <p> Из этого (и взглянув на ссылку на событие MDN) можно понять, что существует <strong> - много </strong> событий, на которые можно ответить. </p> <p> Каждое доступное событие имеет обработчик событий <strong> </strong>, который представляет собой блок кода (обычно это функция JavaScript, которую вы, как программист, создаете), которая запускается при возникновении события.Когда такой блок кода определен для запуска в ответ на событие, мы говорим, что <strong> регистрируем обработчик событий </strong>. Примечание. Обработчики событий иногда называются <strong> прослушивателями событий </strong> - они в значительной степени взаимозаменяемы для наших целей, хотя, строго говоря, они работают вместе. Слушатель прислушивается к происходящему событию, а обработчик - это код, который запускается в ответ на это. </p> <p> <strong> Примечание. </strong> Веб-события не являются частью основного языка JavaScript - они определены как часть API, встроенных в браузер.</p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%BE%D1%81%D1%82%D0%BE%D0%B9_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80-2"></span> Простой пример <span class="ez-toc-section-end"></span></h4> <p> Давайте посмотрим на простой пример того, что мы здесь имеем в виду. Вы уже видели события и обработчики событий, используемые во многих примерах, но давайте подведем итоги, чтобы закрепить наши знания. В следующем примере у нас есть единственная кнопка <code> <button> </code>, при нажатии которой цвет фона меняется на случайный: </p> <pre> <code> <button> Изменить цвет </button> </code> </pre> <p> Код JavaScript выглядит так: </p> <pre> <code> const btn = документ.querySelector ('кнопка'); function random (number) { return Math.floor (Math.random () * (число + 1)); } btn.onclick = function () { const rndCol = 'rgb (' + случайный (255) + ',' + случайный (255) + ',' + случайный (255) + ')'; document.body.style.backgroundColor = rndCol; } </code> </pre> <p> В этом коде мы сохраняем ссылку на кнопку внутри константы с именем <code> btn </code>, используя функцию <code> Document.querySelector () </code>. Мы также определяем функцию, которая возвращает случайное число. Третья часть кода - это обработчик событий.Константа <code> btn </code> указывает на элемент <code> <button> </code>, и этот тип объекта имеет ряд событий, которые могут запускаться на нем, и, следовательно, доступные обработчики событий. Мы слушаем срабатывание события <code> click </code>, устанавливая свойство обработчика события <code> onclick </code> равным анонимной функции, содержащей код, который генерирует случайный цвет RGB и устанавливает равный ему цвет фона <code> <body> </code> <code> </code>. </p> <p> Этот код запускается всякий раз, когда событие щелчка запускается на элементе <code> <button> </code>, то есть всякий раз, когда пользователь выбирает его.</p> <p> Пример вывода выглядит следующим образом: </p> <h4><span class="ez-toc-section" id="%D0%AD%D1%82%D0%BE_%D0%BD%D0%B5_%D0%BF%D1%80%D0%BE%D1%81%D1%82%D0%BE_%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B"></span> Это не просто веб-страницы. <span class="ez-toc-section-end"></span></h4> <p> Еще одна вещь, о которой стоит упомянуть, заключается в том, что события не являются уникальными для JavaScript - большинство языков программирования имеют какую-то модель событий, и способ ее работы часто отличается от способа работы JavaScript. Фактически, модель событий в JavaScript для веб-страниц отличается от модели событий для JavaScript, поскольку она используется в других средах. </p> <p> Например, Node.js - очень популярная среда выполнения JavaScript, которая позволяет разработчикам использовать JavaScript для создания сетевых и серверных приложений.Модель событий Node.js полагается на слушателей для прослушивания событий и на эмиттеры для периодической генерации событий - это не так уж отличается, но код совершенно другой, используя такие функции, как <code> on () </code> для регистрации прослушивателя событий. и <code> once () </code> для регистрации прослушивателя событий, который отменяет регистрацию после однократного запуска. Документация о событиях HTTP-соединения является хорошим примером. </p> <p> Вы также можете использовать JavaScript для создания кроссбраузерных надстроек - расширенных функциональных возможностей браузера - с помощью технологии, называемой WebExtensions.Модель событий похожа на модель веб-событий, но немного отличается - свойства прослушивателей событий имеют верблюжий характер (например, <code> onMessage </code>, а не <code> onmessage </code>), и их необходимо комбинировать с функцией <code> addListener </code>. См. Пример на странице <code> runtime.onMessage </code>. </p> <p> На данном этапе обучения вам не нужно ничего понимать о других подобных средах; мы просто хотели прояснить, что события могут отличаться в разных средах программирования.</p> <p> Есть несколько способов добавить код прослушивателя событий на веб-страницы, чтобы он запускался при возникновении связанного события. В этом разделе мы рассмотрим различные механизмы и обсудим, какие из них вам следует использовать. </p> <h4><span class="ez-toc-section" id="%D0%A1%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0_%D0%BE%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%B0_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9-2"></span> Свойства обработчика событий <span class="ez-toc-section-end"></span></h4> <p> Это свойства, которые существуют для содержания кода обработчика событий, с которым мы чаще всего сталкивались в ходе курса. Возвращаясь к приведенному выше примеру: </p> <pre> <code> const btn = document.querySelector ('кнопка'); btn.onclick = function () { const rndCol = 'rgb (' + случайный (255) + ',' + случайный (255) + ',' + случайный (255) + ')'; документ.body.style.backgroundColor = rndCol; } </code> </pre> <p> Свойство <code> onclick </code> - это свойство обработчика событий, которое используется в этой ситуации. По сути, это свойство, подобное любому другому доступному на кнопке (например, <code> btn.textContent </code> или <code> btn.style </code>), но это особый тип - когда вы устанавливаете его равным некоторому коду, этот код запускается когда событие запускается на кнопке. </p> <p> Вы также можете установить свойство обработчика равным имени именованной функции (как мы видели в разделе «Создание собственной функции»).Следующее работает точно так же: </p> <pre> <code> const btn = document.querySelector ('кнопка'); function bgChange () { const rndCol = 'rgb (' + случайный (255) + ',' + случайный (255) + ',' + случайный (255) + ')'; document.body.style.backgroundColor = rndCol; } btn.onclick = bgChange; </code> </pre> <p> Доступно множество различных свойств обработчика событий. Давай поэкспериментируем. </p> <p> Сначала создайте локальную копию random-color-eventhandlerproperty.html и откройте ее в своем браузере. Это просто копия простого примера случайного цвета, с которым мы уже играли.Теперь попробуйте по очереди изменить <code> btn.onclick </code> на следующие различные значения и проследить за результатами в примере: </p> <ul> <li> <code> btn.onfocus </code> и <code> btn.onblur </code> - Цвет меняется, когда кнопка находится в фокусе и не в фокусе; попробуйте нажать вкладку, чтобы сфокусироваться на кнопке, и нажмите вкладку еще раз, чтобы сфокусироваться от кнопки. Они часто используются для отображения информации о заполнении полей формы, когда они находятся в фокусе, или для отображения сообщения об ошибке, если поле формы заполнено неправильным значением.</li> <li> <code> btn.ondblclick </code> - Цвет меняется только при двойном нажатии кнопки. </li> <li> <code> window.onkeydown </code>, <code> window.onkeyup </code> - Цвет меняется при нажатии клавиши на клавиатуре. <code> keydown </code> и <code> keyup </code> относятся только к нажатию клавиши и нажатию клавиши вверх соответственно. Примечание: это не сработает, если вы попытаетесь зарегистрировать этот обработчик событий на самой кнопке - нам пришлось зарегистрировать его в объекте окна, который представляет собой все окно браузера.</li> <li> <code> btn.onmouseover </code> и <code> btn.onmouseout </code> - цвет меняется при наведении указателя мыши на кнопку или при перемещении указателя с кнопки соответственно. </li> </ul> <p> Некоторые события являются общими и доступны практически везде (например, обработчик <code> onclick </code> может быть зарегистрирован практически для любого элемента), тогда как некоторые более специфичны и полезны только в определенных ситуациях (например, имеет смысл использовать onplay только для определенных элементов, например <code> <видео> </code>).</p> <h4><span class="ez-toc-section" id="%D0%92%D1%81%D1%82%D1%80%D0%BE%D0%B5%D0%BD%D0%BD%D1%8B%D0%B5_%D0%BE%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%B8_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9_-_%D0%BD%D0%B5_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D1%83%D0%B9%D1%82%D0%B5_%D1%8D%D1%82%D0%B8"></span> Встроенные обработчики событий - не используйте эти <span class="ez-toc-section-end"></span></h4> <p> Вы также можете увидеть в своем коде такой шаблон: </p> <pre> <code> <button> Нажми меня </button> </code> </pre> <pre> <code> function bgChange () { const rndCol = 'rgb (' + случайный (255) + ',' + случайный (255) + ',' + случайный (255) + ')'; document.body.style.backgroundColor = rndCol; } </code> </pre> <p> Самый ранний метод регистрации обработчиков событий, найденный в Интернете, включал <strong> HTML-атрибутов обработчиков событий </strong> (или <strong> встроенных обработчиков событий </strong>), подобных показанному выше - значение атрибута - это буквально код JavaScript, который вы хотите запустить при возникновении события.В приведенном выше примере вызывается функция, определенная внутри элемента <code> <script> </code> на той же странице, но вы также можете вставить JavaScript непосредственно внутри атрибута, например: </p> <pre> <code> <button> Нажми меня </button> </code> </pre> <p> Вы можете найти эквиваленты атрибутов HTML для многих свойств обработчика событий; однако вы не должны использовать их - это считается плохой практикой. Может показаться, что использовать атрибут обработчика событий легко, если вы делаете что-то очень быстро, но они быстро становятся неуправляемыми и неэффективными.</p> <p> Для начала, не рекомендуется смешивать HTML и JavaScript, так как это становится трудным для синтаксического анализа - лучше всего держать JavaScript отдельно; если он находится в отдельном файле, вы можете применить его к нескольким HTML-документам. </p> <p> Даже в одном файле встроенные обработчики событий не являются хорошей идеей. Одна кнопка - это нормально, но что, если бы у вас было 100 кнопок? Вам нужно будет добавить в файл 100 атрибутов; это быстро превратилось бы в кошмар обслуживания. С помощью JavaScript вы можете легко добавить функцию обработчика событий ко всем кнопкам на странице, независимо от того, сколько их было, используя что-то вроде этого: </p> <pre> <code> const buttons = document.querySelectorAll ('кнопка'); for (let i = 0; i <buttons.length; i ++) { кнопки [i] .onclick = bgChange; } </code> </pre> <p> Обратите внимание, что другим вариантом здесь будет использование встроенного метода <code> forEach () </code>, доступного для объектов <code> NodeList </code>: </p> <pre> <code> buttons.forEach (function (button) { button.onclick = bgChange; }); </code> </pre> <p> <strong> Примечание: </strong> Отделение логики программирования от содержимого также делает ваш сайт более удобным для поисковых систем.</p> <h4><span class="ez-toc-section" id="%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B8_%D1%83%D0%B4%D0%B0%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BE%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%BE%D0%B2_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9"></span> Добавление и удаление обработчиков событий <span class="ez-toc-section-end"></span></h4> <p> Современный механизм добавления обработчиков событий - это метод <code> addEventListener () </code>. Используя его, мы могли бы переписать наш пример случайного цвета, чтобы он выглядел так: </p> <pre> <code> const btn = document.querySelector ('кнопка'); function bgChange () { const rndCol = 'rgb (' + случайный (255) + ',' + случайный (255) + ',' + случайный (255) + ')'; document.body.style.backgroundColor = rndCol; } btn.addEventListener ('щелчок', bgChange); </code> </pre> <p> Внутри функции <code> addEventListener () </code> мы указываем два параметра: имя события, для которого мы хотим зарегистрировать этот обработчик, и код, содержащий функцию обработчика, которую мы хотим запустить в ответ на него.Примечание: вполне уместно поместить весь код в функцию <code> addEventListener () </code> в анонимной функции, например: </p> <pre> <code> btn.addEventListener ('click', function () { var rndCol = 'rgb (' + случайный (255) + ',' + случайный (255) + ',' + случайный (255) + ')'; document.body.style.backgroundColor = rndCol; }); </code> </pre> <p> Этот механизм имеет некоторые преимущества по сравнению с более старыми механизмами, описанными здесь ранее. Во-первых, есть функция-аналог <code> removeEventListener () </code>, которая удаляет ранее добавленный обработчик событий.Например, это приведет к удалению обработчика событий, установленного в первом блоке кода в этом разделе: </p> <pre> <code> btn.removeEventListener («щелчок», bgChange); </code> </pre> <p> Обработчики событий </p> <p> также можно удалить, передав <code> AbortSignal </code> в <code> addEventListener () </code>, а затем, позже, вызвав <code> abort () </code> на контроллере, владеющем <code> AbortSignal </code>. Например, чтобы добавить обработчик событий, который мы можем удалить с помощью <code> AbortSignal </code>: </p> <pre> <code> const controller = новый AbortController (); кстатиaddEventListener ('щелчок', function () { var rndCol = 'rgb (' + случайный (255) + ',' + случайный (255) + ',' + случайный (255) + ')'; document.body.style.backgroundColor = rndCol; }, {сигнал: controller.signal}); </code> </pre> <p> Затем обработчик событий, созданный приведенным выше кодом, можно удалить следующим образом: </p> <p> Для простых небольших программ очистка старых неиспользуемых обработчиков событий не требуется, но для более крупных и сложных программ это может повысить эффективность. Кроме того, возможность удаления обработчиков событий позволяет одной и той же кнопке выполнять разные действия в разных обстоятельствах - все, что вам нужно сделать, это добавить или удалить обработчики.</p> <p> Второе преимущество <code> addEventListener () </code> по сравнению с более старыми механизмами, обсуждавшимися здесь ранее, заключается в том, что он позволяет вам регистрировать несколько обработчиков для одного и того же слушателя. Следующие два обработчика не будут применяться оба: </p> <pre> <code> myElement.onclick = functionA; myElement.onclick = functionB; </code> </pre> <p> Вторая строка перезаписывает значение <code> onclick </code>, установленное первой строкой. Однако сработает следующее: </p> <pre> <code> myElement.addEventListener ('щелчок', functionA); myElement.addEventListener ('щелчок', функцияB); </code> </pre> <p> Обе функции теперь будут выполняться при выборе элемента. </p> <p> Кроме того, с этим механизмом событий доступны другие мощные функции и опции. Они немного выходят за рамки данной статьи, но если вы хотите их прочитать, посетите справочные страницы <code> addEventListener () </code> и <code> removeEventListener () </code>. </p> <h4><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BA%D0%BE%D0%B9_%D0%BC%D0%B5%D1%85%D0%B0%D0%BD%D0%B8%D0%B7%D0%BC_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C"></span> Какой механизм использовать? <span class="ez-toc-section-end"></span></h4> <p> Есть только два метода, которые вы должны учитывать при обработке событий: </p> <ul> <li> Свойства обработчика событий имеют меньше возможностей и параметров, но их проще использовать.Так что, когда вы начнете учиться, вы можете начать с них. </li> <li> <code> addEventListener () </code> более сложный, но и более мощный. Поэтому после того, как вы начали учиться, вы должны попытаться использовать его там, где это возможно. </li> </ul> <p> Основные преимущества <code> addEventListener () </code> заключаются в следующем: </p> <ul> <li> При необходимости вы можете удалить код обработчика событий, используя <code> removeEventListener () </code>. </li> <li> При необходимости вы можете добавить к элементам несколько слушателей одного и того же типа.</li> </ul> <p> Например, вы можете вызвать <code> addEventListener ('click', function () {...}) </code> для элемента несколько раз, с разными функциями, указанными во втором аргументе. Это невозможно со свойствами обработчика событий, потому что любые последующие попытки установить свойство будут перезаписывать более ранние, например: </p> <pre> <code> element.onclick = function1; element.onclick = function2; пр. </code> </pre> <p> Никогда не используйте атрибуты обработчика событий HTML - они устарели, и их использование является плохой практикой.</p> <p> В этом разделе мы кратко рассмотрим некоторые расширенные концепции, относящиеся к событиям. На данном этапе не важно полностью понимать эти концепции, но они могут служить для объяснения некоторых шаблонов кода, с которыми вы, вероятно, столкнетесь. </p> <h4><span class="ez-toc-section" id="%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9"></span> Объекты событий <span class="ez-toc-section-end"></span></h4> <p> Иногда внутри функции обработчика событий вы видите параметр, указанный с именем, например <code> event </code>, <code> evt </code> или <code> e </code>. Это называется объектом события <strong> </strong>, и он автоматически передается обработчикам событий для предоставления дополнительных функций и информации.Например, давайте еще раз немного перепишем наш пример случайного цвета: </p> <pre> <code> function bgChange (e) { const rndCol = 'rgb (' + случайный (255) + ',' + случайный (255) + ',' + случайный (255) + ')'; e.target.style.backgroundColor = rndCol; console.log (e); } btn.addEventListener ('щелчок', bgChange); </code> </pre> <p> Здесь вы можете видеть, что мы включаем объект события, <strong> e </strong>, в функцию и в функцию, устанавливающую стиль цвета фона на <code> e.target </code>, который является самой кнопкой.Свойство <code> target </code> объекта события всегда является ссылкой на элемент, на котором произошло событие. Итак, в этом примере мы устанавливаем случайный цвет фона для кнопки, а не для страницы. </p> <p> <strong> Примечание: </strong> Вы можете использовать любое имя для объекта события - вам просто нужно выбрать имя, которое затем можно использовать для ссылки на него внутри функции обработчика событий. <code> e </code>/<code> evt </code>/<code> event </code> чаще всего используются разработчиками, потому что они короткие и легко запоминающиеся.Всегда хорошо быть последовательным - с самим собой и, если возможно, с другими. </p> <p> <code> e.target </code> невероятно полезен, когда вы хотите установить один и тот же обработчик событий для нескольких элементов и что-то делать со всеми из них, когда на них происходит событие. Например, у вас может быть набор из 16 плиток, которые исчезают при выборе. Полезно всегда иметь возможность просто указать, что объект исчезнет как <code> e.target </code>, вместо того, чтобы выбирать его каким-либо более сложным способом. В следующем примере (см. Полезный-eventtarget.html для полного исходного кода; также посмотрите, как он работает здесь), мы создаем 16 <code> </p> <div> </code> элементов, используя JavaScript. Затем мы выбираем все из них с помощью <code> document.querySelectorAll () </code>, затем перебираем каждый из них, добавляя обработчик <code> onclick </code> к каждому, что делает так, что при выборе к каждому из них применяется случайный цвет: </p> <pre> <code> const divs = document.querySelectorAll ('div'); for (let i = 0; i <divs.length; i ++) { divs [i] .onclick = function (e) { е.target.style.backgroundColor = bgChange (); } } </code> </pre> <p> Результат выглядит следующим образом (попробуйте щелкнуть по нему - получайте удовольствие): </p> <p> Большинство обработчиков событий, с которыми вы столкнетесь, имеют стандартный набор свойств и функций (методов), доступных для объекта события; см. полный список в справочнике по объекту <code> Event </code>. Однако некоторые более продвинутые обработчики добавляют специальные свойства, содержащие дополнительные данные, которые им необходимы для работы. API Media Recorder, например, имеет событие <code> dataavailable </code>, которое срабатывает, когда записано какое-то аудио или видео, и доступно для выполнения каких-либо действий (например, сохранения или воспроизведения).Соответствующий объект события обработчика ondataavailable имеет доступное свойство <code> data </code>, содержащее записанные аудио- или видеоданные, чтобы вы могли получить к ним доступ и что-то с ними сделать. </p> <h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B5%D0%B4%D0%BE%D1%82%D0%B2%D1%80%D0%B0%D1%89%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BF%D0%BE%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D1%8F_%D0%BF%D0%BE_%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E"></span> Предотвращение поведения по умолчанию <span class="ez-toc-section-end"></span></h4> <p> Иногда вы можете столкнуться с ситуацией, когда нужно запретить событию делать то, что оно делает по умолчанию. Наиболее распространенным примером является веб-форма, например настраиваемая форма регистрации. Когда вы заполняете детали и нажимаете кнопку отправки, естественным поведением является отправка данных на определенную страницу на сервере для обработки, а браузер перенаправляется на страницу с «сообщением об успешном завершении» (или та же страница, если не указана другая.) </p> <p> Проблема возникает, когда пользователь не отправил данные правильно - как разработчик вы хотите предотвратить отправку на сервер и выдать сообщение об ошибке, в котором говорится, что не так и что нужно сделать, чтобы все исправить. Некоторые браузеры поддерживают функции автоматической проверки данных форм, но, поскольку многие этого не делают, рекомендуется не полагаться на них и реализовывать собственные проверки. Давайте посмотрим на простой пример. </p> <p> Во-первых, простая HTML-форма, требующая ввода вашего имени и фамилии: </p> <pre> <code> <форма> <div> <label for = "fname"> Имя: </label> <input type = "text"> </div> <div> <label for = "lname"> Фамилия: </label> <input type = "text"> </div> <div> <input type = "submit"> </div> </form> <p> </p> </code> </pre> <pre> <code> div { нижнее поле: 10 пикселей; } </code> </pre> <p> Теперь немного JavaScript - здесь мы реализуем очень простую проверку внутри обработчика события <code> onsubmit </code> (событие отправки запускается в форме при ее отправке), которая проверяет, пусты ли текстовые поля.Если это так, мы вызываем функцию <code> preventDefault () </code> для объекта события, которая останавливает отправку формы, а затем отображаем сообщение об ошибке в абзаце под формой, чтобы сообщить пользователю, что не так: </p> <pre> <code> const form = document.querySelector ('form'); const fname = document.getElementById ('имя_файла'); const lname = document.getElementById ('lname'); const para = document.querySelector ('p'); form.onsubmit = function (e) { if (fname.value === '' || lname.value === '') { е.preventDefault (); para.textContent = 'Вам нужно ввести оба имени!'; } } </code> </pre> <p> Очевидно, что это довольно слабая проверка формы - она ​​не помешает пользователю проверять форму с помощью пробелов или чисел, введенных в поля, например, - но это нормально, например, для целей. Результат выглядит следующим образом: </p> <h4><span class="ez-toc-section" id="%D0%92%D0%BE%D0%B7%D0%B1%D1%83%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B8_%D0%B7%D0%B0%D1%85%D0%B2%D0%B0%D1%82_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9"></span> Возбуждение и захват событий <span class="ez-toc-section-end"></span></h4> <p> Последняя тема, которую мы здесь обсудим, - это то, с чем вы не часто будете сталкиваться, но это может быть настоящей болью, если вы этого не понимаете.Возврат событий и захват событий - это два механизма, которые описывают, что происходит, когда два обработчика одного и того же типа события активируются для одного элемента. Давайте рассмотрим пример, чтобы упростить эту задачу - откройте пример show-video-box.html в новой вкладке (и исходный код в другой вкладке). Он также доступен в реальном времени ниже: </p> <p> Это довольно простой пример, который показывает и скрывает <code> </p> <div> </code> с элементом <code> <video> </code> внутри него: </p> <pre> <code> <button> Показать видео </button> <div> <видео> <источник src = "rabbit320.mp4 "type =" video / mp4 "> <source src = "rabbit320.webm" type = "video / webm"> <p> Ваш браузер не поддерживает видео в формате HTML5. Вот <a href="rabbit320.mp4"> ссылка на видео </a>. </p> </video> </div> </code> </pre> <p> Когда выбран <code> <button> </code>, видео отображается путем изменения атрибута класса на <code> </p> <div> </code> с <code> скрытого </code> на <code>, показывающего </code> (CSS примера содержит эти два класса, которые позиционируют поле вне экран и на экране соответственно): </p> <pre> <code> бт.onclick = function () { videoBox.setAttribute ('класс', 'показ'); } </code> </pre> <p> Затем мы добавляем еще пару обработчиков событий <code> onclick </code> - первый к <code> </p> <div> </code>, а второй к <code> <video> </code>. Теперь, когда выбрана область <code> </p> <div> </code> за пределами видео, поле должно быть снова скрыто, а когда само видео выбрано, видео должно начать воспроизведение. </p> <pre> <code> videoBox.onclick = function () { videoBox.setAttribute ('класс', 'скрытый'); }; video.onclick = function () { video.play (); }; </code> </pre> <p> Но есть проблема - в настоящее время, когда вы выбираете видео, оно начинает воспроизводиться, но при этом одновременно скрывается <code> </p> <div> </code>. Это связано с тем, что видео находится внутри <code> </p> <div> </code> - оно является его частью - поэтому при выборе видео фактически запускаются <em> и </em> вышеуказанных обработчиков событий. </p> <h5><span class="ez-toc-section" id="%D0%9F%D0%BE%D1%8F%D1%81%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BA_%D0%BF%D1%83%D0%B7%D1%8B%D1%80%D1%8F%D0%BC_%D0%B8_%D0%B7%D0%B0%D1%85%D0%B2%D0%B0%D1%82%D1%83"></span> Пояснение к пузырям и захвату <span class="ez-toc-section-end"></span></h5> <p> Когда событие запускается в элементе, который имеет родительские элементы (в данном случае <code> <video> </code> имеет <code> </p> <div> </code> в качестве родительского), современные браузеры запускают три разных фазы - <strong>, захват </strong>, фаза <strong> нацелена на фазу </strong>, а <strong> - на пузырьковую фазу </strong>.</p> <p> В фазе захвата <strong> </strong>: </p> <ul> <li> Браузер проверяет, имеет ли внешний предок элемента (<code> <html> </code>) обработчик событий <code> onclick </code>, зарегистрированный для фазы захвата, и запускает его, если это так. </li> <li> Затем он переходит к следующему элементу внутри <code> <html> </code> и делает то же самое, затем к следующему и так далее, пока не достигнет прямого родителя элемента, который был фактически выбран. </li> </ul> <p> В целевой <strong> фазе </strong>: </p> <ul> <li> Браузер проверяет, имеет ли свойство <code> target </code> обработчик событий для события <code> click </code>, зарегистрированного на нем, и запускает его, если это так.</li> <li> Затем, если <code> пузырьков </code> соответствует <code> истинному </code>, событие распространяется на прямого родителя выбранного элемента, затем на следующий и так далее, пока не достигнет элемента <code> <html> </code>. В противном случае, если <code> пузырьков </code> является <code> ложным </code>, событие не распространяется ни на одного предка цели. </li> </ul> <p> В фазе <strong> пузырьков </strong> происходит полная противоположность фазе <strong> захвата </strong>: </p> <ul> <li> Браузер проверяет, имеет ли прямой родительский элемент выбранного элемента обработчик событий <code> onclick </code>, зарегистрированный на нем для фазы восходящей цепочки, и запускает его, если это так.</li> <li> Затем он переходит к следующему непосредственному элементу-предку и делает то же самое, затем к следующему, и так далее, пока не достигнет элемента <code> <html> </code>. </li> </ul> <p> В современных браузерах по умолчанию все обработчики событий зарегистрированы для фазы восходящей цепочки. Итак, в нашем текущем примере, когда вы выбираете видео, событие всплывает от элемента <code> <video> </code> наружу к элементу <code> <html> </code>. В пути: </p> <ul> <li> Находит видео <code>.onclick ... </code> и запускает его, поэтому сначала начинается воспроизведение видео. </li> <li> Затем он находит обработчик <code> videoBox.onclick ... </code> и запускает его, поэтому видео также скрывается. </li> </ul> <p> <strong> Примечание: </strong> Все события JavaScript проходят этапы захвата и назначения. Переходит ли событие в фазу восходящей цепочки, можно проверить с помощью свойства <code> пузырей </code> только для чтения. </p> <p> <strong> Примечание. </strong> Прослушиватели событий, зарегистрированные для элемента <code> <html> </code>, не находятся на вершине иерархии.Например, прослушиватели событий, зарегистрированные для объектов </code> окна <code> и <code> документа </code>, находятся выше в иерархии. </p> <p> Следующий пример демонстрирует поведение, описанное выше. Наведите указатель мыши на числа и щелкните их, чтобы инициировать события, а затем наблюдайте за выходными данными, которые регистрируются. </p> <h5><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80_%D0%BA%D0%BE%D0%B4%D0%B0_%D1%84%D0%B0%D0%B7%D1%8B_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9"></span> Пример кода: фазы событий <span class="ez-toc-section-end"></span></h5> <pre> <code> <div> 1 <div> 2 <div> 3 <div> 4 <div> 5 </div> </div> </div> </div> </div> <button> очистить вывод </button> <section> </section> </code> </pre> <pre> <code> p { высота строки: 0; } div { дисплей: встроенный блок; отступ: 5 пикселей; фон: #fff; граница: 1px solid #aaa; курсор: указатель; } div: hover { граница: сплошная 1px #faa; фон: #fdd; } </code> </pre> <pre> <code> let evtPhasestr = ["НЕТ:", "CAPTURING_PHASE:", "AT_TARGET:", "BUBBLING_PHASE:"]; var logElement = документ.getElementById ('журнал'); function log (msg) { logElement.innerHTML + = ('<p>' + msg + '</p>'); } function phase (evt) { журнал (evtPhasestr [evt.eventPhase] + this.firstChild.nodeValue.trim ()); } function gphase (evt) { журнал (evtPhasestr [evt.eventPhase] + evt.currentTarget) } function clearOutput () { logElement.innerHTML = ""; } var divs = document.getElementsByTagName ('div'); for (var i = 0; i <divs.length; i ++) { divs [i] .addEventListener ('щелчок', фаза, истина); divs [я].addEventListener ('щелчок', фаза, ложь); } document.addEventListener ('щелчок', gphase, true); document.addEventListener ('щелчок', gphase, false); window.addEventListener ('щелчок', gphase, true); window.addEventListener ('щелчок', gphase, false); var clearButton = document.getElementById ('очистить'); clearButton.addEventListener («щелчок», clearOutput); </code> </pre> <h5><span class="ez-toc-section" id="%D0%A3%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BF%D1%80%D0%BE%D0%B1%D0%BB%D0%B5%D0%BC%D1%8B_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_stopPropagation"></span> Устранение проблемы с помощью stopPropagation () <span class="ez-toc-section-end"></span></h5> <p> Это очень раздражающее поведение, но есть способ исправить это! Стандартный объект <code> Event </code> имеет доступную функцию <code> stopPropagation () </code>, которая при вызове объекта события обработчика позволяет запускать первый обработчик, но событие не всплывает дальше по цепочке, поэтому обработчики больше запускаться не будут.</p> <p> Таким образом, мы можем решить нашу текущую проблему, изменив функцию второго обработчика в предыдущем блоке кода на эту: </p> <pre> <code> video.onclick = function (e) { e.stopPropagation (); video.play (); }; </code> </pre> <p> Вы можете попробовать создать локальную копию исходного кода show-video-box.html и исправить ее самостоятельно или посмотреть фиксированный результат в show-video-box-fixed.html (также см. Исходный код здесь). </p> <p> <strong> Примечание: </strong> Зачем заморачиваться и с захватом, и с пузырьками? Что ж, в старые добрые времена, когда браузеры были гораздо менее кросс-совместимыми, чем сейчас, Netscape использовал только захват событий, а Internet Explorer использовал только всплытие событий.Когда W3C решил попытаться стандартизировать поведение и достичь консенсуса, в итоге они получили систему, которая включала в себя и то, и другое, что является одним из реализованных современных браузеров. </p> <p> <strong> Примечание: </strong> Как упоминалось выше, по умолчанию все обработчики событий регистрируются в фазе восходящей цепочки, и в большинстве случаев это имеет смысл. Если вы действительно хотите зарегистрировать событие на этапе захвата, вы можете сделать это, зарегистрировав свой обработчик с помощью <code> addEventListener () </code> и установив для дополнительного третьего свойства значение <code> true </code>.</p> <h5><span class="ez-toc-section" id="%D0%94%D0%B5%D0%BB%D0%B5%D0%B3%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BC%D0%B5%D1%80%D0%BE%D0%BF%D1%80%D0%B8%D1%8F%D1%82%D0%B8%D1%8F"></span> Делегирование мероприятия <span class="ez-toc-section-end"></span></h5> <p> Bubbling также позволяет нам использовать делегирование событий <strong> </strong> - эта концепция основана на том факте, что если вы хотите, чтобы какой-то код запускался при выборе любого из большого количества дочерних элементов, вы можете установить прослушиватель событий на их родительский элемент. и имеют события, которые происходят с ними, всплывают до их родителя, вместо того, чтобы устанавливать прослушиватель событий для каждого дочернего элемента индивидуально. Помните, что восходящая маршрутизация включает в себя проверку элемента, для которого инициировано событие, сначала для обработчика событий, затем переход к родительскому элементу и т. Д.</p> <p> Хорошим примером является серия элементов списка - если вы хотите, чтобы при выборе каждого из них отображалось всплывающее сообщение, вы можете установить прослушиватель событий <code> click </code> для родительского <code> </p> <ul> </code>, и события будут всплывать из элементов списка к <code> </p> <ul> </code>. </p> <p> Эта концепция объясняется далее в блоге Дэвида Уолша с множеством примеров - см. Как работает делегирование событий JavaScript. </p> <p> Вы дошли до конца этой статьи, но можете ли вы вспомнить самую важную информацию? Чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше, см. Раздел Проверка своих навыков: События.</p> <p> Теперь вы должны знать все, что вам нужно знать о веб-событиях на этой ранней стадии. Как уже упоминалось, события на самом деле не являются частью ядра JavaScript - они определены в веб-API браузера. </p> <p> Также важно понимать, что разные контексты, в которых используется JavaScript, имеют разные модели событий - от веб-API до других областей, таких как WebExtensions браузера и Node.js (серверный JavaScript). Мы не ожидаем, что вы сейчас поймете все эти области, но это, безусловно, помогает понять основы событий, когда вы продвигаетесь вперед в изучении веб-разработки.</p> <p> Если вы чего-то не поняли, прочтите статью еще раз или свяжитесь с нами, чтобы попросить о помощи. </p> <ul> <li> Domevents.dev - очень полезное приложение для интерактивной игровой площадки, которое позволяет изучать поведение системы событий DOM посредством исследования. </li> <li> Ссылка на событие </li> <li> Порядок событий (обсуждение захвата и всплывания) - прекрасно детализированная пьеса Петра-Пола Коха. </li> <li> Доступ к событию (обсуждение объекта события) - еще одна прекрасно детализированная работа Петра-Павла Коха.</li> </ul> <h2><span class="ez-toc-section" id="%D0%9E%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9_%D0%BE%D0%B1%D0%B7%D0%BE%D1%80_-_%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B0_%D0%BD%D0%B0_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B5"></span> Обработка событий (обзор) - ссылка на событие <span class="ez-toc-section-end"></span></h2> <p> События - это сигналы, запускаемые внутри окна браузера, которые уведомляют об изменениях в браузере или среде операционной системы. Программисты могут создать код </em> обработчика событий <em>, который будет запускаться при возникновении события, позволяя веб-страницам соответствующим образом реагировать на изменения. </p> <p> Эта страница представляет собой очень краткое «напоминание» о том, как работать с событиями и обработчиками событий. Новым разработчикам следует вместо этого прочитать Введение в события.</p> <p> События документируются на и / или под страницами для объектов JavaScript, которые их генерируют. Например, чтобы узнать о событиях, запущенных в окне браузера или в текущем документе, см. Разделы событий в <code> Window </code> и <code> Document </code>. </p> <p> Вы можете использовать ссылку на событие, чтобы узнать, какие объекты JavaScript запускают события для определенных API, например анимация, медиа и т. д. </p> <p> Есть два рекомендуемых подхода к регистрации обработчиков. Код обработчика событий можно запустить при запуске события, назначив его соответствующему свойству <em> onevent </em> целевого элемента или зарегистрировав обработчик в качестве прослушивателя для элемента с помощью метода <code> addEventListener () </code>.В любом случае обработчик получит объект, соответствующий интерфейсу <code> Event </code> (или производному интерфейсу). Основное отличие состоит в том, что несколько обработчиков событий могут быть добавлены (или удалены) с помощью методов прослушивателя событий. </p> <p> <strong> Предупреждение: </strong> Третий подход к настройке обработчиков событий с использованием атрибутов HTML onevent не рекомендуется! Они раздувают разметку и делают ее менее читаемой и трудной для отладки. Для получения дополнительной информации см. Встроенные обработчики событий. </p> <h4><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2_onevent"></span> Использование свойств onevent <span class="ez-toc-section-end"></span></h4> <p> По соглашению, объекты Javascript, запускающие события, имеют соответствующие свойства «onevent» (именуемые с помощью префикса «on» к имени события).Эти свойства вызываются для запуска связанного кода обработчика при запуске события, а также могут быть вызваны непосредственно вашим собственным кодом. </p> <p> Чтобы установить код обработчика событий, вы можете просто назначить его соответствующему свойству onevent. Для каждого события в элементе может быть назначен только один обработчик событий. При необходимости обработчик можно заменить, присвоив тому же свойству другую функцию. </p> <p> Ниже мы покажем, как установить простую функцию <code> greet () </code> для события <code> click </code> с помощью свойства <code> onclick </code>.</p> <pre> <code> const btn = document.querySelector ('кнопка'); function greet (event) { console.log ('приветствовать:', аргументы) } btn.onclick = приветствовать; </code> </pre> <p> Обратите внимание, что объект, представляющий событие, передается обработчику события в качестве первого аргумента. Этот объект события либо реализует, либо является производным от интерфейса <code> Event </code>. </p> <h4><span class="ez-toc-section" id="EventTargetaddEventListener"></span> EventTarget.addEventListener <span class="ez-toc-section-end"></span></h4> <p> Самый гибкий способ установить обработчик событий для элемента - использовать <code> EventTarget.addEventListener </code> метод. Этот подход позволяет назначать элементу несколько слушателей, а для слушателей <em> при необходимости удаляется </em> (с использованием <code> EventTarget.removeEventListener </code>). </p> <p> <strong> Примечание: </strong> Возможность добавлять и удалять обработчики событий позволяет, например, иметь одну и ту же кнопку, выполняющую разные действия в разных обстоятельствах. Кроме того, в более сложных программах очистка старых / неиспользуемых обработчиков событий может повысить эффективность. </p> <p> Ниже мы покажем, как простую функцию <code> greet () </code> можно установить в качестве слушателя / обработчика событий для события <code> click </code> (при желании вы можете использовать лямбда-функцию вместо именованной функции).Еще раз обратите внимание, что событие передается как первый аргумент обработчику события. </p> <pre> <code> const btn = document.querySelector ('кнопка'); function greet (event) { console.log ('приветствовать:', аргументы) } btn.addEventListener («щелкнуть», приветствовать); </code> </pre> <p> Метод также может принимать дополнительные аргументы / параметры для управления аспектами захвата и удаления событий. Дополнительную информацию можно найти на справочной странице <code> EventTarget.addEventListener </code>. </p> <h5><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%B8%D0%B3%D0%BD%D0%B0%D0%BB%D0%B0_%D0%BF%D1%80%D0%B5%D1%80%D1%8B%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F"></span> Использование сигнала прерывания <span class="ez-toc-section-end"></span></h5> <p> Примечательной особенностью прослушивателя событий является возможность использовать сигнал прерывания для одновременной очистки нескольких обработчиков событий.</p> <p> Это делается путем передачи того же <code> AbortSignal </code> вызову <code> addEventListener () </code> для всех обработчиков событий, которые вы хотите удалить вместе. Затем вы можете вызвать <code> abort () </code> на контроллере, владеющем <code> AbortSignal </code>, и он удалит все обработчики событий, которые были добавлены с этим сигналом. Например, чтобы добавить обработчик событий, который мы можем удалить с помощью <code> AbortSignal </code>: </p> <pre> <code> const controller = новый AbortController (); кстатиaddEventListener ('щелчок', функция (событие) { console.log ('приветствовать:', аргументы) }, {сигнал: controller.signal}); </code> </pre> <p> Затем обработчик событий, созданный приведенным выше кодом, можно удалить следующим образом: </p> <h2><span class="ez-toc-section" id="%D0%9E%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%B8_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9"></span> Обработчики событий <span class="ez-toc-section-end"></span></h2> <p> Обработчики событий</p> <p> Приложения </p> <p> JavaScript в навигаторе в значительной степени управляются событиями.<br /> <i> События </i> - это действия, которые обычно происходят в результате действий пользователя. </p> <p> Например, нажатие кнопки является событием, так как фокусируется на форме.<br /> элемент.Навигатор распознает определенный набор событий.<br /> Вы можете определить <i> обработчики событий </i>, скрипты, которые автоматически выполняются<br /> когда происходит событие. </p> <p> Обработчики событий встраиваются в документы как атрибуты тегов HTML, которым вы назначаете код JavaScript для выполнения.<br /> Общий синтаксис: </p> <p>где TAG - это некоторый HTML-тег, а <i> eventHandler </i> - имя обработчика событий.</p> <p> Например, предположим, что вы создали функцию JavaScript с именем<br /> <i> вычислить </i>.Вы можете заставить Navigator выполнять эту функцию, когда пользователь нажимает<br /> button, назначив вызов функции обработчику события кнопки <i> onClick </i>:</p> <p> Вы можете поместить любые операторы JavaScript в кавычки после <i> onClick </i>.<br /> Эти операторы выполняются, когда пользователь нажимает кнопку.<br /> Если вы хотите включить более одного оператора, разделяйте их точкой с запятой (;). </p> <p> В общем, рекомендуется определять функции для обработчиков событий, потому что: </p> <ul> <li> он делает ваш код модульным - вы можете использовать ту же функцию, что и обработчик событий для<br /> много разных предметов.</li> <li> упрощает чтение кода. </li> </ul> <p> Обратите внимание, что в этом примере используется <b> this.form </b> для ссылки на текущую форму.<br /> Ключевое слово<br /> <b> этот </b> относится к текущему объекту - в приведенном выше примере<br /> объект кнопки. Затем конструкция <b> this.form </b> обращается к форме<br /> содержащий кнопку. В приведенном выше примере обработчик события onClick - это<br /> вызов функции <i> compute () </i> с <b> this.форма </b>, действующая форма,<br /> в качестве параметра функции.</p> <p> События применяются к тегам HTML следующим образом: </p> <ul> <li> События фокусировки, размытия, изменения: текстовые поля, текстовые поля и выделения </li> <li> События кликов: кнопки, переключатели, флажки, отправка<br /> кнопки, кнопки сброса, ссылки </li> <li> Выбрать события: текстовые поля, текстовые поля </li> <li> Событие MouseOver: ссылки </li> </ul> <p> Если событие применяется к тегу HTML, вы можете определить для него обработчик событий.Обычно обработчик события имеет имя события, которому предшествует «on».<br /> Например, обработчиком события Focus является onFocus. </p> <p> Многие объекты также имеют методы, имитирующие события. Например, кнопка имеет щелчок<br /> метод, который имитирует нажатие кнопки.<br /> <b> Примечание. </b> Методы эмуляции событий не запускают обработчики событий. Так, например,<br /> метод click не запускает обработчик событий onClick.<br /> Однако вы всегда можете вызвать обработчик событий напрямую (например, вы можете вызвать<br /> onClick явно в скрипте).</p> <table border=""> <tr> <th> Событие </th> <th> Возникает, когда ... </th> <th> Обработчик событий </th> </tr> <tr> <td> размытие </td> <td> Пользователь убирает фокус ввода с элемента формы </td> <td> onBlur </td> </tr> <tr> <td> нажмите </td> <td> Пользователь нажимает на элемент формы или ссылку </td> <td> onClick </td> </tr> <tr> <td> изменить </td> <td> Пользователь изменяет значение текста, текстового поля или элемента выбора </td> <td> на замену </td> </tr> <tr> <td> фокус </td> <td> Пользователь устанавливает фокус ввода элемента формы </td> <td> на Focus </td> </tr> <tr> <td> нагрузка </td> <td> Пользователь загружает страницу в навигатор </td> <td> на нагрузке </td> </tr> <tr> <td> при наведении указателя мыши </td> <td> Пользователь наводит указатель мыши на ссылку или привязку </td> <td> на MouseOver </td> </tr> <tr> <td> выбрать </td> <td> Пользователь выбирает поле ввода элемента формы </td> <td> on Выбрать </td> </tr> <tr> <td> представить </td> <td> Пользователь отправляет форму </td> <td> on Отправить </td> </tr> <tr> <td> выгрузить </td> <td> Пользователь выходит со страницы </td> <td> on Выгрузить </td> </tr> </table> <hr/> <p> <b> Пример 4: сценарий с формой и атрибутом обработчика событий.</b></p> <p> <b> Пример 4-страничного отображения. </b> </p> <h3><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%86%D0%B8%D1%82%D0%B0%D1%82"></span> Использование цитат<br /> <span class="ez-toc-section-end"></span></h3> <p> Обязательно чередуйте двойные кавычки с одинарными кавычками. Поскольку обработчики событий в<br /> HTML должен быть заключен в кавычки, вы должны использовать одинарные кавычки для разделения<br /> аргументы. Например </p> <p><FORM NAME = "myform"> <br /> <INPUT TYPE = "button" NAME = "Button1" VALUE = "Открой Сезам!" <br /> onClick = "окно.open ('stmtsov.html', 'newWin', <br /> 'панель инструментов = нет, каталоги = нет') "> <br /> </FORM></p> <p> Кроме того, кавычки можно избежать, поставив перед ними обратную косую черту (\). </p> <h2><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%BD%D0%B8%D0%BC%D0%B0%D0%BD%D0%B8%D0%B5_%C2%AB%D0%BE%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%BE%D0%B2_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9%C2%BB_%D0%B2_JavaScript"></span> Понимание «обработчиков событий» в JavaScript <span class="ez-toc-section-end"></span></h2> <h4 align="left"><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%BD%D0%B8%D0%BC%D0%B0%D0%BD%D0%B8%D0%B5_%22%D0%BE%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%BE%D0%B2_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9%22_%D0%B2_JavaScript"></span> Понимание "обработчиков событий" в JavaScript <span class="ez-toc-section-end"></span></h4> <p align="left"> Итак, что такое обработчики событий? Очень мощно и полезно! Они<br /> - это код JavaScript <em>, который не добавляется внутри тегов <script>, но<br /> скорее, внутри тегов html </em>, которые выполняют JavaScript, когда что-то<br /> происходит, например, нажатие кнопки, перемещение курсора мыши по ссылке,<br /> отправка формы и т. д.Базовый синтаксис этих обработчиков событий: </p> <p align="left"> name_of_handler = "Код JavaScript<br /> здесь "</p> <p align="left"> Например: </p> <pre> <a href="http://google.com"> Google </a> </pre> <p> Как вы понимаете, это определенно отличается от обычного кода JavaScript в том, что здесь<br /> мы вставляем его непосредственно в тег HTML через событие onClick<br /> обработчик. При щелчке по указанной выше ссылке пользователь сначала увидит предупреждение.<br /> сообщение перед отправкой в ​​Google.</p> <p> Различные обработчики событий с<br /> разные HTML-теги. Например, в то время как "onclick" можно вставить в большинство<br /> HTML-теги для ответа на действие этого тега onclick, что-то вроде "onload".<br /> (см. ниже) работает только внутри тегов <body> и <img>. Ниже приведены некоторые из<br /> наиболее часто используемые обработчики событий, поддерживаемые JavaScript: </p> <h5><span class="ez-toc-section" id="%D0%9E%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%B8_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9-2"></span> Обработчики событий: <span class="ez-toc-section-end"></span></h5> <table border="1" cellpadding="2" cellspacing="0"> <tr> <td bgcolor="#D8EA99"> <strong> нажмите: </strong> </td> <td> </td> <td> Используйте это для вызова JavaScript при нажатии (ссылка или поля формы) </td> </tr> <tr> <td bgcolor="#D8EA99"> <strong> загрузка: </strong> </td> <td> </td> <td> Используйте это для вызова JavaScript после того, как страница или изображение<br /> закончил загрузку.</td> </tr> <tr> <td bgcolor="#D8EA99"> <strong> на мышке: </strong> </td> <td> </td> <td> Используйте это для вызова JavaScript, если мышь проходит по какой-либо ссылке </td> </tr> <tr> <td bgcolor="#D8EA99"> <strong> onmouseout: </strong> </td> <td> </td> <td> Используйте это для вызова JavaScript, если мышь проходит мимо какой-либо ссылки </td> </tr> <tr> <td bgcolor="#D8EA99"> <strong> под нагрузкой: </strong> </td> <td> </td> <td> Используйте это для вызова JavaScript сразу после того, как кто-то покинет эту страницу.</td> </tr> </table> <p> обработчик события onClick</p> <h2><span class="ez-toc-section" id="%D0%9E%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%B8_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9_JavaScript"></span> Обработчики событий JavaScript <span class="ez-toc-section-end"></span></h2> <p> Когда ваши пользователи посещают ваш веб-сайт, они делают что-то, например, нажимают на объекты, наводят курсор на объекты и т. Д. Это примеры того, что JavaScript называет <i> событиями </i>. Используя JavaScript, вы можете реагировать на событие с помощью <i> обработчиков событий </i>. Вы можете прикрепить обработчик событий к HTML-элементу, на который вы хотите реагировать, когда происходит определенное событие. Например, вы можете прикрепить обработчик события <code> onMouseover </code> к кнопке и указать некоторый JavaScript, который будет запускаться всякий раз, когда это событие происходит с этой кнопкой.</p> <p> Обработчики событий </p> <h3><span class="ez-toc-section" id="%D0%B4%D0%BB%D1%8F_%D0%B2%D1%81%D0%B5%D1%85_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2_HTML_%D0%B8_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82"></span> для всех элементов HTML и документ <span class="ez-toc-section-end"></span></h3> <p><code> Окно </code> и <code> Объекты </code> </h3> <p> В следующей таблице перечислены обработчики событий, поддерживаемые всеми элементами HTML, как атрибуты содержимого обработчика событий, так и атрибуты IDL обработчика событий; и поддерживается всеми объектами <code> Document </code> и <code> Window </code> в качестве IDL-атрибутов обработчиков событий. </p> <table cellspacing="0" cellpadding="3"> <thead> <tr> <th> <strong> Атрибут </strong> </th> <th> <strong> Описание </strong> </th> </tr> </thead> <tbody> <tr> <td> <code> onabort </code> </td> <td> Вызывается, когда событие было прервано.Например, браузер прекращает получение мультимедийных данных до того, как они будут полностью загружены. </td> </tr> <tr> <td> <code> onauxclick </code> </td> <td> <code> обработчик событий auxclick </code>. </td> </tr> <tr> <td> <code> отмена </code> </td> <td> <code> отменить обработчик события </code>. </td> </tr> <tr> <td> <code> oncanplay </code> </td> <td> Вызывается, когда браузер / пользовательский агент может начать воспроизведение мультимедиа, но еще не начал его использовать из-за буферизации. Другими словами, если бы воспроизведение началось сейчас, оно не воспроизводилось бы до конца (из-за текущей скорости воспроизведения) - ему нужно было бы приостановить воспроизведение, чтобы загрузить остальную часть мультимедиа.</td> </tr> <tr> <td> <code> oncanplaythrough </code> </td> <td> Браузер / пользовательский агент оценивает, что если бы воспроизведение началось сейчас, медиаресурс мог бы быть отрисован с текущей скоростью воспроизведения до самого конца без необходимости останавливаться для дальнейшей буферизации. </td> </tr> <tr> <td> <code> на замену </code> </td> <td> Пользователь изменил объект, затем пытается покинуть это поле (т. Е. Щелкает в другом месте). </td> </tr> <tr> <td> <code> onclick </code> </td> <td> Вызывается, когда пользователь щелкает объект.</td> </tr> <tr> <td> <code> вкл. </code> </td> <td> <code> закрыть обработчик событий </code>. </td> </tr> <tr> <td> <code> контекстное меню </code> </td> <td> Вызывается при запуске контекстного меню. </td> </tr> <tr> <td> <code> на смену </code> </td> <td> <code> cuechange </code> обработчик событий. </td> </tr> <tr> <td> <code> ondblclick </code> </td> <td> Вызывается, когда пользователь дважды щелкает по объекту. </td> </tr> <tr> <td> <code> ондраг </code> </td> <td> Вызывается при перетаскивании элемента.</td> </tr> <tr> <td> <code> ондрагенд </code> </td> <td> Вызывается, когда перетаскивание элемента прекращается. </td> </tr> <tr> <td> <code> ондрагентер </code> </td> <td> Вызывается, когда элемент перетаскивается в цель перетаскивания. </td> </tr> <tr> <td> <code> ondragexit </code> </td> <td> <code> обработчик событий dragexit </code>. </td> </tr> <tr> <td> <code> ondragleave </code> </td> <td> Вызывается, когда элемент покидает допустимую цель перетаскивания. </td> </tr> <tr> <td> <code> ондраговер </code> </td> <td> Вызывается, когда элемент перетаскивается над допустимой целью перетаскивания.</td> </tr> <tr> <td> <code> ondragstart </code> </td> <td> Вызывается при запуске операции перетаскивания. </td> </tr> <tr> <td> <code> крышка </code> </td> <td> Вызывается, когда элемент удаляется. </td> </tr> <tr> <td> <code> на срок замены </code> </td> <td> Вызывается, когда длина носителя изменена (т. Е. Атрибут продолжительности <code> </code> был только что обновлен). </td> </tr> <tr> <td> <code> одноразовый </code> </td> <td> Вызывается, когда элемент медиаресурса внезапно становится пустым (например, из-за сетевой ошибки).</td> </tr> <tr> <td> <code> завершено </code> </td> <td> Вызывается, когда носитель достигает конца. </td> </tr> <tr> <td> <code> onformdata </code> </td> <td> <code> formdata </code> обработчик событий. </td> </tr> <tr> <td> <code> на входе </code> </td> <td> <code> обработчик событий input </code>. </td> </tr> <tr> <td> <code> недействительно </code> </td> <td> <code> недопустимый обработчик событий </code>. </td> </tr> <tr> <td> <code> нажатие клавиши </code> </td> <td> Вызывается при нажатии клавиши над элементом.</td> </tr> <tr> <td> <code> onkeypress </code> </td> <td> Вызывается, когда над элементом нажимается клавиша, а затем отпускается. </td> </tr> <tr> <td> <code> onkeyup </code> </td> <td> Вызывается при отпускании клавиши над элементом. </td> </tr> <tr> <td> <code> загруженные данные </code> </td> <td> Вызывается, когда браузер / пользовательский агент может визуализировать мультимедийные данные в текущей позиции воспроизведения в первый раз. </td> </tr> <tr> <td> <code> загруженные метаданные </code> </td> <td> Вызывается, когда браузер / пользовательский агент только что определил продолжительность и размеры медиаресурса.</td> </tr> <tr> <td> <code> при загрузке </code> </td> <td> Вызывается, когда браузер / пользовательский агент начал загрузку медиаресурса. </td> </tr> <tr> <td> <code> onmousedown </code> </td> <td> Курсор переместился на объект, и мышь / указывающее устройство было нажато. </td> </tr> <tr> <td> <code> onmouseenter </code> </td> <td> <code> mouseenter </code> обработчик событий. </td> </tr> <tr> <td> <code> onmouseleave </code> </td> <td> <code> mouseleave </code> обработчик событий.</td> </tr> <tr> <td> <code> onmousemove </code> </td> <td> Курсор перемещался при наведении курсора на объект. </td> </tr> <tr> <td> <code> на компьютере </code> </td> <td> Курсор отошел от объекта </td> </tr> <tr> <td> <code> над мышью </code> </td> <td> Курсор наведен на объект (т.е. пользователь наводит указатель мыши на объект). </td> </tr> <tr> <td> <code> onmouseup </code> </td> <td> Мышь / указывающее устройство было освобождено после нажатия.</td> </tr> <tr> <td> <code> на паузу </code> </td> <td> Вызывается, когда медиаресурс приостановлен. </td> </tr> <tr> <td> <code> в игре </code> </td> <td> Вызывается, когда медиаресурс начинает воспроизведение. </td> </tr> <tr> <td> <code> на игре </code> </td> <td> Воспроизведение началось. </td> </tr> <tr> <td> <code> в процессе </code> </td> <td> Браузер / пользовательский агент загружает мультимедийные данные из файла. </td> </tr> <tr> <td> <code> на скорости изменения </code> </td> <td> Вызывается при изменении скорости воспроизведения (т.е. либо <code> defaultPlaybackRate </code>, либо <code>playRate </code> только что были обновлены). </td> </tr> <tr> <td> <code> сброшено </code> </td> <td> <code> сбросить обработчик событий </code>. </td> </tr> <tr> <td> <code> Нарушение политики безопасности </code> </td> <td> <code> securitypolicyviolation </code> обработчик событий. </td> </tr> <tr> <td> <code> востребовано </code> </td> <td> Вызывается, когда IDL-атрибут поиска <code> </code> изменился на false (т. Е. Атрибут <code> поиска </code> больше не является истинным) </td> </tr> <tr> <td> <code> в поиске </code> </td> <td> Вызывается, когда <code> ищет атрибут IDL </code> изменился на true и операция поиска занимает достаточно времени, чтобы пользовательский агент успел запустить событие.</td> </tr> <tr> <td> <code> при выборе </code> </td> <td> Вызывается, когда выделено все или часть содержимого объекта. Например, пользователь выделил текст в текстовом поле. </td> </tr> <tr> <td> <code> на смену </code> </td> <td> <code> slotchange </code> обработчик событий. </td> </tr> <tr> <td> <code> установлен </code> </td> <td> Вызывается, когда браузер / пользовательский агент пытается получить мультимедийные данные, но данные остановились (т.е. данные перестали поступать).</td> </tr> <tr> <td> <code> при подаче </code> </td> <td> Пользователь отправил форму. </td> </tr> <tr> <td> <code> включение приостановлено </code> </td> <td> Браузер / пользовательский агент (намеренно) в настоящее время не загружает медиа-данные, но еще не загрузил весь медиаресурс (т.е. он приостановил загрузку). </td> </tr> <tr> <td> <code> ontimeupdate </code> </td> <td> Вызывается при изменении текущей позиции воспроизведения мультимедиа. </td> </tr> <tr> <td> <code> рычаг </code> </td> <td> <code> переключить обработчик событий </code>.</td> </tr> <tr> <td> <code> onvolumechange </code> </td> <td> Вызывается при изменении атрибута <code> тома </code> или <code> приглушенного атрибута </code>. </td> </tr> <tr> <td> <code> в ожидании </code> </td> <td> Следующий кадр мультимедиа еще не доступен (но браузер / пользовательский агент ожидает, что он станет доступным). </td> </tr> <tr> <td> <code> onwebkitanimationend </code> </td> <td> <code> обработчик событий webkitanimationend </code>. </td> </tr> <tr> <td> <code> onwebkitanimationiteration </code> </td> <td> <code> обработчик события webkitAnimationIteration </code>.</td> </tr> <tr> <td> <code> onwebkitanimationstart </code> </td> <td> <code> обработчик события webkitAnimationStart </code>. </td> </tr> <tr> <td> <code> onwebkittransitionend </code> </td> <td> <code> обработчик событий webkitTransitionEnd </code>. </td> </tr> <tr> <td> <code> на колесе </code> </td> <td> <code> wheel </code> обработчик событий. </td> </tr> </tbody> </table> <p> В следующей таблице перечислены обработчики событий (и соответствующие им типы событий обработчиков событий), поддерживаемые всеми элементами HTML, кроме элементов </code> body <code> и <code> frameset </code>, как атрибуты содержимого обработчика событий и IDL-атрибуты обработчиков событий; поддерживается всеми объектами <code> Document </code> в качестве IDL-атрибутов обработчика событий; и поддерживается всеми объектами <code> Window </code> в качестве IDL-атрибутов обработчика событий на самих объектах <code> Window </code>, а также с соответствующими атрибутами содержимого обработчика событий и IDL-атрибутами обработчика событий, представленными во всех элементах </code> body </code> и <code> frameset </code>, которые принадлежат им. <code> Окно </code> связанный объект <code> Документ </code>.</p> <table cellspacing="0" cellpadding="3"> <thead> <tr> <th> <strong> Атрибут </strong> </th> <th> <strong> Описание </strong> </th> </tr> </thead> <tbody> <tr> <td> <code> размытие </code> </td> <td> Пользователь покинул фокус элемента. </td> </tr> <tr> <td> <code> ошибка </code> </td> <td> Вызывается при возникновении ошибки во время загрузки объекта <code> Window </code>. Также обработчик уведомлений об ошибках скрипта. </td> </tr> <tr> <td> <code> onfocus </code> </td> <td> Вызывается, когда фокус находится на элементе.</td> </tr> <tr> <td> <code> загрузка </code> </td> <td> Элемент загружен. </td> </tr> <tr> <td> <code> по размеру </code> </td> <td> Размер области просмотра был изменен. </td> </tr> <tr> <td> <code> в прокрутке </code> </td> <td> <code> scroll </code> обработчик событий. Вызывается при прокрутке полосы прокрутки элемента. </td> </tr> </tbody> </table> <p> В следующей таблице перечислены обработчики событий, поддерживаемые объектами <code> Window </code> в качестве IDL-атрибутов обработчика событий на самих объектах <code> Window </code>, а также с соответствующими атрибутами содержимого обработчика событий и IDL-атрибутами обработчика событий, представленными на всех объектах <code> Body </code> и <code>. <code> frameset </code> элементов, которые принадлежат этому объекту <code> Window </code>, связанному с <code> Document </code>.</p> <table cellspacing="0" cellpadding="3"> <thead> <tr> <th> <strong> Атрибут </strong> </th> <th> <strong> Описание </strong> </th> </tr> </thead> <tbody> <tr> <td> <code> после печати </code> </td> <td> <code> afterprint </code> обработчик событий </td> </tr> <tr> <td> <code> до отпечатка </code> </td> <td> <code> beforeprint </code> обработчик событий </td> </tr> <tr> <td> <code> перед выгрузкой </code> </td> <td> <code> перед выгрузкой </code> обработчик событий </td> </tr> <tr> <td> <code> onhashchange </code> </td> <td> <code> hashchange </code> обработчик событий.Событие <code> hashchange </code> запускается при переходе к записи истории сеанса, URL-адрес которой отличается от URL-адреса предыдущей только идентификатором фрагмента. </td> </tr> <tr> <td> <code> onlanguagechange </code> </td> <td> <code> languagechange </code> обработчик событий. </td> </tr> <tr> <td> <code> в сообщении </code> </td> <td> <code> сообщение </code> обработчик событий. </td> </tr> <tr> <td> <code> onmessageerror </code> </td> <td> <code> messageerror </code> обработчик событий.</td> </tr> <tr> <td> <code> в сети </code> </td> <td> <code> офлайн </code> обработчик событий. </td> </tr> <tr> <td> <code> онлайн </code> </td> <td> <code> онлайн-обработчик событий </code>. </td> </tr> <tr> <td> <code> на странице скрыть </code> </td> <td> <code> pagehide </code> обработчик событий. Событие <code> pagehide </code> запускается при переходе <i> от </i> записи истории сеанса. </td> </tr> <tr> <td> <code> на странице </code> </td> <td> <code> pages показать обработчик событий </code>.Событие <code> pageshow </code> запускается при переходе от <i> к </i> записи истории сеанса. </td> </tr> <tr> <td> <code> onpopstate </code> </td> <td> <code> popstate </code> обработчик событий. Событие <code> popstate </code> запускается при переходе к записи журнала сеанса, представляющей объект состояния. </td> </tr> <tr> <td> <code> на утилизации </code> </td> <td> <code> rejectionhandled </code> обработчик событий. </td> </tr> <tr> <td> <code> на складе </code> </td> <td> <code> хранилище </code> обработчик событий.</td> </tr> <tr> <td> <code> необработанный отказ </code> </td> <td> <code> unhandledrejection </code> обработчик события. </td> </tr> <tr> <td> <code> на разгрузке </code> </td> <td> <code> выгрузить обработчик событий </code>. </td> </tr> </tbody> </table> <p> Ниже приведены обработчики событий, поддерживаемые всеми элементами HTML, как атрибуты содержимого обработчика событий, так и атрибуты IDL обработчика событий; и поддерживается всеми объектами <code> Document </code>, как IDL-атрибуты обработчика событий: </p> <table cellspacing="0" cellpadding="3"> <thead> <tr> <th> <strong> Атрибут </strong> </th> <th> <strong> Описание </strong> </th> </tr> </thead> <tbody> <tr> <td> <code> нарезка </code> </td> <td> <code> cut </code> обработчик событий.</td> </tr> <tr> <td> <code> копирование </code> </td> <td> <code> копировать </code> обработчик событий. </td> </tr> <tr> <td> <code> паста </code> </td> <td> <code> paste </code> обработчик событий. </td> </tr> </tbody> </table> <p> Следующий обработчик событий поддерживается на объектах <code> Document </code> как IDL-атрибут обработчика событий. </p> <table cellspacing="0" cellpadding="3"> <thead> <tr> <th> <strong> Атрибут </strong> </th> <th> <strong> Описание </strong> </th> </tr> </thead> <tbody> <tr> <td> <code> onreadystatechange </code> </td> <td> <code> readystatechange </code> обработчик событий.</td> </tr> </tbody> </table> <h3><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%BA%D0%B0_%D1%81%D1%82%D0%B0%D1%80%D1%8B%D1%85_%D0%B2%D0%B5%D1%80%D1%81%D0%B8%D0%B9"></span> Поддержка старых версий <span class="ez-toc-section-end"></span></h3> <p> Если вы используете приложение, созданное с помощью HTML 4, ваши возможности для обработчиков событий гораздо более ограничены. </p> <p> HTML 4 поддерживает только следующие 18 обработчиков событий: </p> <table> <thead> <tr> <th> Обработчик событий </th> <th> Событие, которое он обрабатывает </th> </tr> </thead> <tbody> <tr> <td> onBlur </td> <td> Пользователь покинул фокус объекта. Например, они щелкнули за пределами текстового поля, которое было ранее выбрано.</td> </tr> <tr> <td> on Change </td> <td> Пользователь изменил объект, затем пытается покинуть это поле (т. Е. Щелкает в другом месте). </td> </tr> <tr> <td> onClick </td> <td> Пользователь щелкнул объект. </td> </tr> <tr> <td> наDblClick </td> <td> Пользователь дважды щелкнул объект. </td> </tr> <tr> <td> на Focus </td> <td> Пользователь переместил фокус на объект (т. Е. Щелкнул по нему / сделал на нем вкладку) </td> </tr> <tr> <td> onKeydown </td> <td> На элементе была нажата клавиша.</td> </tr> <tr> <td> onKeyup </td> <td> Ключ был отпущен над элементом. </td> </tr> <tr> <td> onKeypress </td> <td> На элементе была нажата клавиша, а затем отпущена. </td> </tr> <tr> <td> на нагрузку </td> <td> Объект загружен. </td> </tr> <tr> <td> на Mousedown </td> <td> Курсор переместился на объект, и мышь / указывающее устройство было нажато. </td> </tr> <tr> <td> on Mouseup </td> <td> Мышь / указывающее устройство было освобождено после нажатия.</td> </tr> <tr> <td> на Mouseover </td> <td> Курсор наведен на объект (т.е. пользователь наводит указатель мыши на объект). </td> </tr> <tr> <td> on Mousemove </td> <td> Курсор перемещался при наведении курсора на объект.</p> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/javascript-obrabotchik-sobytij-vvedenie-v-brauzernye-sobytiya.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://jumper.su/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> Обязательные поля помечены <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Комментарий</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" /></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='9335' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #comments --> <nav class="navigation post-navigation" role="navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://jumper.su/raznoe/elektronnaya-pochta-samaya-bezopasnaya-rejting-bezopasnosti-pochtovyh-servisov-komu-doverit-svoyu-pochtu.html" rel="prev"><span class="screen-reader-text">Previous Post</span><span class="nav-title">Электронная почта самая безопасная: Рейтинг безопасности почтовых сервисов: кому доверить свою почту?</span></a></div><div class="nav-next"><a href="https://jumper.su/raznoe/zavisla-programma-chto-delat-chto-delat-esli-zavisla-programma-v-windows.html" rel="next"><span class="screen-reader-text">Next Post</span><span class="nav-title">Зависла программа что делать: Что делать, если зависла программа в Windows</span></a></div></div> </nav></article> </div> </div> <div class="col-md-4 col-lg-4"> <aside id="secondary" class="widget-area"> <section id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><ins class="adsbygoogle" style="display:inline-block;width:100%;height:600px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="6847132033" ></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></section><section id="categories-2" class="widget widget_categories"><h2 class="widget-title">Рубрики</h2> <ul> <li class="cat-item cat-item-6"><a href="https://jumper.su/category/wordpress">Wordpress</a> </li> <li class="cat-item cat-item-1"><a href="https://jumper.su/category/%d0%b1%d0%b5%d0%b7-%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b8">Без рубрики</a> </li> <li class="cat-item cat-item-7"><a href="https://jumper.su/category/verstka">Верстка</a> </li> <li class="cat-item cat-item-5"><a href="https://jumper.su/category/dizajn">Дизайн</a> </li> <li class="cat-item cat-item-4"><a href="https://jumper.su/category/dlya-nachinayushhih">Для начинающих</a> </li> <li class="cat-item cat-item-10"><a href="https://jumper.su/category/obuchenie">Обучение</a> </li> <li class="cat-item cat-item-9"><a href="https://jumper.su/category/primery">Примеры</a> </li> <li class="cat-item cat-item-3"><a href="https://jumper.su/category/raznoe">Разное</a> </li> <li class="cat-item cat-item-8"><a href="https://jumper.su/category/shablon">Шаблон</a> </li> </ul> </section></aside><!-- #secondary --> </div> </div> </main> </div> <section itemtype='https://schema.org/WPFooter' itemscope='itemscope' role='contentinfo' class="fansee-business-footer-wrapper"> <div class="container-fluid px-md-5"> <footer class="fansee-business-footer-wrapper-inner footer-widget"> <div class="footer-widget-wrapper"></div> <div class="footer-widget-wrapper"></div> <div class="footer-widget-wrapper"></div> <div class="footer-widget-wrapper"></div> </footer> </div> <div class="fansee-business-copyright"> <div class="container-fluid"> <div class="fansee-business-copyright-inner"> <div class="fansee-business-copy-right"> <div class="pr-0"> 2021 © Все права защищены. </div> </div> <div class="fansee-business-social-menu"> <ul class="fansee-business-demo-social-menu"> <li><a href="#" target="_blank"></a></li> <li><a href="#" target="_blank"></a></li> <li><a href="#" target="_blank"></a></li> <li><a href="#" target="_blank"></a></li> </ul> </div> </div> </div> </div> </section> <div class="fansee-business-stt scroll-to-top"> <i class="fa fa-arrow-up"></i> </div> <style type="text/css"> .pgntn-page-pagination { text-align: left !important; } .pgntn-page-pagination-block { width: 60% !important; padding: 0 0 0 0; } .pgntn-page-pagination a { color: #1e14ca !important; background-color: #ffffff !important; text-decoration: none !important; border: 1px solid #cccccc !important; } .pgntn-page-pagination a:hover { color: #000 !important; } .pgntn-page-pagination-intro, .pgntn-page-pagination .current { background-color: #efefef !important; color: #000 !important; border: 1px solid #cccccc !important; } .archive #nav-above, .archive #nav-below, .search #nav-above, .search #nav-below, .blog #nav-below, .blog #nav-above, .navigation.paging-navigation, .navigation.pagination, .pagination.paging-pagination, .pagination.pagination, .pagination.loop-pagination, .bicubic-nav-link, #page-nav, .camp-paging, #reposter_nav-pages, .unity-post-pagination, .wordpost_content .nav_post_link,.page-link, .post-nav-links, .page-links,#comments .navigation, #comment-nav-above, #comment-nav-below, #nav-single, .navigation.comment-navigation, comment-pagination { display: none !important; } .single-gallery .pagination.gllrpr_pagination { display: block !important; } </style> <link rel='stylesheet' id='pgntn_stylesheet-css' href='https://jumper.su/wp-content/plugins/pagination/css/nav-style.css?ver=5.8' type='text/css' media='all' /> <script type='text/javascript' src='https://jumper.su/wp-includes/js/comment-reply.min.js?ver=5.8' id='comment-reply-js'></script> <script type='text/javascript' src='https://jumper.su/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.3.0' id='q2w3_fixed_widget-js'></script> <script type='text/javascript' src='https://jumper.su/wp-includes/js/wp-embed.min.js?ver=5.8' id='wp-embed-js'></script> <script type='text/javascript' src='https://jumper.su/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=2.2.0' id='jquery-smooth-scroll-js'></script> <script type='text/javascript' src='https://jumper.su/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1' id='js-cookie-js'></script> <script type='text/javascript' src='https://jumper.su/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script> <script type='text/javascript' id='ez-toc-js-js-extra'> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; /* ]]> */ </script> <script type='text/javascript' src='https://jumper.su/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.17-1617043686' id='ez-toc-js-js'></script> </body> </html>