Приложения и ПО 

События для работы с вводом javascript. События и обработчики событий в JavaScript. Что такое события

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

Я подготовил таблицу со всеми событиями (которые я знаю, по крайней мере) в JavaScript . В ней Вы найдёте, во-первых, название события, элементы, которые могут генерировать это событие и описание самого события JavaScript .

Событие Объект Причина возникновения
Abort Image Прерывание загрузки изображения
Blur Потеря фокуса элемента
Change FileUpload, Select, Text, Textarea Смена значения
Click Area, Button, Checkbox, Document, Link, Radio, Reset, Submit Клик мыши на элементе
DblClick Area, Document, Link Двойной клик на элементе
DragDrop Window Перемещение в окно браузера
Focus Button, Checkbox, FileUpload, Frame, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, Window Установка фокуса на элементе
KeyDown Нажатие клавиши на клавиатуре
KeyPress Document, Image, Link, Textarea Удержание клавиши на клавиатуре
KeyUp Document, Image, Link, Textarea Отпускание клавиши на клавиатуре
Load Document, Image, Layer, Window
MouseDown Button, Document, Link Нажата кнопка мыши
MouseMove Window Мышь в движении
MouseOut Area, Layer, Link Мышь выходит за границы элемента
MouseOver Area, Layer, Link Мышь находится над элементом
MouseUp Button, Document, Link Отпущена кнопка мыши
Move Frame Перемещение элемента
Reset Form Сброс формы
Resize Frame, Window Изменение размеров
Select Text, Textarea Выделение текста
Submit Form Передача данных
Unload Window Выгрузка текущей страницы

Теперь разберёмся с тем, как использовать события в JavaScript . Существуют, так называемые, обработчики событий . Обработчики событий как раз и определяют, что будет происходить при возникновении определённого события. Обработчики событий в JavaScript имеет следующий общий вид:

OnНазваниеСобытия

То есть вначале идёт приставка "on ", а дальше название события , например, такие обработчики событий : onFocus , onClick , onSubmit и так далее. Думаю, тут вопросов не возникло. А теперь главный вопрос: "Как использовать события в JavaScript? ". Область их применения огромна, и мы сейчас с Вами рассмотрим одну задачку. На странице имеются три ссылки. Каждая из ссылок отвечает за разный цвет фона (допустим, белый, жёлтый и зелёный). Вначале фон белый. При наведении мыши на определённую ссылку цвет фона меняется. При отведении мыши цвет фона возвращается на цвет по умолчанию. При щелчке мыши по ссылке цвет фона сохраняется, как по умолчанию.




a {
color: blue;
text-decoration: underline;
cursor: pointer;
}


var default_color = "white";

function setTempColor(color) {
document.bgColor = color;
}

function setDefaultColor(color) {
default_color = color;
}

function defaultColor() {
document.bgColor = default_color;
}



Белый
Жёлтый
Зелёный

Давайте разберёмся с этим скриптом, а точнее с уже целой HTML-страницой с поддержкой JavaScript и CSS (другими словами, это пример DHTML ). Вначале идут обычные HTML-теги , с которых начинается любая HTML-страница . Дальше мы создаём стиль, в котором требуем, чтобы все ссылки на данной странице были синего цвета, подчёркнутые, и чтобы указатель мыши на них был в виде "Pointer". Вы, возможно, скажите: "А зачем нужно задавать стиль? Ведь ссылки и так точно такими же и будут". Правильно, ссылки, но у нас ссылок как таковых нет (ведь нет же атрибута href в теге), поэтому они будут простым чёрным текстом по умолчанию (правда, кликать по тексту тоже можно). Поэтому стиль обязателен. Вы можете его убрать и посмотреть, что будет. А ещё лучше, поставьте атрибут href (с любым значением, хоть пустым) и объясните, почему скрипт перестал работать. Дальше уже начинается JavaScript . Мы создаём переменную default_color , отвечающую за цвет по умолчанию. Дальше идут три функции:

Функция setTempColor() отвечает за временное изменение цвета.

Функция setDefaultColor() отвечает за изменение цвета по умолчанию.

Функция defaultColor() устанавливает цвет фона по умолчанию.

Потом идут ссылки с атрибутами в виде обработчиков событий . При наведение мышки на ссылку возникает событие MouseOver , соответственно, обработчик события onMouseOver вызывает функцию setTempColor() и передаёт соответствующий параметр. При снятии мышки с элемента возникает событие MouseOut , а дальше вызывается функция defaultColor() , которая делает цветом фона цвет по умолчанию. И, наконец, при клике мышки по ссылке (обработчик onClick ) вызывается функция setDefaultColor() , которая устанавливает цвет заданный в параметре цветом фона по умолчанию. Как видите, всё достаточно просто.

Это был принцип использования событий в JavaScript , а дальше всё зависит только от Вашей фантазии!

Типы событий

На заре развития Всемирной паутины веб-разработчикам приходилось иметь дело лишь с небольшим количеством событий: «load», «click», «mouseover» и другими. Эти довольно старые типы событий хорошо поддерживаются всеми браузерами. По мере развития веб-платформы в нее были включены более мощные прикладные интерфейсы, а количество событий существенно увеличилось. Не существует стандарта, который определял бы полный набор событий, и количество поддерживаемых событий продолжает быстро увеличиваться. Эти новые события определяются в следующих двух источниках:

    Спецификация «DOM Level 3 Events», которая после долгих лет застоя стала активно разрабатываться под эгидой консорциума W3C.

    Множество новых прикладных интерфейсов в спецификации HTML5 (и в связанных с ней дополнительных спецификациях) определяют новые события, используемые, например, для управления историей посещений, механизмом drag-and-drop (перетащил и бросил), обмена сообщениями между документами и проигрывания аудио- и видеороликов.

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

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

Большинству веб-приложений совершенно необходимо, чтобы веб-браузер извещал их о моменте, когда закончится загрузка документа и он будет готов для выполнения операций над ним. Этой цели служит событие load в объекте Window. Событие load возбуждается только после того, как документ и все его изображения будут полностью загружены. Однако обычно сценарии можно запускать сразу после синтаксического анализа документа, до того как будут загружены изображения. Можно существенно сократить время запуска веб-приложения, если начинать выполнение сценариев по событиям, отличным от load.

Событие DOMContentLoaded возбуждается, как только документ будет загружен, разобран синтаксическим анализатором, и будут выполнены все отложенные сценарии. К этому моменту изображения и сценарии с атрибутом async могут продолжать загружаться, но сам документ уже будет готов к выполнению операций. Это событие впервые было введено в Firefox и впоследствии заимствовано всеми другими производителями браузеров, включая корпорацию Microsoft, которая добавила поддержку этого события в IE9. Несмотря на приставку DOM в имени, это событие не является частью стандарта модели событий DOM Level 3 Events, но оно стандартизовано спецификацией HTML5.

В ходе загрузки документа изменяется значение свойства document.readyState. Каждое изменение значения этого свойства в IE сопровождается событием readystatechange в объекте Document, благодаря чему в IE это событие можно использовать для определения момента появления состояния complete. Спецификация HTML5 стандартизует событие readystatechange , но предписывает возбуждать его непосредственно перед событием load, поэтому не совсем понятно, в чем заключается преимущество события readystatechange перед load.

В примере ниже определяется функция whenReady(). Функция, передаваемая функции whenReady(), вызывается (как метод объекта Document) сразу, как только документ будет готов к выполнению операций. whenReady() ожидает появления событий DOMContentLoaded и readystatechange и использует событие load только как запасной вариант, на случай если она будет задействована в старых браузерах, не поддерживающих первые два события. Функция whenReady() будет использоваться в некоторых сценариях, следующих далее:

/* Передайте функции whenReady() свою функцию, и она вызовет ее (как метод объекта документа), как только завершится синтаксический анализ документа и он будет готов к выполнению операций. Зарегистрированные функции вызываются при первом же событии DOMContentLoaded, readystatechange или load. Как только документ станет готов и будут вызваны все функции, whenReady() немедленно вызовет все функции, которые были ей переданы. */ var whenReady = (function() { // Эта функция возвращается функцией whenReady() var funcs = ; // Функции, которые должны вызываться по событию var ready = false; // Получит значение true при вызове функции handler // Обработчик событий, который вызывается, как только документ // будет готов к выполнению операций function handler(e) { // Если обработчик уже вызывался, просто вернуть управление if (ready) return; // Если это событие readystatechange и состояние получило значение, // отличное от "complete", значит, документ пока не готов if (e.type==="readystatechange" && document.readyState !== "complete") return; // Вызвать все зарегистрированные функции. // Обратите внимание, что здесь каждый раз проверяется значение // свойства funcs.length, на случай если одна из вызванных функций // зарегистрирует дополнительные функции. for(var i = 0; i

События мыши

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

События мыши JavaScript Тип Описание
click Высокоуровневое событие, возбуждаемое, когда пользователь нажимает и отпускает кнопку мыши или иным образом активирует элемент.
contextmenu Отменяемое событие, возбуждаемое перед выводом контекстного меню. Текущие браузеры выводят контекстное меню по щелчку правой кнопки мыши, поэтому данное событие можно также использовать как событие click.
dblclick Возбуждается, когда пользователь выполняет двойной щелчок.
mousedown Возбуждается, когда пользователь нажимает кнопку мыши.
mouseup Возбуждается, когда пользователь отпускает кнопку мыши.
mousemove Возбуждается, когда пользователь перемещает указатель мыши.
mouseover Возбуждается, когда указатель мыши помещается над элементом. Свойство relatedTarget (или fromElement в IE) определяет элемент, с которого был перемещен указатель мыши.
mouseout Возбуждается, когда указатель мыши покидает элемент. Свойство relatedTarget (или toElement в IE) определяет элемент, на который был перемещен указатель мыши.
mouseenter Подобно mouseover, но не всплывает. Впервые появилось в IE и было стандартизовано в HTML5, но пока поддерживается не всеми браузерами.
mouseleave Подобно mouseout, но не всплывает. Впервые появилось в IE и было стандартизовано в HTML5, но пока поддерживается не всеми браузерами.

Объект, передаваемый обработчикам событий от мыши, имеет свойства clientX и clientY , определяющие координаты указателя относительно окна. Чтобы преобразовать их в координаты документа, к ним необходимо добавить позиции полос прокрутки окна.

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

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

Некоторые браузеры возбуждают событие click только в случае щелчка левой кнопкой. Поэтому, если потребуется обрабатывать щелчки другими кнопками, следует использовать события mousedown и mouseup. Событие contextmenu обычно сигнализирует о том, что был выполнен щелчок правой кнопкой, но, как отмечалось выше, в обработчиках этого события не всегда бывает возможным предотвратить появление контекстного меню.

В примере ниже демонстрируется функция drag(), которая при вызове из обработчика события mousedown позволяет пользователю перетаскивать мышью абсолютно позиционированные элементы документа. Функция drag() работает с обеими моделями событий, DOM и IE.

Функция drag() принимает два аргумента. Первый - перетаскиваемый элемент. Это может быть элемент, в котором возникло событие mousedown, и содержащий его элемент (например, можно дать пользователю возможность ухватить мышью элемент, который выглядит как заголовок окна, и перетащить содержащий его элемент, который выглядит как окно). Однако в любом случае это должен быть элемент документа, абсолютно позиционированный с помощью CSS-атрибута position. Второй аргумент - объект события, полученный с событием mousedown:

/* drag() - перетаскивание абсолютно позиционированных HTML-элементов. Эта функция должна вызываться из обработчика события onmousedown. Последующие события mousemove будут вызывать перемещение указанного элемента. Событие mouseup будет завершать перемещение. Эта реализация действует в обеих моделях событий, стандартной и IE. Использует функцию getScrollOffsets(). Аргументы: elementToDrag: элемент, принявший событие mousedown или содержащий его элемент. Этот элемент должен иметь абсолютное позиционирование. Значения его свойств style.left и style.top будут изменяться при перемещении указателя мыши пользователем. event: объект Event, полученный обработчиком события mousedown. */ function drag(elementToDrag, event) { // Преобразовать начальные координаты указателя мыши в координаты документа var scroll = getScrollOffsets(); // Вспомогательная функция, объявленная ниже var startX = event.clientX + scroll.x; var startY = event.clientY + scroll.y; // Первоначальные координаты (относительно начала документа) элемента, который // будет перемещаться. Так как elementToDrag имеет абсолютное позиционирование, // предполагается, что его свойство offsetParent ссылается на тело документа. var origX = elementToDrag.offsetLeft; var origY = elementToDrag.offsetTop; // Найти расстояние между точкой события mousedown и верхним левым углом элемента. // Это расстояние будет учитываться при перемещении указателя мыши. var deltaX = startX - origX; var deltaY = startY - origY; // Зарегистрировать обработчики событий mousemove и mouseup, // которые последуют за событием mousedown. if (document.addEventListener) { // Стандартная модель событий // Зарегистрировать перехватывающие обработчики в документе document.addEventListener("mousemove", moveHandler, true); document.addEventListener("mouseup", upHandler, true); } else if (document.attachEvent) { // Модель событий IE для IE5-8 // В модели событий IE перехват событий осуществляется вызовом // метода setCapture() элемента. elementToDrag.setCapture(); elementToDrag.attachEvent("onmousemove", moveHandler); elementToDrag.attachEvent("onmouseup", upHandler); // Интерпретировать потерю перехвата событий мыши как событие mouseup elementToDrag.attachEvent("onlosecapture", upHandler); } // Это событие обработано и не должно передаваться другим обработчикам if (event.stopPropagation) event.stopPropagation(); // Стандартная модель else event.cancelBubble = true; // IE // Предотвратить выполнение действий, предусмотренных по умолчанию. if (event.preventDefault) event.preventDefault(); // Стандартная модель else event.returnValue = false; // IE /* Этот обработчик перехватывает события mousemove, возникающие в процессе перетаскивания элемента. Он отвечает за перемещение элемента. */ function moveHandler(e) { if (!e) e = window.event; // Модель событий IE // Переместить элемент в позицию указателя мыши с учетом позиций // полос прокрутки и смещений относительно начального щелчка. var scroll = getScrollOffsets(); elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px"; elementToDrag.style.top = (e.clientY + scroll.y - deltaY) + "px"; // И прервать дальнейшее распространение события. if (e.stopPropagation) e.stopPropagation(); // Стандартная модель else e.cancelBubble = true; // IE } /* Этот обработчик перехватывает заключительное событие mouseup, которое завершает операцию перетаскивания. */ function upHandler(e) { if (!e) e = window.event; // Модель событий IE // Удалить перехватывающие обработчики событий. if (document.removeEventListener) { // Модель событий DOM document.removeEventListener("mouseup", upHandler, true); document.removeEventListener("mousemove", moveHandler, true); } else if (document.detachEvent) { // Модель событий IE 5+ elementToDrag.detachEvent("onlosecapture", upHandler); elementToDrag.detachEvent("onmouseup", upHandler); elementToDrag.detachEvent("onmousemove", moveHandler); elementToDrag.releaseCapture(); } // И прервать дальнейшее распространение события. if (e.stopPropagation) e.stopPropagation(); // Стандартная модель else e.cancelBubble = true; // IE } } // Возвращает текущие позиции полос прокрутки в виде свойств x и y объекта function getScrollOffsets(w) { // Использовать указанное окно или текущее, // если функция вызвана без аргумента w = w || window; // Следующий способ работает во всех браузерах, кроме IE версии 8 и ниже if (w.pageXOffset != null) return {x: w.pageXOffset, y:w.pageYOffset}; // Для IE (и других браузеров) в стандартном режиме var d = w.document; if (document.compatMode == "CSSICompat") return {x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop}; // Для браузеров в режиме совместимости return { x: d.body.scrollLeft, y: d.body.scrollTop }; }

Следующий фрагмент демонстрирует порядок использования функции drag() в HTML-файле:

Перетащи меня

Это тест. Проверка, проверка, проверка.

Самым важным здесь является атрибут onmousedown во вложенном элементе . Обратите внимание, что в нем используется свойство this.parentNode. Это говорит о том, что перемещаться будет весь контейнерный элемент.

События ввода текста

Браузеры поддерживают три старых события ввода с клавиатуры. События keydown и keyup являются низкоуровневыми событиями и рассматриваются в следующем разделе. Однако событие keypress является высокоуровневым, сообщающим, что был введен печатаемый символ.

Проект спецификации DOM Level 3 Events определяет более обобщенное событие textinput , генерируемое в ответ на ввод текста, независимо от того, каким способом он был введен.

С предлагаемым событием textinput и реализованным в настоящее время событием textInput передается простой объект события, имеющий свойство data, хранящее введенный текст. (Другое предлагаемое спецификацией свойство, inputMethod, должно определять источник ввода, но оно пока не реализовано.) В случае ввода с клавиатуры свойство data обычно будет содержать единственный символ, но при вводе из других источников в нем может содержаться множество символов.

Объект события, передаваемый с событием keypress, имеет более сложную организацию. Событие keypress представляет ввод единственного символа. Этот символ содержится в объекте события в виде числового значения кодового пункта Юникода и, чтобы преобразовать его в строку, необходимо использовать метод String.fromCharCode(). В большинстве браузеров кодовый пункт введенного символа сохраняется в свойстве keyCode объекта события. Однако по историческим причинам в Firefox вместо него используется свойство charCode .

В большинстве браузеров событие keypress возбуждается только при вводе печатаемого символа. Однако в Firefox событие keypress возбуждается также для непечатаемых символов. Чтобы отличить эти два случая (и проигнорировать непечатаемые символы), можно проверить, существует ли свойство charCode объекта события и содержит ли оно значение 0.

События textinput, textInput и keypress можно отменить, чтобы предотвратить ввод символа. То есть эти события можно использовать для фильтрации ввода. Например, можно предотвратить ввод алфавитных символов в поле, предназначенное для ввода числовых данных.

В примере ниже демонстрируется модуль на языке JavaScript, реализующий такого рода фильтрацию. Он отыскивает элементы с дополнительным (нестандартным) атрибутом data-allowed-chars. Регистрирует обработчики событий textinput, textInput и keypress для всех найденных элементов и ограничивает возможность ввода символами регулярного выражения, заданным в атрибуте data-allowed-chars:

/* Фильтрация ввода для элементов Этот модуль отыскивает все элементы в документе, имеющие атрибут "data-allowed-chars". Регистрирует обработчики событий keypress, textinput и textInput для этих элементов, чтобы ограничить набор допустимых для ввода символов, чтобы разрешить вводить только символы, указанные в атрибуте. Если элемент также имеет атрибут "data-messageid", значение этого атрибута интерпретируется как id другого элемента документа. Если пользователь вводит недопустимый символ, элемент с указанным id делается видимым. Если пользователь вводит допустимый символ, элемент с сообщением скрывается. Данный элемент с сообщением предназначается для вывода пояснений, почему ввод пользователя был отвергнут. Его оформление необходимо реализовать с помощью CSS так, чтобы изначально он был невидим. */ whenReady(function () { // Вызовет эту функцию, когда документ будет загружен // Отыскать все элементы var inputelts = document.getElementsByTagName("input"); // Обойти их в цикле for(var i = 0 ; i < inputelts.length; i++) { var elt = inputelts[i]; // Пропустить элементы, не являющиеся текстовыми полями ввода // и не имеющие атрибута data-allowed-chars if (elt.type != "text" || !elt.getAttribute("data-allowed-chars")) continue; // Зарегистрировать наш обработчик события в этом элементе input // keypress старое событие и реализовано во всех браузерах. // textInput поддерживается в Safari и Chrome с 2010 года. // textinput версия проекта стандарта "DOM Level 3 Events". if (elt.addEventListener) { elt.addEventListener("keypress", filter, false); elt.addEventListener("textInput", filter, false); elt.addEventListener("textinput", filter, false); } // textinput не поддерживается версиями IE, в которых не реализован // метод addEventListener() else { elt.attachEvent("onkeypress", filter); } } // Обработчик событий keypress и textInput, фильтрующий ввод пользователя function filter(event) { // Получить объект события и целевой элемент target var e = event || window.event; // Модель стандартная или IE var target = e.target || e.srcElement; // Модель стандартная или IE var text = null; // Введенный текст // Получить введенный символ или текст if (e.type === "textinput" || e.type === "textInput") text = e.data; else { // Это было событие keypress // Введенный печатаемый символ в Firefox сохраняется в свойстве charCode var code = e.charCode || e.keyCode; // Если была нажата какая либо функциональная клавиша, не фильтровать ее if (code < 32 || // Управляющий символ ASCII e.charCode == 0 || // Функциональная клавиша (в Firefox) e.ctrlKey || e.altKey) // Удерживаемая клавиша-модификатор return; // Не фильтровать это событие // Преобразовать код символа в строку var text = String.fromCharCode(code); } // Отыскать необходимую нам информацию в этом элементе input var allowed = target.getAttribute("data-allowed-chars"); // Допустимые символы var messageid = target.getAttribute("data-messageid"); // Сообщение id if (messageid) // Если указано значение id, получить элемент var messageElement = document.getElementById(messageid); // Обойти в цикле символы во введенном тексте for(var i = 0; i < text.length; i++) { var c = text.charAt(i); allowed = new RegExp(allowed, "i"); // Создаем регулярное выражение if (c.search(allowed) == -1) { // Недопустимый символ? // Отобразить элемент с сообщением, если указан if (messageElement) messageElement.style.visibility="visible"; // Отменить действия по умолчанию, чтобы предотвратить вставку текста if (e.preventDefault) e.preventDefault(); if (e.returnValue) e.returnValue = false; return false; } } // Если все символы оказались допустимыми, скрыть элемент // с сообщением, если он был указан if (messageElement) messageElement.style.visibility = "hidden"; } });

Ниже показан образец разметки HTML, использующей этот модуль:

Пожалуйста, заполните форму.

Контактная информация Имя Только буквы
Телефон Только цифры
Email Некорректный email

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

События keypress и textinput генерируются непосредственно перед фактической вставкой нового текста в элемент документа, обладающий фокусом ввода, благодаря чему обработчики этих событий могут предотвратить вставку текста, отменив событие.

Браузеры также реализуют событие input , которое возбуждается после вставки текста в элемент. Это событие нельзя отменить и соответствующий ему объект события не содержит информации о вставленном тексте - оно просто извещает о том, что текстовое содержимое элемента изменилось. Если, к примеру, потребуется обеспечить ввод только символов в верхнем регистре, можно определить обработчик события input, как показано ниже:

Событие input стандартизовано в спецификации HTML5 и поддерживается всеми современными браузерами, кроме IE. Похожего эффекта в IE можно добиться, обнаруживая изменение значения свойства value текстового элемента ввода с помощью нестандартного события propertychange .

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

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

Объект события, соответствующий этим событиям, имеет свойство keyCode с числовым значением, которое определяет нажатую клавишу. Для клавиш, генерирующих печатаемые символы, в общем случае свойство keyCode содержит кодовый пункт Юникода, соответствующий основному символу, изображенному на клавише. Клавиши с буквами всегда генерируют значения keyCode, соответствующие символам в верхнем регистре, независимо от состояния клавиши Shift, поскольку именно такие символы изображены на клавишах.

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

Подобно объектам событий мыши, объекты событий клавиатуры имеют свойства altKey , ctrlKey , metaKey и shiftKey , которые получают значение true, если в момент возникновения события удерживалась нажатой соответствующая клавиша-модификатор.

События keydown и keyup, а также свойство keyCode используются уже более десяти лет, но они так и не были стандартизованы. Проект стандарта DOM Level 3 Events стандартизует типы keydown и keyup событий, но не стандартизует свойство keyCode. Вместо этого он определяет новое свойство key, которое должно содержать название клавиши в виде строки. Если клавиша соответствует печатаемому символу, свойство key должно содержать этот печатаемый символ. Для функциональных клавиш свойство key должно содержать такие значения, как F2, Home или Left.

На момент написания этих строк свойство key, определяемое стандартом DOM Level 3 Events, еще не было реализовано ни в одном из браузеров. Однако браузеры на базе механизма Webkit, Safari и Chrome определяют в объектах этих событий свойство keyIdentifier . Для функциональных клавиш, подобно свойству key, свойство keyIdentifier содержит не число, а строку с именем клавиши, таким как Shift или Enter. Для клавиш, соответствующих печатаемым символам, это свойство содержит менее удобное в использовании строковое представление кодового пункта Юникода символа. Например, клавише A соответствует значение U+0041.

В примере ниже определяется класс Keymap, который отображает идентификаторы комбинаций клавиш, такие как PageUp, Alt_Z и ctrl+alt+shift+F5 в функции на языке JavaScript, вызываемые в ответ на нажатия этих комбинаций. Определения привязок клавиш передаются конструктору Keymap() в форме объекта JavaScript, имена свойств которого соответствуют идентификаторам комбинаций клавиш, а значения этих свойств содержат ссылки на функции-обработчики. Добавление и удаление привязок осуществляется с помощью методов bind() и unbind().

Устанавливается объект Keymap в HTML-элемент (обычно в объект Document) с помощью метода install(). При установке объекта Keymap в этом элементе регистрируется обработчик события keydown. Каждый раз, когда нажимается клавиша, обработчик проверяет наличие функции, соответствующей этой комбинации. Если функция существует, она вызывается.

Обработчик события keydown использует свойство key, определяемое стандартом «DOM Level 3 Events», если оно существует. В противном случае он пытается использовать Webkit-свойство keyIdentifier. И как запасной вариант, обработчик использует нестандартное свойство keyCode:

// Функция конструктор function Keymap(bindings) { this.map = {}; // Определить отображение идентификатор->обработчик if (bindings) { // Скопировать в него начальную карту привязок for(name in bindings) this.bind(name, bindings); } } // Связывает указанный идентификатор клавиши с указанной функцией обработчиком Keymap.prototype.bind = function(key, func) { this.map = func; }; // Удаляет привязку для указанного идентификатора клавиши Keymap.prototype.unbind = function(key) { delete this.map; }; // Устанавливает этот объект Keymap в указанный HTML-элемент Keymap.prototype.install = function(element) { var keymap = this; // Определить функции обработчика события function handler(event) { return keymap.dispatch(event, element); } // Установить ее if (element.addEventListener) element.addEventListener("keydown", handler, false); else if (element.attachEvent) element.attachEvent("onkeydown", handler); }; // Этот метод делегирует обработку события клавиатуры, опираясь на привязки Keymap.prototype.dispatch = function(event, element) { // Изначально нет ни имен клавиш-модификаторов, ни имени клавиши var modifiers = ""; var keyname = null; // Сконструировать строки модификаторов в каноническом виде из символов // в нижнем регистре, расположив их в алфавитном порядке. if (event.altKey) modifiers += "alt_"; if (event.ctrlKey) modifiers += "ctrl_"; if (event.metaKey) modifiers += "meta_"; if (event.shiftKey) modifiers += "shift_"; // Имя клавиши легко получить, если реализовано свойство key, // определяемое стандартом DOM Level 3: if (event.key) keyname = event.key; // Для получения имен функциональных клавиш в Safari и Chrome можно // использовать свойство keyIdentifier else if(event.keyIdentifier && event.keyIdentifier.substring(0,2) !== "U+") keyname = event.keyIdentifier; // В противном случае можно использовать свойство keyCode // и отображение код > имя ниже else keyname = Keymap.keyCodeToKeyName; // Если имя клавиши не удалось определить, просто проигнорировать событие // и вернуть управление. if (!keyname) return; // Канонический идентификатор клавиши состоит из имен модификаторов // и имени клавиши в нижнем регистре var keyid = modifiers + keyname.toLowerCase(); // Проверить, имеется ли привязка для данного идентификатора клавиши var handler = this.map; if (handler) { // Если обработчик для данной клавиши, вызвать его // Вызвать функцию обработчик var retval = handler.call(element, event, keyid); // Если обработчик вернул false, отменить действия по умолчанию // и прервать всплытие события if (retval === false) { if (event.stopPropagation) event.stopPropagation(); // модель DOM else event.cancelBubble = true; // модель IE if (event.preventDefault) event.preventDefault(); // DOM else event.returnValue = false; // IE } // Вернуть значение, полученное от обработчика return retval; } }; // Вспомогательная функция преобразования идентификатора клавиши в каноническую форму. // Нам необходимо преобразовать идентификатор "meta" в "ctrl", чтобы превратить // идентификатор Meta-C в "Command-C" на компьютерах Mac и в "Ctrl-C" на всех остальных. Keymap.normalize = function(keyid) { keyid = keyid.toLowerCase(); // В нижний регистр var words = keyid.split(/\s+|[\-+_]/); // Вычленить модификаторы var keyname = words.pop(); // keyname - последнее слово keyname = Keymap.aliases || keyname; // Это псевдоним? words.sort(); // Сортировать модификаторы words.push(keyname); // Поместить обратно нормализованное имя return words.join("_"); // Объединить все вместе } Keymap.aliases = { // Отображение привычных псевдонимов клавиш в их // "официальные" имена, используемые в DOM Level 3, и отображение кодов клавиш // в имена ниже. Имя и значение должны состоять только из символов нижнего регистра "escape":"esc", "return":"enter", "delete":"del", "ctrl":"control", "space":"spacebar", "ins":"insert" }; // Старое свойство keyCode объекта события keydown не стандартизовано // Но следующие значения с успехом могут использоваться в большинстве браузеров и ОС. Keymap.keyCodeToKeyName = { // Клавиши со словами или стрелками на них 8:"Backspace", 9:"Tab", 13:"Enter", 16:"Shift", 17:"Control", 18:"Alt", 19:"Pause", 20:"CapsLock", 27:"Esc", 32:"Spacebar", 33:"PageUp", 34:"PageDown", 35:"End", 36:"Home", 37:"Left", 38:"Up", 39:"Right", 40:"Down", 45:"Insert", 46:"Del", // Цифровые клавиши на основной клавиатуре (не на дополнительной) 48:"0",49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:"8",57:"9", // Буквенные клавиши. Обратите внимание, что здесь не различаются // символы верхнего и нижнего регистров 65:"A", 66:"B", 67:"C", 68:"D", 69:"E", 70:"F", 71:"G", 72:"H", 73:"I", 74:"J", 75:"K", 76:"L", 77:"M", 78:"N", 79:"O", 80:"P", 81:"Q", 82:"R", 83:"S", 84:"T", 85:"U", 86:"V", 87:"W", 88:"X", 89:"Y", 90:"Z", // Цифровые клавиши на дополнительной клавиатуре и клавиши со знаками препинания. // (Не поддерживаются в Opera.) 96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6",103:"7",104:"8", 105:"9",106:"Multiply", 107:"Add", 109:"Subtract", 110:"Decimal", 111:"Divide", // Функциональные клавиши 112:"F1", 113:"F2", 114:"F3", 115:"F4", 116:"F5", 117:"F6", 118:"F7", 119:"F8", 120:"F9", 121:"F10", 122:"F11", 123:"F12", 124:"F13", 125:"F14", 126:"F15", 127:"F16", 128:"F17", 129:"F18", 130:"F19", 131:"F20", 132:"F21", 133:"F22", 134:"F23", 135:"F24", // Клавиши со знаками препинания, для ввода которых не требуется // удерживать нажатой клавишу Shift. // Дефис не может использоваться переносимым способом: FF возвращает // тот же код, что и для клавиши Subtract 59:";", 61:"=", 186:";", 187:"=", // Firefox и Opera возвращают 59,61 188:",", 190:".", 191:"/", 192:"`", 219:"[", 220:"\\", 221:"]", 222:""" };

Ниже показан пример использования объекта Keymap:

Window.onload = function() { var keymap = new Keymap; // Создать новый объект Keymap keymap.bind("ctrl+a", // Комбинация Ctrl+A function(event, keyid) { alert("Вы нажали: " + keyid) }); // Еще одна привязка Ctrl + Enter keymap.bind("ctrl+enter", function(event, keyid) { alert("Вы нажали: " + keyid) }); keymap.install(document.body); // Устанавливаем объект Keymap для всего документа };

Последнее обновление: 1.11.2015

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

В прошлой теме были рассмотрены встроенные обработчики (inline event handler), которые определяются в коде элемента с помощью атрибутов:

Хотя этот подход прекрасно работает, но он имеет кучу недостатков:

    Код html смешивается с кодом JavaScript, в связи с чем становится труднее разрабатывать, отлаживать и поддерживать приложение

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

    К элементу для одного события может быть прикреплен только один обработчик

    Нельзя удалить обработчик без изменения кода

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

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

function handler(e){ alert(e.type); } document.getElementById("rect").onclick = handler;

В итоге нам достаточно взять свойство onclick и присвоить ему функцию, используемую в качестве обработчика. За счет этого код html отделяется от кода javascript.

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

Слушатели событий

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

Для работы со слушателями событий в JavaScript есть объект EventTarget , который определяет методы addEventListener() (для добавления слушателя) и removeEventListener() для удаления слушателя. И поскольку html-элементы DOM тоже являются объектами EventTarget, то они также имеют эти методы. Фактически слушатели представляют те же функции обработчиков.

Метод addEventListener() принимает два параметра: название события без префикса on и функцию обработчика этого события. Например:

#rect{ width:50px; height:50px; background-color:blue; } var rect = document.getElementById("rect"); rect.addEventListener("click", function (e) { alert(e.type); });

То есть в данном случае опять же обрабатывается событие click. И также можно было бы в качестве второго параметра название функции:

Function handler(e){ alert(e.type); } var rect = document.getElementById("rect"); rect.addEventListener("click", handler);

Удаление слушателя аналогично добавлению:

Rect.removeEventListener("click", handler);

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

Var clicks = 0; function handlerOne(e){ alert(e.type); } function handlerTwo(e){ clicks++; var newNode = document.createElement("p"); newNode.textContent = "произошло нажатие " + clicks; document.body.appendChild(newNode); } var rect = document.getElementById("rect"); // прикрепляем первый обработчик rect.addEventListener("click", handlerOne); // прикрепляем второй обработчик rect.addEventListener("click", handlerTwo);

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

События в JS можно разделить на 4 больших группы:

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

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

События фокуса и форы. По большей части ассоциируются с формами: поле input «получает фокус», когда пользователь готов с ним взаимодействовать. Другие события отслеживают передачу формы, изменение значений полей формы и т.д.

JavaScript. Быстрый старт

События мутаций и наблюдатели. Мутирующие элементы отслеживаются при изменении структуры DOM: к примеру, когда элементы на странице вставляются или удаляются при помощи скрипта.

Привязка обработчика события

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

1. Стандартный HTML обработчик события через атрибуты

Старейший метод привязки событий, один из самых встречаемых до сих пор. Метод использует специальные атрибуты в разметке. К примеру:

< input type = "text" id = "username" onblur = "checkName()" >

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

2. Стандартные обработчики событий в DOM

Данная техника разделяет JS и разметку, но имеет то же самое ограничение – событиям можно присвоить только одну функцию. Эквивалентной записью HTML обработчика событий в DOM будет:

var username = document.getElementbyId("username"); username.onblur = checkName;

username . onblur = checkName ;

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Как и в предыдущем примере, функция checkName запускается после того, как элемент формы теряет фокус.

3. Обработчики событий (Event Listeners)

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

var username = document.getElementbyId("username"); username.addEventListener("blur", checkName, false);

var username = document . getElementbyId ("username" ) ;

username . addEventListener ("blur" , checkName , false ) ;

Булево значение в конце указывает на то, нужно ли захватить событие. Обычно задается false. В простых скриптах событие часто записывается в виде анонимной функции:

var username = document.getElementbyId("username"); username.addEventListener("blur", function() { // действия по срабатыванию события })

Не все события равны

Важно понять, что не все события можно обработать одинаково. События scroll и resize запускаются очень часто, из-за чего с ними нужно очень осторожно работать, чтобы не понизить скорость работы скрипта. То же самое касается и на первый взгляд безобидных событий типа input. Производительность скрипта может сильно просесть, если он будет пытаться постоянно отвечать на часто запускаемое событие input на слайдере range.

Не все события отслеживаются

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

Прикрепляйте события к правильным элементам

Событие onclick применимо ко многим элементам, в том числе и к ссылкам. Есть общее правило – к ссылкам не рекомендуется цеплять код JS. По клику на ссылку пользователь должен попасть на другую область сайта или на якорь. Если же вам нужен UI элемент, с помощью которого можно изменить что-то на той же странице, тогда вам подойдет button. На кнопку можно без проблем вешать JavaScript.

Не используйте JavaScript, если это можно сделать при помощи CSS

В сравнении с CSS JavaScript медленный и ненадежный. По сути, CSS нужно использовать в качестве альтернативы сложным скриптам везде, где это возможно. Тем не менее, CSS не умеет всего. Он хорошо справляется с:hover (во многих случаях он заменяет события прикосновения), а также может заменить событие click при помощи:target в некоторых случаях. CSS анимация автоматически запускается после загрузки страницы, а также есть специальные CSS состояния, которые можно запускать для элементов типа радио кнопок. Однако что-то более сложное обычно лучше оставить для JavaScript.

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

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

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

Что такое события?

В общем, все, что вы создаете, может быть смоделировано следующим заявлением:

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

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

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

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

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

Возвращаемся к нашей модели. События составляют первую половину заявления:

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

В конце концов, какая польза от сигнала, если на той стороне нет никого, кто ожидает его, а затем предпринимает соответствующие действия?! Хорошо — теперь, когда у вас есть достаточное понимание того, что такое события, давайте посмотрим, как протекает жизнь событий в заповеднике, известном как JavaScript .

События и JavaScript

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

  • Отслеживание событий;
  • Реакция на события.

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

1. Отслеживание событий

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

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

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

То, как вы используете эту функцию, выглядит следующим образом:

source.addEventListener(eventName, eventHandler, false);

Давайте проанализируем, что означает каждая из частей этой функции.

Источник

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

Имя события

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

Событие Событие происходит…
click …когда вы нажимаете и отпускаете основную кнопку мыши / трекпада / и т.д.
mousemove …когда курсор мыши перемещается.
mouseover …когда вы наводите курсор мыши на элемент. Это событие, как правило, используется при выделении объектов!
mouseout …когда курсор мыши покидает область элемента.
dblclick …когда вы кликаете мышью дважды.
DOMContentLoaded …когда DOM вашего элемента полностью загружен.
load …когда весь ваш документ (DOM, дополнительные элементы: изображения, скрипты и т.д.) полностью загружены.
keydown …когда вы нажимаете клавишу на клавиатуре.
keyup … когда вы отпускаете клавишу на клавиатуре.
scroll …когда вы прокручиваете элемент.
wheel &
DOMMouseScroll 		…каждый раз, когда вы используете колесико мыши для прокрутки вверх или вниз.

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

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

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

Захватывать или не захватывать, вот в чем вопрос!

Последний аргумент может принимать значения true или false .

Подытоживаем все выше сказанное

Теперь, когда вы познакомились с функцией addEventListener , давайте подытожим все с помощью одного реального примера:

document.addEventListener("click", changeColor, false);

В данном примере наша функция addEventListener прикреплена к объекту документа. Когда зафиксировано событие click , она в ответ на это событие вызывает функцию changeColor (также известную, как обработчик событий ). Это подводит нас вплотную к понятию реакции на события, о чем мы поговорим в следующем разделе.

2. Реакция на события

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

function normalAndBoring() { // Мне очень нравятся всякие разные вещи, которые могут быть внутри этой функции! }

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

document.addEventListener("click", changeColor, false); function changeColor() { // Я важна!!! }

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

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

Лучший способ понять то, что мы узнали только что — увидеть все это на примере полностью рабочего кода. Чтобы мы двигались параллельно, добавьте следующую разметку и код в HTML -документ:

Click Anywhere! document.addEventListener("click", changeColor, false); function changeColor() { document.body.style.backgroundColor = "#FFC926"; }

Изначально, если вы просмотрите документ в браузере, то увидите просто пустую страницу:

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

Причину этого довольно легко понять. Давайте посмотрим на код:

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

document.addEventListener("click", changeColor, false); function changeColor() { document.body.style.backgroundColor = "#FFC926"; }

Эта функция вызывается, когда в документе зафиксировано событие click . Когда вызывается эта функция, она задает ярко-желтый цвет фона элемента body . Связывая это с заявлением, которое мы рассматривали в самом начале, мы увидим, что этот пример будет выглядеть так:

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

Аргументы событий и тип события

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

function myEventHandler(e) { // элементы обработчика событий }

На данный момент, обработчик событий — это все еще старая добрая функция. Но это то, что нам и нужно, это функция, которая принимает один аргумент … аргумент события!

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