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);Обе функции будут выполняться при щелчке элемента.
Кроме того, в этом механизме событий имеется ряд других мощных функций и опций. Эта тема выходит за рамки данной статьи, но если вы хотите изучить подробнее, переходите по ссылкам: Метод EventTarget.addEventListener() и Метод EventTarget.removeEventListener().
Какой механизм мне использовать?
Из трёх механизмов определённо не нужно использовать атрибуты событий HTML. Как упоминалось выше, это устаревшая и плохая практика.
Остальные два являются относительно взаимозаменяемыми, по крайней мере для простых целей
- Свойства обработчика событий имеют меньшую мощность и параметры, но лучше совместимость между браузерами (поддерживается ещё в Internet Explorer 8). Вероятно, вам следует начать с них, когда вы учитесь.
- События уровня 2 DOM (
addEventListener()и т. д.) являются более мощными, но также могут стать более сложными и хуже поддерживаться (поддерживается ещё в Internet Explorer 9). Вам также стоит поэкспериментировать с ними и стремиться использовать их там, где это возможно.
Основные преимущества третьего механизма заключаются в том, что при необходимости можно удалить код обработчика событий, используя removeEventListener(), и так же можно добавить несколько элементов-обработчиков того же типа к элементам. Например, вы можете вызвать addEventListener('click', function() {...}) для элемента несколько раз, с разными функциями, указанными во втором аргументе. Это невозможно при использовании свойств обработчика событий, поскольку любые последующие попытки установить свойство будут перезаписывать более ранние, например:
element.onclick = function1;
element.onclick = function2;
etc.Примечание: Если вам требуется поддержка браузеров старше Internet Explorer 8 в вашем проекте, вы можете столкнуться с трудностями, так как такие старые браузеры используют старые модели событий из более новых браузеров. Но не бойтесь, большинство библиотек JavaScript (например, jQuery) имеют встроенные функции, которые абстрагируют различия между браузерами. Не беспокойтесь об этом слишком много на этапе вашего учебного путешествия.
Рассмотрим некоторые современные концепции, имеющие отношение к событиям. На данный момент не обязательно понимать их полностью, но представление о них поможет лучше понять некоторые модели кода, с которыми вы, вероятно, столкнётесь.
Объекты событий
Иногда внутри функции обработчика событий вы можете увидеть параметр, заданный с таким именем, как event, 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 аргумента:
- Тип события (мы будем «слушать» событие «click»).
- Так называемую колбэк (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, приведен полный список событий с описанием.
| Событие | Обработчик события | Поддерживающие 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
Hello world!