Работаем с событиями в jQuery

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

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

В данном уроке будут раскрыты следующие темы:

Что такое событие?
Работа с событиями
Простой обработчик события
Короткие методы для связывания общих событий
Доступ к элементам из обработчика события
Получение дополнительной информации о событии
Остановка действий по умолчанию и распространение событий
Сброс обработчика события
Принудительная генерация события

Что такое событие?

Событие в JavaScript (и jQuery) генерируется, когда что-то происходит с элементом на странице. В список общих событий входят:

click: Генерируется, когда пользователь нажимает на элементе кнопку мыши
dblclick: Генерируется, когда пользователь делает двойной щелчок кнопкой мыши на элементе
mouseover: Генерируется, когда пользователь перемещает указатель мыши на элемент
load: Генерируется после того, как элемент, например, изображение, полностью загружен
submit: Генерируется, когда происходит отправка формы (данное событие генерируется только для элементов form)

Работаем с событиями

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

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

`1`	`$(selector).bind( eventName, functionName );`

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

Простой пример

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

01<!DOCTYPE html>
02<html xmlns="http://www.w3.org/1999/xhtml">
03<head>
04<script type="text/javascript" src="jquery.js"></script>
05<script type="text/javascript">
06 
07$( init );
08 
09function init() {
10  $('#myButton').bind( 'click', sayHello );
11}
12 
13function sayHello() {
14  alert( "Всем - привет!" );
15}
16</script>
17</head>
18<body>
19<div>
20<input type="button" id="myButton" value="Нажми меня" />
21</div>
22</body>
23</html>

Если нажать на кнопку на странице, будет выведено окно сообщения с надписью "Всем - привет!".

Короткие методы для связывания общих событий

Для облегчения жизни jQuery имеет много коротких методов для связывания часто используемых событий с функциями- обработчиками. Вот некоторые из них:

click( functionName ): Эквивалентно вызову bind( 'click', functionName )
dblclick( functionName ): Эквивалентно вызову bind( 'dblclick', functionName )
load( functionName ): Эквивалентно вызову bind( 'load', functionName )

Например, вы можете переписать вызов метода bind() в выше приведённом примере следующим образом:

`1`	`$('#myButton').click( sayHello );`

Полный список коротких методов можно найти в документации jQuery по методу bind().

Доступ к элементам из обработчика событий

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

Следующий пример создаёт пульсации кнопки (плавно затухает и плавно высвечивается снова) при нажатии на неё. Чтобы выполнить поставленную задачу, обработчик события получает доступ к объекту нажатой кнопки с помощью this, оборачивает его объектом jQuery, а затем вызывает методы jQuery fadeOut() и fadeIn() для организации пульсирования кнопки:

01<!DOCTYPE html>
02<html xmlns="http://www.w3.org/1999/xhtml">
03<head>
04<script type="text/javascript" src="jquery.js"></script>
05<script type="text/javascript">
06 
07$( init );
08 
09function init() {
10  $('#myButton').bind( 'click', pulsate );
11}
12 
13function pulsate() {
14  $(this).fadeOut();
15  $(this).fadeIn();
16}
17</script>
18</head>
19<body>
20<div>
21<input type="button" id="myButton" value="Нажми меня" />
22</div>
23</body>
24</html>

Получение дополнительной информации о событии

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

Чтобы получить больше сведений о событии, ваш обработчик должен принимать объект jQuery event в качестве аргумента. В таком случае обработчик события может получить доступ к дополнительной информации с помощью различных методов и свойств данного объекта.

Следующий пример не только выводит сообщение, когда нажата кнопка, но и указывает точную дату и время, когда произошло событие, а также выводит координаты X и Y указателя мыши в это время:

01<!DOCTYPE html>
02<html xmlns="http://www.w3.org/1999/xhtml">
03<head>
04<script type="text/javascript" src="jquery.js"></script>
05<script type="text/javascript">
06 
07$( init );
08 
09function init() {
10  $('#myButton').bind( 'click', displayInfo );
11}
12 
13function displayInfo( clickEvent ) {
14  var clickTime = new Date( clickEvent.timeStamp );
15  var clickTimeString = clickTime.toDateString() + " в " + clickTime.toTimeString();
16  var mouseCoords = "(" + clickEvent.pageX + "," + clickEvent.pageY + ")";
17  alert( "Всем - привет! Вы нажали кнопку " + clickTimeString +
18  ".\n\nКоординаты указателя мыши были : " + mouseCoords + "." );
19}
20</script>
21</head>
22<body>
23<div>
24<input type="button" id="myButton" value="Нажми меня" />
25</div>
26</body>
27</html>

Выше приведённый скрипт использует три свойства 3 объекта event:

timeStamp: Время, когда произошло событие
pageX: Координата X указателя мыши в момент нажатия на кнопку, по отношению к левому верхнему углу документа
pageY: Координата Y указателя мыши в момент нажатия на кнопку, по отношению к левому верхнему углу документа

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

Остановка действий по умолчанию и распространение событий

События в JavaScript имеют пару особенностей, о которых надо упомянуть:

Действия по умолчанию. многие события имеют действия по умолчанию. Например, если пользователь нажмет на ссылку, то по умолчанию событие click для ссылки открывает ссылку.
Распространение событий. Также известно как «всплытие» события, происходит тогда, когда вы привязываете обработчик к одному и тому же событию для элемента и его родителя. Например, вы привязываете обработчик к событию click для ссылки, и привязываете другой обработчик к событию click для параграфа, который содержит ссылку. Когда пользователь нажимает ссылку, обработчик события click ссылки запускается первым, а затем событие "всплывает" к родительскому параграфу, вызывая срабатывание его обработчика события click.

Часто нужно предотвращать запуск действий по умолчанию и/или распространение событий. Например, если установлен обработчик события click для ссылки, который нужен для проверки правильности заполнения формы перед тем как покинуть страницу, то нужно предотвратить переход по ссылке, который выполняется по умолчанию.

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

Объект jQuery event даёт вам пару методов для того, чтобы остановить такое поведение программы:

preventDefault(): Останавливает выполнение действий по умолчанию
stopPropagation(): Останавливает «всплытие» события к родительскому элементу

Следующий пример открывает ссылку в новом окне, когда на неё нажимают, и использует метод preventDefault() чтобы остановить открытие ссылки в текущем окне:

01<!DOCTYPE html>
02<html xmlns="http://www.w3.org/1999/xhtml">
03<head>
04<script type="text/javascript" src="jquery.js"></script>
05<script type="text/javascript">
06 
07$( init );
08 
09function init() {
10  $('#myLink').bind( 'click', openInWindow );
11}
12 
13function openInWindow( clickEvent ) {
14  window.open( this.href, '', 'width=500,height=400' );
15  clickEvent.preventDefault();
16}
17</script>
18</head>
19<body>
20<div>
21<a id="myLink" href="http://www.example.com/">Нажми меня</a>
22</div>
23</body>
24</html>

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

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

Если вы хотите удалить обработчик события из элемента, вызовите метод unbind(). Для удаления всех обработчиков события:

`1`	`$(selector).unbind();`

Для удаления обработчика заданного события:

`1`	`$(selector).unbind( ИмяСобытия );`

Принудительная генерация события

Иногда нужно запускать события для элементов прямо из кода. Например, нужно отправить форму автоматически, когда пользователь нажмёт на ссылку.

Метод jQuery trigger() генерирует определённое событие для выбранного элемента (или элементов). Имя события нужно передать trigger() в триггер в качестве аргумента.

В примере происходит отправка формы, когда пользователь нажимает на ссылку на странице:

01<!DOCTYPE html>
02<html xmlns="http://www.w3.org/1999/xhtml">
03<head>
04<script type="text/javascript" src="jquery.js"></script>
05<script type="text/javascript">
06 
07$( init );
08 
09function init() {
10  $('#myLink').bind( 'click', sendForm );
11}
12 
13function sendForm() {
14  $('#myForm').trigger('submit');
15  return false;
16}
17</script>
18</head>
19<body>
20<form id="myForm" method="post" action="handler.php">
21<div>
22<label for="email">Адрес email:</label>
23<input type="text" name="email" />
24<a id="myLink" href="#">Отправить</a>
25</div>
26</form>
27</body>
28</html>

Вы также можете сгенерировать событие с помощью тех же коротких методов, которые использовались для привязки событий (они описаны выше в нашем уроке). Просто вызовите короткий метод без каких-либо аргументов. Например:

1$('#myLink').click();   // Генерирует событие click для элемента #myLink
2$('#myForm').submit();  // Генерирует событие submit для элемента #myForm

Резюме

В данном уроке мы рассмотрели, как работать с событиями в jQuery:

Что такое событие?
Работа с событиями
Простой обработчик события
Короткие методы для связывания общих событий
Доступ к элементам из обработчика события
Получение дополнительной информации о событии
Остановка действий по умолчанию и распространение событий
Сброс обработчика события
Принудительная генерация события

События являются очень мощным и полезным инструментом, а в jQuery многое сделано для того, чтобы облегчить работу с ними.

web-development.ucoz.ru