События для работы с вводом javascript. Типы событий
Обработка событий
Клиентские программы на языке JavaScript основаны на модели программирования, когда выполнение программы управляется событиями. При таком стиле программирования веб-браузер генерирует событие, когда с документом или некоторым его элементом что-то происходит. Например, веб-браузер генерирует событие, когда завершает загрузку документа, когда пользователь наводит указатель мыши на гиперссылку или нажимает клавишу на клавиатуре.
Если JavaScript-приложение интересует определенный тип события для определенного элемента документа, оно может зарегистрировать одну или более функций, которая будет вызываться при возникновении этого события. Имейте в виду, что это не является уникальной особенностью веб-программирования: все приложения с графическим интерфейсом пользователя действуют именно таким образом - они постоянно ожидают, пока что-то произойдет (т.е. ждут появления событий), и откликаются на происходящее.
Тип события - это строка, определяющая тип действия, вызвавшего событие. Тип «mousemove», например, означает, что пользователь переместил указатель мыши. Тип «keydown» означает, что была нажата клавиша на клавиатуре. А тип «load» означает, что завершилась загрузка документа (или какого-то другого ресурса) из сети. Поскольку тип события - это просто строка, его иногда называют именем события.
Цель события - это объект, в котором возникло событие или с которым это событие связано. Когда говорят о событии, обычно упоминают тип и цель события. Например, событие «load» объекта Window или событие «click» элемента . Самыми типичными целями событий в клиентских приложениях на языке JavaScript являются объекты Window, Document и Element, но некоторые типы событий могут происходить и в других типах объектов.
Обработчик события - это функция, которая обрабатывает, или откликается на событие. Приложения должны зарегистрировать свои функции обработчиков событий в веб-браузере, указав тип события и цель. Когда в указанном целевом объекте возникнет событие указанного типа, браузер вызовет обработчик. Когда обработчики событий вызываются для какого-то объекта, мы иногда говорим, что браузер «возбудил» или «сгенерировал» событие.
Объект события - это объект, связанный с определенным событием и содержащий информацию об этом событии. Объекты событий передаются функции обработчика события в виде аргумента (кроме IE8 и более ранних версий, где объект события доступен только в виде глобальной переменной event). Все объекты событий имеют свойство type , определяющее тип события, и свойство target , определяющее цель события.
Для каждого типа события в связанном объекте события определяется набор свойств. Например, объект, связанный с событиями от мыши, включает координаты указателя мыши, а объект, связанный с событиями от клавиатуры, содержит информацию о нажатой клавише и о нажатых клавишах-модификаторах. Для многих типов событий определяются только стандартные свойства, такие как type и target, и не передается никакой дополнительной полезной информации. Для таких типов событий важно само наличие происшествия события, и никакая другая информация не имеет значения.
Распространение события - это процесс, в ходе которого браузер решает, в каких объектах следует вызвать обработчики событий. В случае событий, предназначенных для единственного объекта (таких как событие «load» объекта Window), надобность в их распространении отсутствует. Однако, когда некоторое событие возникает в элементе документа, оно распространяется, или «всплывает», вверх по дереву документа.
1 |
Страница |
JavaScript:
JavaScript:
17 |
var inform = function () { alert("Другая кнопка"); }; var mbutton = document.getElementById("mbutton"); mbutton.onclick = inform; |
Когда функция присваивается обработчику, то после имени функции нет скобок. Если поставить скобки, то это будет не присваивание функции, а вызов на исполнение.
Существует метод addEventListener() , который также назначает обработчик события элементу. Он считается более современным. Сейчас он применяется не часто, но в JavaScript есть новые события, обработать которые можно только с помощью этого метода.
элемент.addEventListener (событие, функция)
Параметры:
событие - событие, которое нужно обрабатывать
функция - функция, которая становится обработчиком
В параметрах данного метода название события пишется в кавычках и слово on перед ним писать не нужно.
HTML код:
Новая кнопка |
JavaScript:
24 |
var newinform = function () { alert("Нажата новая кнопка"); }; var newbutton = document.getElementById("newbutton"); newbutton.addEventListener("click", newinform); |
Метод removeEventListener() позволяет удалить обработчик.
элемент.removeEventListener (событие, функция)
С помощью рассмотренного метода, элементу можно назначить несколько обработчиков одного события. Тогда нужно удалять отдельно каждый из них.
Объект событияПри каждом срабатывании события формируется объект события. Объект содержит информацию о событии. У разных типов событий разные объекты. Но существуют и свойства, которые есть у любого объекта. Например, свойство type содержит тип события.
Объект события передаётся в качестве параметра в функцию, которая является обработчиком. Для доступа к объекту нужно в функции создать параметр. Через этот параметр и производится обращение к объекту. Если у функции предполагаются ещё другие параметры, то объект события должен быть первым параметром. Изменим обработчик для кнопки, у которой id равно "button". Получим доступ к объекту события. Вместо сообщения о нажатии кнопки, выведем тип события. Теперь обработчик будет выглядеть так:
13 |
button.onclick = function (event) { alert(event.type); }; |
Нажмите на кнопку, будет выведен тип сработавшего события.
У всех объектов события есть свойство currentTarget . Оно возвращает элемент, на котором сработало событие. Это может показаться бессмысленным. Ведь обработчик назначен конкретному элементу. Зачем ещё раз возвращать этот элемент? Но с событимяи браузера всё несколько сложнее. Чуть позже Вы узнаете, как это используется. Другие свойства мы рассмотрим при изучении конкретных событий.
События JavaScript
В JavaScript, как и других объектно ориентированных языках, определен ряд событий, связанных с элементами документа. Обработчики дают возможность организовать реакцию на возникновение событий из сценария. При этом соответствующий обработчик указывается как атрибут элемента HTML-документа; значением этого атрибута является выражение JavaScript. Например,
- наведение и увод курсора мыши на элемент сопровождаются изменением цвета фона.
- при попытке пользователя закрыть окно и выгрузить документ выводится сообщение
- при щелчке мышью по изображению выполняется некая функция showPict()
Половина обработчиков поддерживаются практически всеми HTML-элементами (). Некоторые события можно имитировать с помощью соответствующих методов. Ниже приводится список событий согласно спецификации HTML 4.0 и некоторые события, поддерживаемые MS IE. Трактовка браузеров может отличаться от стандарта и в плане применимости обработчика к тем или иным элементам
Обработчик события | Поддерживающие HTML-элементы | Описание |
Метод |
onAbort | IMG | Прерывание загрузки изображения | |
onBlur | Потеря текущим элементом фокуса, т.е. переход к другому элементу. Возникает при щелчке мышью вне элемента либо нажатии клавиши табуляции | blur() | |
onChange | INPUT, SELECT, TEXTAREA | Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur | change() |
onClick | Одинарный щелчок (нажата и отпущена кнопка мыши) | click() | |
onDblClick | Практически все HTML-элементы | Двойной щелчок | |
onError | IMG, WINDOW | Возникновение ошибки выполнения сценария | |
onFocus | A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA | Получение элементом фокуса (щелчок мышью на элементе или очередное нажатие клавиши табуляции) | focus() |
onKeyDown | Практически все HTML-элементы | Нажата клавиша на клавиатуре | |
onKeyPress | Практически все HTML-элементы | Нажата и отпущена клавиша на клавиатуре | |
onKeyUp | Практически все HTML-элементы | Отпущена клавиша на клавиатуре | |
onLoad | BODY, FRAMESET | ||
onMouseDown | Практически все HTML-элементы | Нажата кнопка мыши в пределах текущего элемента | |
onMouseMove | Практически все HTML-элементы | Перемещение курсора мыши в пределах текущего элемента | |
onMouseOut | Практически все HTML-элементы | Курсор мыши выведен за пределы текущего элемента | |
onMouseOver | Практически все HTML-элементы | Курсор мыши наведен на текущий элемент | |
onMouseUp | Практически все HTML-элементы | Отпущена кнопка мыши в пределах текущего элемента | |
onMove | WINDOW | Перемещение окна | |
onReset | FORM | Сброс данных формы (щелчок по кнопке ) |
reset() |
onResize | WINDOW | Изменение размеров окна | |
onSelect | INPUT, TEXTAREA | Выделение текста в текущем элементе | |
onSubmit | FORM | Отправка данных формы (щелчок по кнопке ) |
submit() |
onUnload | BODY, FRAMESET | Попытка закрытия окна браузера и выгрузки документа |
Тема событий очень важная и очень интересная. Благодаря ей, можно делать очень много интересных вещей, от которых пользователь будет в восторге. Событие в 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 , а дальше всё зависит только от Вашей фантазии!
Если вы не заметили, большинство приложений и веб-сайтов довольно скучны, если существуют сами по себе. Они встречают вас помпезным и броским интерфейсом, однако впечатление от него очень быстро сходит на нет, если вы не начинаете взаимодействовать с ними:
Причина этого очень проста. Приложения существуют для того, чтобы реагировать на ваши действия. Существуют некоторые стимулы, которые заставляют вас запустить приложения и начать работу с ними. Все остальное, что они делают после этого, во многом зависит от того, что вы указываете им сделать. Вот здесь все становится действительно интересно.
Вы указываете приложениям, что им нужно сделать, заставляя их реагировать на то, что известно, под названием события. В этой статье мы обзорно рассмотрим, что такое события и как их можно использовать.
Что такое события?В общем, все, что вы создаете, может быть смоделировано следующим заявлением:
Вы можете заполнить пробелы в этом заявлении бесчисленным множеством вещей. Первый пробел сообщает, что что-то происходит. Второй пробел описывает реакцию на это. Вот несколько примеров заполнения этого заявления:
Это универсальная модель применима ко всем кодам, которые мы с вами составляли. Эта модель также относится ко всем кодам, которые когда-либо составляли все ваши знакомые разработчики / дизайнеры для своих приложений.
Не существует никакого способа обойти эту модель, так что … нет никакого смысла и пытаться. Вместо этого, вам нужно глубже изучить эту очень полезную вещь, известную как событие.
Событие это не более чем сигнал. Он сообщает, что что-то только что произошло. Этим что-то может быть нажатие кнопки мыши. Это может быть нажатие клавиши на клавиатуре. Это может быть изменение размера вашего окна. Это может быть просто только что произошедшая загрузка вашего документа.
Вы должны понять, что этот сигнал может быть встроен сотней разных способов в 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, потому что так делают все крутые парни. Нет ничего технически неправильного в том, чтобы определить событие следующим образом.