Javascript — объект event

Проверка формы на 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.

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

Задачи

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

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

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

Добавляйтесь ко мне в друзья в:

  • — ВКонтакте
  • — Facebook
  • — Одноклассниках

Добавляйтесь в мои группы:

  • — Группа в ВКонтакте
  • — Группа в Facebook
  • — Группа в Одноклассниках

Подпишитесь на мои каналы:

  • — Мой канал на Youtube
  • — Мой канал на Google+

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: 2016-11-07 09:16:24

HTML Теги

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><menu><menuitem><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

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

Последнее обновление: 1.11.2015

Встроенные обработчики

В прошлой теме были рассмотрены встроенные обработчики (inline event handler), которые определяются в коде элемента с помощью атрибутов:

<div id="rect" onclick="handler(event)"></div>

Хотя этот подход прекрасно работает, но он имеет кучу недостатков:

  • Код html смешивается с кодом JavaScript, в связи с чем становится труднее разрабатывать, отлаживать и поддерживать приложение

  • Обработчики событий можно задать только для уже созданных на веб-странице элементов. Динамически создаваемые элементы в этом случае лишаются возможности обработки событий


  • К элементу для одного события может быть прикреплен только один обработчик

  • Нельзя удалить обработчик без изменения кода

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

Проблемы, которые возникают при использовании встроенных обработчиков, были призваны решить свойства обработчиков. Подобно тому, как у html-элементов есть атрибуты для обработчиков, так и в коде javascript у элементов DOM мы можем получить свойства обработчиков, которые соответствуют атрибутам:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<style>
	#rect{
		width:50px;
		height:50px;
		background-color:blue;
	}
	</style>
</head>
<body>
<div id="rect"></div>
<script>
function handler(e){
	
	alert(e.type);
}
document.getElementById("rect").onclick = handler;
</script>
</body>
</html>

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

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

Слушатели событий

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

Для работы со слушателями событий в JavaScript есть объект EventTarget, который определяет методы addEventListener() (для добавления слушателя) и removeEventListener() для удаления слушателя. И поскольку html-элементы DOM тоже являются объектами EventTarget, то они также имеют эти методы. Фактически слушатели представляют те же функции обработчиков.

Метод принимает два параметра: название события без префикса on и функцию обработчика этого события. Например:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<style>
	#rect{
		width:50px;
		height:50px;
		background-color:blue;
	}
	</style>
</head>
<body>
<div id="rect"></div>
<script>
var rect = document.getElementById("rect");

rect.addEventListener("click", function (e) {
	alert(e.type);
});
</script>
</body>
</html>

То есть в данном случае опять же обрабатывается событие click. И также можно было бы в качестве второго параметра название функции:

function handler(e){
	
	alert(e.type);
}
var rect = document.getElementById("rect");

rect.addEventListener("click", handler);

Удаление слушателя аналогично добавлению:

rect.removeEventListener("click", handler);

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

var clicks = 0;
function handlerOne(e){
	
	alert(e.type);
}
function handlerTwo(e){
	
	clicks++;
	var newNode = document.createElement("p");
	newNode.textContent = "произошло нажатие " + clicks;
	document.body.appendChild(newNode);
}
var rect = document.getElementById("rect");
// прикрепляем первый обработчик
rect.addEventListener("click", handlerOne);
// прикрепляем второй обработчик
rect.addEventListener("click", handlerTwo);

НазадВперед

События формы

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

Фокусное событие (onfocus)

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


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

<input type="text" onfocus="highlightInput(this)">
<button type="button">Button</button>

<script>
function highlightInput(elm){
  elm.style.background = "yellow";
}
</script>

Событие Blur (onblur)

Событие размытия blur (элемент теряет фокус) происходит, когда пользователь убирает фокус с элемента формы или окна.

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

<input type="text" onblur="alert('Lost focus!')">
<button type="button">Submit</button>

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

Событие изменения состояния (onchange)

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

Вы можете обработать событие изменения с помощью обработчика события onchange. В следующем примере будет показано предупреждающее сообщение при изменении параметра в поле выбора.

<select onchange="alert('Changed!');">
  <option>Select</option>
  <option>Male</option>
  <option>Female</option>
</select>

Событие отправки формы (onsubmit)

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

Вы можете обработать событие submit с помощью обработчика события onsubmit. В следующем примере будет показано предупреждение при отправке формы на сервер.

<form action="action.php" method="post" onsubmit="alert('Data submitted!');">
  <label>First Name:</label>
  <input type="text" name="first-name" required>
  <input type="submit" value="Submit">
</form>

Mouse Events

Attribute Value Description
onclick script Fires on a mouse click on the element
ondblclick script Fires on a mouse double-click on the element
onmousedown script Fires when a mouse button is pressed down on an element
onmousemove script Fires when the mouse pointer is moving while it is over an element
onmouseout script Fires when the mouse pointer moves out of an element
onmouseover script Fires when the mouse pointer moves over an element
onmouseup script Fires when a mouse button is released over an element
onmousewheel script Deprecated. Use the onwheel attribute instead
onwheel script Fires when the mouse wheel rolls up or down over an element

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

HTML Tags

<!—> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> — <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>


С этим читают