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

Одной из самых важных возможностей языка JavaScript, которая, пожалуй, является основной в этом языке, это возможность обрабатывать какие-то события. Такая возможность является особенностью для JavaScript по сравнению с другими языками из web программирования, потому что только этому языку в силе сделать подобное.
Что такое событие и обработчики событий
Событие — это некое действие, которое может производить либо пользователь, либо другие объекты на странице.
Самым ярким примером события это клик пользователя по какому-то объекту(click), будь то это кнопка, ссылка или любой другой элемент. Другой пример события, это наведение мыши над каким-то объектом(mouseover), скажем над изображением. Также событием является полное загрузка страницы(load). В общем все действия, которые происходят на сайте являются событиями.
Так вот, мы можем захватить любое событие, которое производится на странице и обрабатывать её с помощью соответствующего обработчика. Например, при наведении мыши на какой-то блок div, мы можем вывести некое сообщение, допустим 'Вы находитесь в текстовой области'. Или, при клике по кнопке скрыть какой-то блок со страницы. В общем, много чего можно сделать пре обработки какого-то события.
И для того чтобы обрабатывать какое-то событие, необходимо использовать специальный обработчик для данного события. Каждое событие имеет свой обработчик, например, у события клик(click) есть обработчик onclick. У события наведения мыши над объектом(mouseover) есть обработчик onmouseover. И у события полной загрузки страницы(load) есть обработчик onload.
То есть как вы поняли название обработчика, формируется из префикса 'on' + название события.
Полный список событий и обработчиков можно найти в справочнике, в этой статье мы рассмотрим лишь те, которые чаще всего используется.
Обработчик события вызывается в качестве атрибута, в самом теге HTML элемента. В значение обработчика можно написать сразу код JavaScript, но лучше вызывать какую-то функцию, которая сделает необходимые действия. Функцию необходимо описать внутри тега script, который может находится как внутри блока head, так и в конце тега body. В качестве параметра для этой функции передаётся слово this, то есть текущий объект.
Теперь напишем простой пример. При наведении мыши над блоком с текстом, выведем с помощью метода alert, сообщение о том что пользователь находится внутри текстовой области.
HTML код:
<div onmouseover = "blockOver(this)"> 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>
CSS код:
div{ padding-left: 50px; width: 200px; border: 1px solid #000; }
JavaScript код:
function blockOver(block){ alert('Вы находитесь в текстовой области '); }
Сохраняем документ, открываем его в браузере, наводим курсор мыши над текстом и видим результат обработки данного события:

Как получить значение атрибута в javascript ?
С помощью параметра функций (this), можно получить значение какого-то атрибута текущего объекта, например, узнать его id.
Для примера, создадим кнопку и зададим ей id со значением 'justButton'. Когда кликнем на данную кнопку, то выведем такое сообщение: 'Вы кликнули по кнопке, с идентификатором значение_id'. Здесь необходимо уже использовать обработчик onclick.
HTML код:
<p> <input type="button" name="button" id="button" value="Простая кнопка" onclick="clickOnButton(this)" /> </p>
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.
<body onload="alert('Страница загружается')" > <!-- Тело документа --> </body>
Такой способ можно использовать только в случае если для обработки события нужно только одна короткая строчка кода. В противном случае, если код обработки состоит из одной длинной строки или много строк, то нужно использовать функцию.
Проверка формы на JavaScript
И в конец данной статьи разберём простой пример обработки формы. Обработка формы на JavaScript, во-первых, уменьшает загрузку на сервер и во-вторых придаёт дополнительный плюс к юзабилити сайта.
Форма состоится из одного поля для логина, и кнопки отправить. При отправке формы, будем проверять длину логина. Его длина должна быть больше трёх символов.
Начнём, мы с HTML структуры данной формы.
<form method="GET" name="myform" action="" > <p> <input type="text" name="login" /> </p> <p> <input type="submit" name="send" value="Отправить" /> </p> </form>
Теперь, тегу формы добавим в качестве атрибута обработчик onsubmit, события submit. Следующим образом:
<form method="GET" name="myform" action="" onsubmit = "return checkForm(this)" >
Событие 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, выведите результат сложения введённых чисел.
- Сделайте так чтобы форма не отправлялось после нажатия по кнопке.
Похожие статьи:
Понравилась статья?
Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.
Поделиться с друзьями:
Подписаться на новые статьи:
Поддержите пожалуйста мой проект!
Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.
Добавляйтесь ко мне в друзья в:
Добавляйтесь в мои группы:
Подпишитесь на мои каналы:
Автор статьи: Мунтян Сергей
Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!
Дата добавления: %date%