События обрабатываемые javascript. JavaScript - Виды событий

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

Что такое событие и обработчики событий

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

Самым ярким примером события это клик пользователя по какому-то объекту(click ), будь то это кнопка, ссылка или любой другой элемент. Другой пример события, это наведение мыши над каким-то объектом(mouseover ), скажем над изображением. Также событием является полное загрузка страницы(load ). В общем все действия, которые происходят на сайте являются событиями.

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

И для того чтобы обрабатывать какое-то событие, необходимо использовать специальный обработчик для данного события. Каждое событие имеет свой обработчик, например, у события клик(click ) есть обработчик onclick . У события наведения мыши над объектом(mouseover ) есть обработчик onmouseover . И у события полной загрузки страницы(load ) есть обработчик onload .

То есть как вы поняли название обработчика , формируется из префикса "on" + название события.

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

Обработчик события вызывается в качестве атрибута, в самом теге HTML элемента. В значение обработчика можно написать сразу код JavaScript, но лучше вызывать какую-то функцию, которая сделает необходимые действия. Функцию необходимо описать внутри тега script, который может находится как внутри блока head, так и в конце тега body. В качестве параметра для этой функции передаётся слово this , то есть текущий объект.

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

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Div{ padding-left: 50px; width: 200px; border: 1px solid #000; }

JavaScript код:

Function blockOver(block){ alert("Вы находитесь в текстовой области "); }

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

Как получить значение атрибута в javascript ?

С помощью параметра функций (this), можно получить значение какого-то атрибута текущего объекта , например, узнать его id.

Для примера, создадим кнопку и зададим ей id со значением "justButton". Когда кликнем на данную кнопку, то выведем такое сообщение: "Вы кликнули по кнопке, с идентификатором значение_id". Здесь необходимо уже использовать обработчик onclick .

JavaScript код:

Function clickOnButton(button){ alert("Вы кликнули по кнопке, с идентификатором: " + button.id); }

Сохраняем документ, открываем его в браузере и кликаем по кнопке.

Таким же образом можно вывести имя кнопки(button.name ) или её значение(button.value )

Получаем значение ширины и высоты элемента

Ещё можно узнать значения CSS свойства элемента , например, ширину и высоту. Для получения ширины используются свойства clientWidth и offsetWidth , а для высоты clientHeight и offsetHeight . Для примера, выведем значения ширины и высоты кнопки, по которой кликнули.

Теперь содержимое функции clickOnButton будет такой:

Function clickOnButton(button){ //alert("Вы кликнули по кнопке, с идентификатором: " + button.id); var width = button.clientWidth || button.offsetWidth; var height = button.clientHeight || button.offsetHeight; alert("Ширина кнопки: " + width + "\nВысота кнопки: " + height); }

Результат данного примера:

Напоминаю, что ширина элемента считается вместе со значением padding, поэтому она и равна 111px [ 99px(width) + 6px(padding-left) + 6px(padding-right) ].

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

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

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

И в конец данной статьи разберём простой пример обработки формы. Обработка формы на JavaScript, во-первых, уменьшает загрузку на сервер и во-вторых придаёт дополнительный плюс к юзабилити сайта.

Форма состоится из одного поля для логина, и кнопки отправить. При отправке формы, будем проверять длину логина. Его длина должна быть больше трёх символов.

Начнём, мы с HTML структуры данной формы.

Теперь, тегу формы добавим в качестве атрибута обработчик onsubmit , события submit . Следующим образом:

Событие submit срабатывает при отправке формы. Оператора return мы написали для того чтобы запретить отправку формы, в случае обнаружения ошибки в вводе данных. Если функция вернёт значение false, то значение обработчика onsubmit будет «return false», это значит, что форма не отправиться на сервер. В противном случае, если форма вернёт true, то значение обработчика будет «return true» и форма отправится без проблем.

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

Onsubmit = "checkForm(this); return false;"

Как Вы наверняка уже догадались, checkForm это название функции, которая вызовется, когда сработает событие submit. Вы можете назвать её как хотите, следуя правилам наименования функции.

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

Function checkForm(form){ //Получаем значение поля формы, у которой name равен login var login = form.login.value; //Проверяем, если длина логина меньше трёх символов то выводим сообщение об ошибке и отменяем отправку формы. if(login.length > 3){ alert("Длина логина должна быть больше трёх символов"); return false; }else{ return true; } }

Сохраняем документ, открываем его в браузере и тестируем.

Таким вот образом можно проверить форму на языке JavaScript и отменить её отправку в случае ошибки.

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

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

Задачи

Создайте простой калькулятор сложения цифр.

• Создайте форму с двумя числовыми полями(type="number") для ввода чисел и кнопку с надписью "Сложить"
• При нажатии на кнопку отправить, вызовите функцию обработки данного события.
• Внутри функции получите значения полей и методом alert, выведите результат сложения введённых чисел.
• Сделайте так чтобы форма не отправлялось после нажатия по кнопке.

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

Каждое событие имеет своё название. click - это нажатие левой кнопки мыши, keydown - нажатие клавиши, focus - появление в фокусе элемента формы, Обработка события

Функция, которая выполняется при срабатывании события называется обработчик события . Для каждого типа событий есть свой обработчик. Название обработчика состоит из слова on и названия события. Например, обработчик события click называется onclick . События происходят не на странице вообще, а на конкретном элементе. Соответственно и обработчик - это не отдельная функция. Обработчик ставится на какой-то элемент страницы.

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

1 2 3 4 5 6 7

Страница

JavaScript:

JavaScript:

17 18 19 20 21 22

var inform = function () { alert("Другая кнопка"); }; var mbutton = document.getElementById("mbutton"); mbutton.onclick = inform;

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

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

элемент.addEventListener (событие, функция)

Параметры:

событие - событие, которое нужно обрабатывать

функция - функция, которая становится обработчиком

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

HTML код:

Новая кнопка

JavaScript:

24 25 26 27 28 29

var newinform = function () { alert("Нажата новая кнопка"); }; var newbutton = document.getElementById("newbutton"); newbutton.addEventListener("click", newinform);

Метод removeEventListener() позволяет удалить обработчик.

элемент.removeEventListener (событие, функция)

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

Объект события

При каждом срабатывании события формируется объект события. Объект содержит информацию о событии. У разных типов событий разные объекты. Но существуют и свойства, которые есть у любого объекта. Например, свойство type содержит тип события.

Объект события передаётся в качестве параметра в функцию, которая является обработчиком. Для доступа к объекту нужно в функции создать параметр. Через этот параметр и производится обращение к объекту. Если у функции предполагаются ещё другие параметры, то объект события должен быть первым параметром. Изменим обработчик для кнопки, у которой id равно "button". Получим доступ к объекту события. Вместо сообщения о нажатии кнопки, выведем тип события. Теперь обработчик будет выглядеть так:

13 14 15 16

button.onclick = function (event) { alert(event.type); };

Нажмите на кнопку, будет выведен тип сработавшего события.

У всех объектов события есть свойство currentTarget . Оно возвращает элемент, на котором сработало событие. Это может показаться бессмысленным. Ведь обработчик назначен конкретному элементу. Зачем ещё раз возвращать этот элемент? Но с событимяи браузера всё несколько сложнее. Чуть позже Вы узнаете, как это используется. Другие свойства мы рассмотрим при изучении конкретных событий.

Рассмотрим наиболее стандартные и часто используемые javaScript события:

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

Поддерживающие HTML- элементы и объекты

Описание

Получение элементом фокуса

	a, area, button, input, label, select, textarea	Потеря текущим элементом фокуса. Возникает при щелчке мышью вне элемента либо нажатии клавиши табуляции
	Input, select, textarea	Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur
	Практически все	Одинарный щелчок (нажата и отпущена кнопка мыши)
	a, area, button, input, label, select, textarea
	Практически все	Нажата кнопка мыши в пределах текущего элемента
	Практически все	Курсор мыши выведен за пределы текущего элемента
	Практически все	Курсор мыши наведен на текущий элемент
	Практически все	Отпущена кнопка мыши в пределах текущего элемента
		Перемещение окна
		Изменение размеров окна
		Выделение текста в текущем элементе
		Отправка данных формы
		Попытка закрытия окна браузера и выгрузки документа

Событие onLoad. Свойства высоты и ширины объекта в javaScript

Для выполнения следующего примера нам понадобится новое понятие — событие.

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

Рассмотрим одно из самых распространенных событий — onload — которое происходит при загрузке документа (когда пользователь своими действиями вызвал загрузку веб-страницы).

Рассмотрим пример использования события javascript onload для изменения ширины и высоты элемента.

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

✍ Решение:

function resizeImg() { var myImg= document.getElementById ("img1" ) ; myImg.style .width = document.body .clientWidth ; } ...

function resizeImg(){ var myImg=document.getElementById("img1"); myImg.style.width=document.body.clientWidth; } ...

В примере основные действия происходят в функции resizeImg() :

переменная myImg ассоциирована с тегом img — картинкой, свойство которой width — ширина — меняется в самой функции.

Вызов функции происходит по загрузке страницы в событии onload тела документа (тело — body — главный элемент, поэтому загрузка страницы — это событие, относящееся к телу).

Задание Js8_4. Разместите в html-коде несколько изображений (тег img). Используя метод измените:
— размер (свойства width и height) всех изображений страницы
— размер границы (свойство border) всех изображений.

Дополните код:

var allImg=document...; // получаем массив изображений for (var i=0; i < allImg.length; i++){ allImg[i].....; // меняем свойство width ...; // меняем свойство height ...; // меняем border }

Событие onclick javaScript и три способа обработки событий

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

Пример: По щелчку на кнопке вывести диалоговое окно с сообщением «Ура!»

Через свойство объекта с использованием пользовательской функции:

Скрипт:

В данном примере в html-коде мы видим кнопку. У кнопки присутствует атрибут onclick («по щелчку» ), в значении которого стоит вызов функции с названием message() . Это пользовательская функция, описанная выше в скрипте. В самой функции выводится диалоговое окно, что и задано согласно заданию.

Скрипт при такой обработке события обычно находится в области head документа

Через атрибут тега:

Это упрощенный вариант обработки события, он подходит только для небольшого кода, когда необходимо выполнить один-два оператора. Иначе код будет плохочитаемым.
В качестве атрибута кнопки указывается onclick («по щелчку» ), а в качестве значения пишется скрипт из операторов с указанием на каком языке он написан (javascript:). В нашем случае оператор для вывода модального окна со словом «Ура!»

Через регистрацию функции-обработчика в качестве свойства элемента:

html-код:

Скрипт:

document.myForm .myButton .onclick = message; function message() { alert("Ура!" ) ; }

document.myForm.myButton.onclick = message; function message() { alert("Ура!"); }

В html-коде здесь присутствует кнопка с атрибутом id , который необходим для обращения к кнопке через скрипт.

В скрипте, который обязательно находится ниже дерева элементов (можно перед закрытием тега body), находится обращение к кнопке (document.myForm.myButton), для которой назначается обработчик события onclick со значением ссылки на функцию . Обращение к кнопке может быть организовано через атрибут id (document.getElementById("myButton").onclick = message;)

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

Именно такой способ обработки событий максимально приближен к тому, который происходит, например, в ОС windows.

Как лучше выводить результаты примеров?

Важно: При вызове document.write после окончания загрузки страницы (при обработке событий onclick , oninput , …), страница перезапишется, поэтому вызывать этот метод не рекомендуется . Для примеров лучше использовать метод alert() .

document.write добавляет html во время построения DOM

alert блокируют выполнение JS, пока пользователь не нажмёт OK

Рассмотрим все простые способы вывода отладочной информации :

document.innerHTML += "htmlstr"; // добавляет на страницу

console.log("str"); // выводит в консоль браузерах

Задание Js8_5. Выполните задание по инструкции:

Создайте веб-страницу и расположите в ней тег img с изображением грустного смайлика.

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

В скрипте опишите метод (функция sayHello()), который «спрашивает», как зовут пользователя, а затем приветствует его по имени, и меняет изображение на улыбающийся смайлик (свойство src тега img):

function sayHello() { var userName= prompt("Как вас зовут?" ) ; if (userName) { alert(...) ; document.getElementById ("smileImg" ) . ...= ...; } }

function sayHello() { var userName=prompt("Как вас зовут?"); if(userName){ alert(...); document.getElementById("smileImg"). ...=...; } }

=>>

События onMouseOver и onMouseOut

Событие наступает при наведении (onMouseOver) на объект и при выведении (onMouseOut) за пределы объекта курсора мыши.

Назначение обработчика событий осуществляется точно таким же образом, как и в случае .

Поэтому выполним задание:

Задание Js8_6. По наведению курсора мыши на гиперссылки закрашивать задний фон страницы в разные цвета.

Дополните код:

Зеленый
… seagreen
… magenta
… purple
… navy
… royalblue

Задание Js8_7. Создание rollover-изображения

— Добавьте в код тег img с изображением.
— Введите обработчики событий onmouseover (по наведению) и onmouseout (при отведении). Сделайте это в виде функций.
— Присоедините к обработчику событий onmouseover процедуру загрузки в тег img другого изображения.
— Присоедините к обработчику событий onmouseout процедуру загрузки другого изображения в тег img .

Несколько обработчиков одного и того же события

В javascript можно назначать НЕСКОЛЬКО обработчиков одного и того же события. Для этого используются методы:

addEventListener — добавление обработчика

removeEventListener — удаление обработчика

Синтаксис addEventListener :

У метода три аргумента:

Element.addEventListener(event, handler[, phase]);

event click

handler — функция-обработчикgetElementById ("MyElem" ) ; input.addEventListener ("click" , message) ;

function message() { alert("Ура!"); } var input = document.getElementById("MyElem"); input.addEventListener("click", message);

Синтаксис removeEventListener :

Методу следует передать те же аргументы, что были у addEventListener :

Element.removeEventListener(event, handler[, phase]);

event — название события, например, click

handler — функция-обработчик

phase — необязательный аргумент, «фаза», на которой обработчик должен сработать

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

function message() { alert("Ура!"); } var input = document.getElementById("MyElem"); input.addEventListener("click", message); input.removeEventListener("click", message);

Всплытие и погружение события

obj.onevent = function(e) {/*...*/} // где e - объект события // e.target - элемент, на котором произошло событие

Типы событий

На заре развития Всемирной паутины веб-разработчикам приходилось иметь дело лишь с небольшим количеством событий: «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 для всего документа };