ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

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

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

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

Обработчики событий называются так, поскольку они выполняют функцию обработки событий. События представляют собой действия (предпринимаемые либо пользователем, либо самим браузером), которые имеют место на веб-странице. Когда событие происходит, мы говорим, что оно инициируется. А когда мы пишем программный код для обработки события (который будет обернут в обычную JavaScript-функцию), то говорим, что событие будет перехватываться.

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

Первым событием, с которым вы познакомились ранее, было событие document-ready. Да, там был и соответствующий обработчик событий: когда документ «сообщил», что он готов (полностью загрузился), было инициировано событие, которое перехватил наш оператор jQuery.

Рассмотрим одно из наиболее активных событий, используемых в наших примерах, функцию click().

Функция click()

Обработчик событий click() привязывает или вызывает функцию, код которой выполнится, когда на выбранном элементе будет произведен щелчок мыши.

Несколько изменим код нашей HTML-страницы и рассмотрим варианты использования функции click().

Оставим на странице две кнопки button:

<input id="but1" type="button" value="Закрыть форму" >
<input id="but2" type="button" value="Закрыть форму без использования hide" >

Самый первый абзац на странице имеет тест "Кликни меня". Давайте воспользуемся этим предложением и кликнем по тексту. После клика со страницы пропала картинка "С Новым годом". Для этого события был применен следующий код:

$("#par1").click(function(e) { $("p+p").hide()};
Метод hide()

Для того, чтобы спрятать картинку мы воспользовались методом hide. С помощью этого метода мы можем с заданной скоростью скрыть выбранный элемент. Функция имеет следующий синтаксис:

$(селектор).hide(скорость,функция_обратного_вызова)

Более подробно эта функция будет рассмотрена далее.

Дальше кликнем на кнопки. События которые произойдут дальше краноречиво говорят их названия.


$(document).ready(function() {
$("#par1").click(function(e) {
$("p+p").hide();
});
$("#but1").click(function(e) {
$("#form").hide();
});
$("#but2").click(function(e) {
$("#form").css("display","none");
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Функция hide()</title>
<style type="text/css">
#form {display:block; margin:25px 10px;}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
.hide{display:none; font-size:36px; overflow:visible}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#par1").click(function(e) {
$("p+p").hide();
});
$("#but1").click(function(e) {
$("#form").hide();
});
$("#but2").click(function(e) {
$("#form").css("display","none");
});
});
</script>
</head>

<body>
<p id="par1">Кликни меня</p>
<p><img id ="banner" src="../../images/newYear.jpg" alt="С Новым годом"/></p>
<input id="but1" type="button" value="Закрыть форму" ><br><br>
<input id="but2" type="button" value="Закрыть форму без использования hide" ><br>
<div id="form">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>

<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br />
<input name="name" type="text" /><br />
<label for="password">Пароль</label><br />
<input name="password" type="password" /><br /><br />
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br />
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br />
</fieldset>
</form>

</div>
</body>
</html>

Метод show()

Теперь несколько усложним задачу. При щелчке по тексту "Кликни меня" исчезает картинка. При клике на первую кнопку должна ичезнуть вместе с формой и сама кнопка, но появиться картинка. При клике на вторую кнопку, вновь появится форма и первая кнопка.

Здесь, чтобы восстановить видимость картинки, формы и кннопки, мы воспользуемся методом show().

Функция имеет следующий синтаксис:

$(селектор).show(скорость,функция_обратного_вызова)

$(document).ready(function() {
$("#par1").click(function(e) {
$("p+p").hide();
});
$("#but1").click(function(e) {
$("#form").hide();
$(this).hide();
$("p+p").show();
});
$("#but2").click(function(e) {
$("#form").show()
$("#but1").show();
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Функция show()</title>
<style type="text/css">
#form {display:block; margin:25px 10px;}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
.hide{display:none; font-size:36px; overflow:visible}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#par1").click(function(e) {
$("p+p").hide();
});
$("#but1").click(function(e) {
$("#form").hide();
$(this).hide();
$("p+p").show();
});
$("#but2").click(function(e) {
$("#form").show()
$("#but1").show();
});
});
</script>
</head>

<body>
<p id="par1">Кликни меня</p>
<p><img id ="banner" src="../../images/newYear.jpg" alt="С Новым годом"/></p>
<input id="but1" type="button" value="Закрыть форму и исчезнуть" ><br><br>
<input id="but2" type="button" value="Открыть форму и первую кнопку" ><br>
<div id="form">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>

<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br />
<input name="name" type="text" /><br />
<label for="password">Пароль</label><br />
<input name="password" type="password" /><br /><br />
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br />
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br />
</fieldset>
</form>

</div>
</body>
</html>

Ключевое слово this

Когда событие происходит, зачастую требуется ссылка на элемент, который его инициировал. Например, мы можем захотеть некоторым образом модифицировать кнопку, на которой только что щелкнул пользовать. Подобная ссылка доступна в программном коде нашего обработчика событий, для чего необходимо воспользоваться ключевым JavaScript-словом this. Чтобы преобразовать объект JavaScript в объект jQuery, нужно использовать для него в качестве обертки селектор jQuery:


$("#but1").click(function(e) {
$("#form").hide();
$(this).hide();
$("p+p").show();
});

Переключение элементов

Использование отдельных кнопок для скрытия и отображения предупреждающего сообщения может показаться расточительством ценного экранного пространства. Оптимальнее иметь одну кнопку, которая выполняет обе задачи: скрытие сообщения с предупреждением, когда оно отображается на дисплее, и вывод на экран, когда оно скрыто. Это можно сделать, проверив, отображается элемент или нет, после чего вывести или скрыть его в зависимости от результата. Для этого мы удалим старые кнопки и добавим новую "Открыть/Закрыть форму". А также поменяем текст первого абзаца "Кликни меня(открыть/закрыть картинку)".


$(document).ready(function() {
$("#par1").click(function(e) {
if($("p+p").is(":visible")){
$("p+p").hide();
}else{
$("p+p").show();
}
});
$("#but1").click(function(e) {
if($("#form").is(":visible")){
$("#form").hide();}else
{
$("#form").show();
}

});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Обработка событий. Действие is</title>
<style type="text/css">
#form {display:block; margin:25px 10px;}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
.hide{display:none; font-size:36px; overflow:visible}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#par1").click(function(e) {
if($("p+p").is(":visible")){
$("p+p").hide();
}else{
$("p+p").show();
}
});
$("#but1").click(function(e) {
if($("#form").is(":visible")){
$("#form").hide();}else
{
$("#form").show();
}

});
});
</script>
</head>

<body>
<p id="par1">Кликни меня(открыть/закрыть картинку)</p>
<p><img id ="banner" src="../../images/newYear.jpg" alt="С Новым годом"/></p>
<input id="but1" type="button" value="Закрыть/Открыть форму" ><br><br>

<div id="form">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>

<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br />
<input name="name" type="text" /><br />
<label for="password">Пароль</label><br />
<input name="password" type="password" /><br /><br />
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br />
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br />
</fieldset>
</form>

</div>
</body>
</html>

В данном примере мы использовали действие is. Оно принимает те же селекторы, которые мы обычно передаем функции jQuery, и проверяет, соответствуют ли они элементам, в отношении которых оно было вызвано. Здесь мы проверяем, был ли выбранный нами элемент p+p или #form также выбран псевдоселектором :visible. Действие is может использоваться и для проверки прочих атрибутов: например, выбран ли form или же элемент div, включен ли он и т. д.

is возвращает значение true или false в зависимости от того, соответствуют элементы селектору или нет. Здесь мы будем отображать элемент, если он скрыт, и скрывать его, если он отображается. Логика подобного типа, когда происходит переключение между двумя состояниями, называется toggle и является весьма полезной конструкцией.

Метод toggle()

Переключение элементов между двумя состояниями настолько распространено, что многие jQuery-функции представлены в виде версий, позволяющих выполнять данную процедуру. Подобная версия show/hide просто называется toggle и функционирует следующим образом:


$("#par1").click(function(e) {
$("p+p").toggle();
});

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


$(document).ready(function() {
$("#par1").dblclick(function(e) {
alert("Вы произвели двойной щелчок по тексту.")
});
$("#but1").dblclick(function(e) {
$("#form").toggle();
});
$("#but1").click(function(e) {
$(this).val("Прекрати это!")
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Обработка событий. Событие click() и метод toggle()</title>
<style type="text/css">
#form {display:block; margin:25px 10px;}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
.hide{display:none; font-size:36px; overflow:visible}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#par1").click(function(e) {
$("p+p").toggle();
});
$("#but1").click(function(e) {
$("#form").toggle();

});
});
</script>
</head>

<body>
<p id="par1">Кликни меня(открыть/закрыть картинку)</p>
<p><img id ="banner" src="../../images/newYear.jpg" alt="С Новым годом"/></p>
<input id="but1" type="button" value="Закрыть/Открыть форму" ><br><br>

<div id="form">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>

<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br />
<input name="name" type="text" /><br />
<label for="password">Пароль</label><br />
<input name="password" type="password" /><br /><br />
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br />
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br />
</fieldset>
</form>

</div>
</body>
</html>

Функция dblclick()

Функция dblclick() привязывает или вызывает функцию, код которой выполнится, когда на выбранном элементе будет произведен двойной щелчок мыши. Синтаксис функции такой:

//Вызываем событие:
$(селектор).dblclick()
//Привязываем обработчик:
$(селектор).dblclick(обработчик_события)

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


$(document).ready(function() {
$("#par1").dblclick(function(e) {
alert("Вы произвели двойной щелчок по тексту.")
});
$("#but1").dblclick(function(e) {
$("#form").toggle();
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Обработка событий. Событие dblclick()</title>
<style type="text/css">
#form {display:block; margin:25px 10px;}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
.hide{display:none; font-size:36px; overflow:visible}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#par1").dblclick(function(e) {
alert("Вы произвели двойной щелчок по тексту.")
});
$("#but1").dblclick(function(e) {
$("#form").toggle();
});
$("#but1").click(function(e) {
$(this).val("Прекрати это!")
});
});
</script>
</head>

<body>
<p id="par1">Кликни меня <strong>дважды</strong></p>
<p><img id ="banner" src="../../images/newYear.jpg" alt="С Новым годом"/></p>
<input id="but1" type="button" value="Закрыть/Открыть форму" ><br><br>

<div id="form">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>

<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br />
<input name="name" type="text" /><br />
<label for="password">Пароль</label><br />
<input name="password" type="password" /><br /><br />
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br />
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br />
</fieldset>
</form>

</div>
</body>
</html>