Событие клика javascript. Событие onclick 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("Вы находитесь в текстовой области "); }
Сохраняем документ, открываем его в браузере, наводим курсор мыши над текстом и видим результат обработки данного события:
С помощью параметра функций (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 основаны на модели программирования, когда выполнение программы управляется событиями. При таком стиле программирования веб-браузер генерирует событие, когда с документом или некоторым его элементом что-то происходит. Например, веб-браузер генерирует событие, когда завершает загрузку документа, когда пользователь наводит указатель мыши на гиперссылку или нажимает клавишу на клавиатуре.
Если JavaScript-приложение интересует определенный тип события для определенного элемента документа, оно может зарегистрировать одну или более функций, которая будет вызываться при возникновении этого события. Имейте в виду, что это не является уникальной особенностью веб-программирования: все приложения с графическим интерфейсом пользователя действуют именно таким образом - они постоянно ожидают, пока что-то произойдет (т.е. ждут появления событий), и откликаются на происходящее.
Тип события - это строка, определяющая тип действия, вызвавшего событие. Тип «mousemove», например, означает, что пользователь переместил указатель мыши. Тип «keydown» означает, что была нажата клавиша на клавиатуре. А тип «load» означает, что завершилась загрузка документа (или какого-то другого ресурса) из сети. Поскольку тип события - это просто строка, его иногда называют именем события.
Цель события - это объект, в котором возникло событие или с которым это событие связано. Когда говорят о событии, обычно упоминают тип и цель события. Например, событие «load» объекта Window или событие «click» элемента . Самыми типичными целями событий в клиентских приложениях на языке JavaScript являются объекты Window, Document и Element, но некоторые типы событий могут происходить и в других типах объектов.
Обработчик события - это функция, которая обрабатывает, или откликается на событие. Приложения должны зарегистрировать свои функции обработчиков событий в веб-браузере, указав тип события и цель. Когда в указанном целевом объекте возникнет событие указанного типа, браузер вызовет обработчик. Когда обработчики событий вызываются для какого-то объекта, мы иногда говорим, что браузер «возбудил» или «сгенерировал» событие.
Объект события - это объект, связанный с определенным событием и содержащий информацию об этом событии. Объекты событий передаются функции обработчика события в виде аргумента (кроме IE8 и более ранних версий, где объект события доступен только в виде глобальной переменной event). Все объекты событий имеют свойство type , определяющее тип события, и свойство target , определяющее цель события.
Для каждого типа события в связанном объекте события определяется набор свойств. Например, объект, связанный с событиями от мыши, включает координаты указателя мыши, а объект, связанный с событиями от клавиатуры, содержит информацию о нажатой клавише и о нажатых клавишах-модификаторах. Для многих типов событий определяются только стандартные свойства, такие как type и target, и не передается никакой дополнительной полезной информации. Для таких типов событий важно само наличие происшествия события, и никакая другая информация не имеет значения.
Распространение события - это процесс, в ходе которого браузер решает, в каких объектах следует вызвать обработчики событий. В случае событий, предназначенных для единственного объекта (таких как событие «load» объекта Window), надобность в их распространении отсутствует. Однако, когда некоторое событие возникает в элементе документа, оно распространяется, или «всплывает», вверх по дереву документа.
Что означают сии бредовые строчки, мы будем разбираться несколько позже, а пока…
- Принципиально, событие onclick из Ява-скрипт в HTML можно навесить на любой элемент кода HTML-страницы, будь то ,
Или . Браузер всё «сожрёт», и всё будет работать. Вот только, доступ к элементу с клавиатуры возможен исключительно для ссылко- или кнопко- объекта. И, если предположить на мгновение, что у пользователя нет мыши и он работает исключительно с клавиатуры, то всё к чему он сможет соприкоснуться на сайте - это будут только кнопки или ссылки. Третьего не дано! Поэтому, «навешивать» событие onclick на объекты, недоступные с клавиатуры - просто некрасиво. Ну, не по-человечески, как-то это. Из сего выплывает второе правило для onclick в HTML
- это событие нужно подключать только к ссылке (тег «а») или к кнопке (тег «button»). В противном случае, код работать всё-таки будет, но в аду, для таких программистов - заготовлена отдельная большая сковорода.
Поскольку, (в HTML) форматирование и работа с кнопками («батонами») вызывает определённые трудности, то единственным, универсальным и оптимальным вариантом остаётся только ссылка (тег «а»). Но, и с этим тегом - не всё так гладко. Теперь, возвращаемся к разбору с нашей строчкой кода:
МЕНЮ №1
Выбрасываем из обсуждения тайтл ссылки, как совершенно очевидную вещь. Остаётся,
МЕНЮ №1
Вся дальнейшая писчая лабуда будет связанна с темой блокировки атрибута href
, который нужно правильно «парализовать», чтобы ссылка перестала быть рабочей ссылкой, но тем не менее - выполняла функции onclick
.
return false ; - это прямая блокировка атрибута href. Если у пользователя в браузере разрешён Ява-скрипт, то будет выполнен вызов события onclick из соответствующего скрипта, а не переход по ссылке. Т.е., чтобы при клике по «ссылке вызова» не было сразу перехода по адресу из href, в onclick добавляется событие return false; и предполагается, что сначала исполнится функция, которая отменит переход по ссылке, если javascript включен. Таким образом, содержание атрибута href не имеет никакого значения, поскольку оно игнорируется при выполнении ява-скрипта.
Но вот вопрос. А что будет, если у пользователя в его браузере запрещён (выключен) Ява-скрипт? Как тогда поведёт себя наша ссылочка? Не буду интриговать, а сразу выложу возможные варианты развития событий - возможные значения атрибута href и соответствующего поведения браузера после клика по такой ссылке при выключенном Ява-скрипт.
Конечно, если javascript выключен в браузере у пользователя - так это одна беда и неурядица. Если выполнение Ява-скриптов выключено (запрещено) в браузере у пользователя, то тогда начинаются сплошные проблемы с атрибутом href
, поскольку тег «а», это - всё-таки ссылка и браузер будет пытаться осуществить по ней переход.
Совсем выкинуть атрибут href из состава ссылки нельзя. Без атрибута href в тексте ссылке обойтись никак не возможно и любой валидатор сразу обидится за такое надругательство над её пряным и нежным телом. Значит, тогда остаётся один единственный вариант - наполнить атрибут href удобоваримым содержимым. Тут возможно следующее: оставить href совершенно пустым, заполнить его знаком диеза «#» или выражением javascript:// . При выключенном (или заглюканном) Ява-скрипт, после клика по таким ссылкам будет происходить следующее:
Проба Атрибут href пустой. После клика по такой ссылке, будет просто перезагружена страница в браузере. Проба Атрибут href имеет значение "#". После клика по такой ссылке, пользователя выбросит в начало страницы, без её перезагрузки. Проба Атрибут href имеет значение "javascript://". После клика по такой ссылке, ничего не произойдёт. href="javascript://" - клик по ссылке будет просто проигнорирован браузером. Значение "javascript://" для атрибута href - это и есть стандартная «заглушка» для блокировки ссылки при выключенном Ява-скрипте.
href="javascript://" - туфта!Почему туфта? Потому что, интернет-жизнь в мире поисковых систем вносит свои коррективы. С точки зрения правильной и семантической! вёрстки, абсолютно логичным будет записать в атрибут href реальную ссылку и добавить реальный тайтл для этой ссылки. Тогда, после клика по такой ссылке произойдёт одно из двух: либо, будет выполнено событие onclick из соответствующего Ява-скрипта, либо состоится переход по реальной ссылке на реальную страницу, (если Ява-скрипт отключён или заглюкал/недогрузился).
Таким образом, подведём итоги. В ссылке вызова события Ява-скрипт, в href помещаем реальную ссылку на реальную страницу для перехода при выключенном javascript, а в onclick - функцию, вызывающую запрос выполнения скрипта при включённом Ява-скрипт.
Иными словами, в «href» должна находиться совершенно нормальная и рабочая ссылка на любую веб-страницу, куда будет перенаправлен пользователь при клике по «ссылке вызова события» при выключенном Ява-скрипт, и которая будет игнорироваться скриптом при включенном Ява-скрипт. Вот и всё …
Ну, и под конец -
Проверка браузера на включение/выключение Ява-скриптСтандартный код такой проверки выглядит так:
У Вас отключён javascript...
Где, для можно прописать в CSS любые стили, кроме display:none;
и ему подобных стилей... Браузер ОБЯЗАТЕЛЬНО!!! выведет это сообщение на экран, в случае отключения пользователем Ява-скрипта в своём браузере. Таким нехитрым способом, Web-мастера часто пишут: "Включите, пожалуйста, javascript", либо выводят какие-то красивые картинки с аналогичной просьбой, либо ещё что-нибудь... Внутри тега noscript
можно помещать любые HTML-теги. И, это - вовсе не лишняя предосторожность. Несмотря на то, что сейчас не так просто найти сайт, который бы вообще не использовал javascript.
Кто не с нами, тот против нас
Проблему с выключенным в браузере Ява-скрипт можно, вообще - решить радикально и кардинально. Например, добавить внутрь секции код HTML5, вида:
где, http://mysite.ru/ - это веб-страница, куда сразу перенаправляется
пользователь при выключенном в браузере
Ява-скрипт.
Рассмотрим наиболее стандартные и часто используемые 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
.