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

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

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

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

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

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

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

Профессиональное управление событиями

Профессиональное управление событиями

Метод on()

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

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

Примечание. Такие функции, как bind(), live(), delegate() были заменены одной функцией on(), предназначенной для добавления событий к элементам. Кроме того, функция off() заменила функцию unbind(), которая использовалась для удаления событий с элементов.

Синтаксис функции:

$("#селектор").on("событие_мыши", "селектор", "данные", "имя_функции");
  1. событие_мыши - это строка, содержащая имя события(например, щелчок, наведение курсора и любые другие события, которые мы рассматривали.
  2. селектор - не является обязательным, так как нет необходимости предоставлять значение для него при использовании функции on(). Если селектор null или опущен, то событие всегда срабатывает , когда он достигнет выбранного элемента.
  3. данные - это данные в event.data, которые мы желаем передать функции (в форме литерала объекта либо переменной, содержащей литерал объекта). Литерал объекта - это список имен свойств и их значений.
  4. имя_функции - функция, выполняющая какое-либо действие при запуске события. Это может быть анонимная функция или функция с именем.

Передача данных при использовании функции on() не является обязательной. Для этого надо просто опустить аргумент с данными:

$("").on("событие_мыши", "имя_функции");

Функционально данный код идентичен следующему:

$("селектор").click(имя_функции);

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

Этот код создает две переменные: pVar и burVar. Каждая переменная содержит объектную константу с одним и тем же именем свойства (message), но с различным текстом. Функция showMessage() принимает объект события и сохраняет его в переменной event. Эта функция запускает команду alert(), отображая свойство message(которое само явяляется свойством свойства data объекта события).


$(document).ready(function() {
var pVar = {message:"Привет от абзаца"};
var butVar = {message:"Привет от кнопки"};
function showMessage(event){
alert(event.data.message);
}
$("#par1").on("click",pVar,showMessage);
$("#but1").on("click", butVar,showMessage);
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Метод on())</title>
<style type="text/css">
#form {display:block; margin:25px 10px;}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top; }

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var jq = jQuery.noConflict();
jq(document).ready(function() {
var pVar = {message:'Привет от абзаца'};
var butVar = {message:"Привет от кнопки"};
function showMessage(event){
alert(event.data.message);}
jq("#par1").on("click",pVar,showMessage);
jq("#but1").on("click", butVar,showMessage);

});
</script>
</head>

<body>
<p id="par1">Кликни меня</p>
<input type="button" id="but1" value="кликни и меня тоже">

<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 id = "el1" name="name" type="text" value="" style="color:grey;"><br>
<label for="password">Пароль</label><br>
<input id = "el2" name="password" type="password" placeholder = "Введите пароль" ><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>

Функция on() обеспечивает гибкость в процессе программирования. В дополнение рассмотренным примерам, она позволяет привязать два и более событий к одной и той же функции.

Например, вам нужно, чтобы по щелчку мыши или клавиши исчезло изображение, а затем по щелчку же и появилось. Вот пример такого кода:

$(document).on("click keypress", function(){
$("#banner").toggle();
});

Важная часть этого кода это click keypress.

Где keypress, не что иное как событие, привязывающее обработчик к нажатию клавиши.
Предоставляя несколько имен событий, разделенных пробелом, вы даете команду jQuery выполнить анонимную функцию при запуске любого события из списка.
Теперь, если вы щелкните мышью по любому месту на веб-странице или нажмете любую клавишу, то изображение исчезнет. Повторное нажатие клавиши или щелчок мыши восстановит изображение вновь.


$(document).on("click keypress", function(){
$("#banner").toggle();
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Метод on()</title>
<style type="text/css">
#form {display:block; margin:25px 10px;}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top; }
.active{font-size:36px; color:hsla(295,87%,50%,1.00)}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>

$(document).on("click keypress", function(){
$("#banner").toggle();
});

</script>
</head>

<body>
<p id="par1">Кликни меня</p>
<p><img id ="banner" src="../../images/newYear.jpg" alt=""/></p>
<input type="button" id="but1" value="кликни и меня тоже">
<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 id = "el1" name="name" type="text" value="" style="color:grey;"><br>
<label for="password">Пароль</label><br>
<input id = "el2" name="password" type="password" placeholder = "Введите пароль" ><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>

Далее мы рассмотрим еще несколько примеров по использованию функции on(). Все они показаны на нашей HTML-странице.


$(document).ready(function(e) {
$( "#par1" ).on( "click", function() {
alert( $( this ).text() );
});
function myHandler( event ) {
alert( event.data.message );
}
$( "#but1" ).on( "click", { message: "кликни и меня тоже" }, myHandler );

$( "#bar span" ).on( "mouseenter mouseleave", function( event ) {
$( this ).toggleClass( "active" );
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Метод on()</title>
<style type="text/css">
#form {display:block; margin:25px 10px;}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top; }
.active{font-size:36px; color:hsla(295,87%,50%,1.00)}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
$( "#par1" ).on( "click", function() {
alert( $( this ).text() );
});
function myHandler( event ) {
alert( event.data.message );
}
$( "#but1" ).on( "click", { message: "кликни и меня тоже" }, myHandler );

$( "#bar span" ).on( "mouseenter mouseleave", function( event ) {
$( this ).toggleClass( "active" );
});
});
</script>
</head>

<body>
<p id="par1">Кликни меня</p>
<input type="button" id="but1" value="кликни и меня тоже">
<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 id = "el1" name="name" type="text" value="" style="color:grey;"><br>
<label for="password">Пароль</label><br>
<input id = "el2" name="password" type="password" placeholder = "Введите пароль" ><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>

Отмена обычного поведения событий

Некоторые элементы HTML-кода имеют заранее запрограммированные реакции на события. Например, при щелчке по ссылке обычно загружается новая веб-страница, а щелчок по кнопке подтверждения формы отсылает данные веб-серверу для обработки. Допустим, при подтверждении формы(событие submit()) мы можем пожелать остановить ее отправку, пока посетитель не внесет в форму недостающие данные.

Метод preventDefault()

Функция preventDefault() предотвращает выполнение стандартного действия элемента. Имеет следующий синтаксис:

event.preventDefault()

Есть другой вариант предотвращения действия элемента. Это возвращение значения false. В примере, рассмотрены оба варианта остановки события.


$(document).ready(function(e) {
$("#anc1").click(function(event) {
event.preventDefault();
alert("Переход на главную страницу нашего сайта не был произведен т.к. стандартное действие ссылки было отменено. Свойство isDefaultPrevented="+event.isDefaultPrevented()+".");
});
$("#anc2").click(function(event){
alert("Переход на главную страницу нашего сайта будет произведен т.к. стандартное действие ссылки не было отменено. Свойство isDefaultPrevented="+event.isDefaultPrevented()+".");
})
$("#anc3").click(function(event) {
alert("Переход на главную страницу нашего сайта не был произведен т.к. стандартное действие ссылки было отменено. ");
return false;
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Метод preventDefault()</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
$("#anc1").click(function(event) {
event.preventDefault();
alert("Переход на главную страницу нашего сайта не был произведен т.к. стандартное действие ссылки было отменено. Свойство isDefaultPrevented="+event.isDefaultPrevented()+".");
});
$("#anc2").click(function(event){
alert("Переход на главную страницу нашего сайта будет произведен т.к. стандартное действие ссылки не было отменено. Свойство isDefaultPrevented="+event.isDefaultPrevented()+".");
})
$("#anc3").click(function(event) {
alert("Переход на главную страницу нашего сайта не был произведен т.к. стандартное действие ссылки было отменено. ");
return false;
});
});
</script>
</head>

<body>
<a id="anc1" href="https://sevidi.ru">Отмененная ссылка</a><br>

<a id="anc2" href="https://sevidi.ru">Не отмененная ссылка</a><br>

<a id="anc3" href="https://sevidi.ru">Другой вариант отмененной ссылки</a>
</body>
</html>

Удаление событий

Иногда нам может потребоваться удалить событие, которое мы ранее присвоили элементу. Функция off() позволяет это сделать.

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

.off( events [, selector ] [, handler ] )
.off( events [, selector ] )
.off( event )
.off ()

Где:

  1. events - oдин или несколько разделенных пробелами типов событий и дополнительные пространства имен, или просто пространств имен.
  2. selector - cелектор , который должен совпадать с тем , который первоначально был передан , .on() когда есть обработчики событий.
  3. handler - Функция обработчика ранее подключенную к этому событию, или специальное значение false.

В примерах ниже вы увидите функцию off() в действии. Если навести курсор на ссылку, то появится окно с сообщением. Поскольку постоянное появление окна будет раздрожать посетителя, его появлени можно отключть щелкнув по тексту "Уйдите".

Во втором примере три кнопки. Нажав на вторую вы активируете первую. Третья кнопка удаляет активацию.


$(document).ready(function(e) {
function flash() {
$( "#cl" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
$( "body" )
.on( "click", "#theone", flash )
.find( "#theone" )
.text( "Можно нажать " );
});
$( "#unbind" ).click(function() {
$( "body" )
.off( "click", "#theone", flash )
.find( "#theone" )
.text( "Ничего не делает..." );
});
$("#anc1").mouseover(function(e) {
alert("Вы навели на меня указатель мыши");
});
$("#par1").click(function(e) {
$("#anc1").off("mouseover");
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Метод off()</title>
<style>
button {
margin: 5px;
}
button#theone {
color: red;
background: yellow;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
function flash() {
$( "#cl" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
$( "body" )
.on( "click", "#theone", flash )
.find( "#theone" )
.text( "Можно нажать " );
});
$( "#unbind" ).click(function() {
$( "body" )
.off( "click", "#theone", flash )
.find( "#theone" )
.text( "Ничего не делает..." );
});
$("#anc1").mouseover(function(e) {
alert("Вы навели на меня указатель мыши");
});
$("#bl1").click(function(e) {
$("#anc1").off("mouseover");
});
});
</script>
</head>

<body>
<div id="bl1" style="height:200px">
<button id="theone">Ничего не делает...</button>
<button id="bind">Нажмите еще раз</button>
<button id="unbind">Удалить</button>
<div id = "cl" style="display:none;">Кликните меня</div><br>

<p id = "par1"><a id="anc1" href="https://sevidi.ru">Ссылка</a>  
Уйдите</p>
</div>
</body>
</html>