Применение обработчиков событий. Событие onclick javaScript и три способа обработки событий
Во время работы со страницей пользователь совершает различные действия: нажимает кнопки мыши, вводит текст на клавиатуре. Каждое такое действие - это событие браузера. Его можно отследить и выполнить определённые строки программы при их возникновении. Для этого в JavaScript есть обработчики событий. Кроме действий пользователя, существуют и другие события браузера, например полная загрузка страницы.
Каждое событие имеет своё название. click - это нажатие левой кнопки мыши, keydown - нажатие клавиши, focus - появление в фокусе элемента формы, Обработка события
Функция, которая выполняется при срабатывании события называется обработчик события . Для каждого типа событий есть свой обработчик. Название обработчика состоит из слова on и названия события. Например, обработчик события click называется onclick . События происходят не на странице вообще, а на конкретном элементе. Соответственно и обработчик - это не отдельная функция. Обработчик ставится на какой-то элемент страницы.
Есть разные способы назначить элементу обработчик события. Можно назначить обработчик через атрибут тэга. Код, который должен выполниться при срабатывании события, пишется в значении атрибута. Создадим страницу, добавим на неё кнопку и назначим ей обработчик события click :
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-код на html-странице. Итак, откройте (или создайте) html-страницу и поместите в нее следующий код:
Заголовок документа
Откройте эту страницу в браузере, она выглядит так:
Давайте разберемся как это работает. Браузер читает нашу html-страницу, видит оператор для выполнения document.write("Моя первая страница."); и выполняет его. Рассмотрим из чего состоит сам оператор (инструкция):
При интерпретации html-страницы браузер создает объекты javascript. Они хранятся в виде иерархической структуры, отражая структуру документа, например:
На самом верхнем уровне находится объект window , представляющий окно браузера и являющийся "родителем" всех остальных объектов. Расположенные ниже могут иметь свои подчиненные объекты. Так объект document (текущая страница) может иметь дочерний объект form (форма) и т.д.
Все объекты имеют методы (отделяются от объекта точкой), например:
document.write
позволяет писать текст в текущую страницу,
window.open
открывает новое окно браузера.
Также объекты имеют свойства, например:
document.bgcolor
содержит значение фонового цвета текущей страницы,
document.title
содержит заголовок страницы.
Все инструкции программного кода заканчиваются точкой с запятой. Об этом надо помнить.
Сценарий, который мы написали, выполнился немедленно после загрузки страницы. Однако в большинстве случаев нам нужно, чтобы сценарий выполнялся после каких-либо действий пользователя: нажатия на кнопку или ввода текста. Т.е. в ответ на пользовательское событие.
Для этого в тегах элементов страницы введены параметры обработки событий, задающие действия, выполняемые при возникновении события, связанного с элементом. Например:
Здесь Click - событие (щелчок по div-у), onClick - обработчик события, addText() - имя функции, которая сработает при возникновении этого события (щелчка по div-у).
Функции мы будем рассматривать в следующем уроке, а сейчас перечислим события, которые поддерживаются javascript. Запоминать их не следует, в дальнейшем можете просто обращаться к этой таблице.
| Blur | потеря объектом фокуса | onBlur |
| Change | пользователь изменяет значение элемента | onChange |
| Click | пользователь щелкает мыщью по объекту | onClick |
| DblClick | пользователь делает двойной щелчок мышью по объекту | onDblClick |
| DragDrop | пользователь перетаскивает мышью объект | onDragDrop |
| Error | возникновение javascript-ошибки | onError |
| Focus | окно или элемент формы получает фокус | onFocus |
| KeyDown | пользователь нажимает клавишу клавиатуры | onKeyDown |
| KeyPress | пользователь удерживает нажатой клавишу клавиатуры | onKeyPress |
| KeyUp | пользователь отпускает клавишу клавиатуры | onKeyUp |
| Load | документ загружается в браузер | onLoad |
| MouseDown | пользователь нажимает кнопку мыши | onMouseDown |
| MouseOut | указатель мыши выходит за пределы элемента | onMouseOut |
| MouseOver | указатель мыши помещается над элементом | onMouseOver |
| MouseUp | пользователь отпускает кнопку мыши | onMouseUp |
| Move | пользователь перемещает окно | onMove |
| Reset | пользователь нажимает кнопку "reset" формы | onReset |
| Resize | пользователь изменяет размеры окна или элемента | onResize |
| Select | пользователь выбирает элемент формы | onSelect |
| Submit | пользователь нажимает кнопку "submit" формы | onSubmit |
| Unload | пользователь закрывает документ | onUnload |
Хорошим стилем программирования является оформление действий, выполняемых при обработке событий, в виде функций. Их мы и будем изучать в следующем уроке.
Объектная модель Java Script
Язык Java Script является объектно-ориентированным. Базовый элемент языка - объект, представляющий собой документ HTML или его элемент, окно браузера или его управляющий элемент. Объект имеет:
· свойства, описывающие его состояния. Свойствами объекта могут быть другие объекты или просто числовые значения. Если значение свойства не может быть изменено, такие свойства при описании объектов помечаются как Readonly ;
· методы - функции, позволяющие выполнять какие-либо действия над объектом;
· обработчики событий, которые позволяют выполнять определенные действия, когда происходит событие, т.е. меняется состояние объекта.
Обработчик событий выполняет программу JavaScript, когда происходит соответствующее событие.
Обработчики событий определяются атрибутом с соответствующим именем в HTML-теге, который создает данный объект JavaScript. Значением может быть любое число операторов JavaScript, разделенных точкой с запятой.
Пример определения обработчика:
Обработчики событий могут вызываться явно, например - button.onClick().
С помощью обработчиков можно, например, выдавать сообщения в ответ на действия пользователя, проверять данные, введенные в форме перед ее отправкой и т.д. Можно отменить или изменить стандартное действие, выполняемое при определенном событии. Для отмены обработчик должен вернуть значение false. Например, при нажатии на ссылку не грузится новый документ, а выдается сообщение:
Определены следующие события и обработчики:
onBlur - cобытие blur происходит, когда окно навигатора или поля формы select, text или textarea теряют фокус.
onFocus - событие focus происходит, когда окно навигатора или поле получает фокус ввода с клавиатуры или щелчком "мыши". Выбор результатов внутри поля связан с событием select, но не с событием focus.
Объекты: window, select, text, textarea.
onChange - событие change происходит, когда поля формы select, text или textarea теряют фокус и их значения были изменены.
Обработчик событий onChange может использоваться для проверки данных после их изменения пользователем.
Объекты: select, text, textarea.
onSelect - событие select происходит, когда пользователь выбирает пункт меню или списка select или некоторый текст внутри поля text или textarea.
Объекты: text, textarea, select.
onClick - событие click происходит при щелчке "мышью" на объекте формы или элементе документа.
Объекты: button, checkbox, radio, link, reset, submit.
onMouseOver - событие mouseOver происходит каждый раз, когда курсор "мыши" попадает на объект.
onMouseOut - событие mouseOotr происходит каждый раз, когда курсор "мыши" покидает границы объекта.
Объекты: link.
onSubmit - событие submit происходит, когда пользователь отправляет форму на Web-сервер.
Вы можете использовать обработчик событий onSubmit для остановки передачи данных формы; для этого используется выражение return, которое возвращает false в обработчик событий. Любое другое возвращенное значение отправляет форму.
onReset - событие reset происходит, когда пользователь сбрасывает значения всех элементов формы в установленные по умолчанию.
В NN4.0 и выше вы можете использовать обработчик событий onReset для отмены сброса данных формы; для этого используется выражение return, которое возвращает false в обработчик событий.
Объекты: form.
onLoad - событие load происходит, когда браузер завершает загрузку изображения, окна или всех фреймов внутри тега .
Объекты: window, image.
onUnload - событие unload происходит, когда вы выходите из документа.
Обработчики событий onLoad и onUnload описываются внутри тегов или , например, .
События onLoad и onUnload, описанные внутри фрейма в теге , происходят перед аналогичными событиями, описанными в теге .
Объекты: window.
onError - событие error происходит, когда при загрузке документа или изображения произошла ошибка.
Объекты: window, image.
onAbort - событие abort происходит, когда загрузка изображения прервана пользователем.
Объекты: image.
Чтобы отключить стандартную обработку события, обработчик должен возвратить логическое значение FALSE (return false).
Исключение : для отмены стандартной обработки событий onMouseOver, onMouseOut, onError обработчик должен возвратить логическое значение TRUE (return true).
Рассмотрим наиболее стандартные и часто используемые javaScript события:
|
a, area, button, input, |
Потеря текущим элементом фокуса. Возникает при |
|
|
Input, select, textarea |
Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur |
|
|
Практически все |
Одинарный щелчок (нажата и отпущена кнопка мыши) |
|
|
a, area, button, input, label, select, textarea |
||
|
Практически все |
Нажата кнопка мыши в пределах текущего элемента |
|
|
Практически |
Курсор мыши выведен за пределы |
|
|
Практически все |
Курсор мыши наведен на текущий элемент |
|
|
Практически все |
Отпущена кнопка мыши в пределах текущего элемента |
|
|
Перемещение окна |
||
|
Изменение размеров окна |
||
|
Выделение текста в текущем элементе |
||
|
Отправка данных формы |
||
|
Попытка закрытия окна браузера и выгрузки документа |
Для выполнения следующего примера нам понадобится новое понятие — событие.
В нашем случае событие — это реакция программы на действие пользователя (щелчок мышью по кнопке, уменьшение мышкой окна браузера, ввод текста с клавиатуры и т.д.). С помощью программы у нас есть возможность отреагировать на любые действия пользователя.
Рассмотрим одно из самых распространенных событий — 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() :
Задание 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.
Задание Js8_5. Выполните задание по инструкции:
Зеленый
… seagreen
… magenta
… purple
… navy
… royalblue
Задание Js8_7. Создание rollover-изображения
— Добавьте в код тег img
с изображением.
— Введите обработчики событий onmouseover
(по наведению) и onmouseout
(при отведении). Сделайте это в виде функций.
onmouseover
процедуру загрузки в тег img
другого изображения.
— Присоедините к обработчику событий onmouseout
процедуру загрузки другого изображения в тег img
.
Одной из самых важных возможностей языка 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("Вы находитесь в текстовой области "); }
Сохраняем документ, открываем его в браузере, наводим курсор мыши над текстом и видим результат обработки данного события:
С помощью параметра функций (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, выведите результат сложения введённых чисел.
- Сделайте так чтобы форма не отправлялось после нажатия по кнопке.
