Главная страница   /   9.4. Использование сокращенных методов для обработки событий (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

9.4. Использование сокращенных методов для обработки событий

jQuery определяет несколько удобных методов, которые можно использовать в качестве сокращенных для регистрации обработчиков для общеиспользуемых событий. В следующих таблицах я покажу эти сокращенные методы с аргументом function. Это самый распространенный способ использования и он эквивалентен вызову метода bind; но эти методы требуют меньшего набора (по крайней мере, на мой взгляд) и очень наглядно показывают, какое событие обрабатывается. В листинге 9-18 показано, как можно использовать сокращенные методы.

Листинг 9-18: Использование сокращенного метода для обработки событий
<script type="text/javascript">
	$(document).ready(function () {
		$('img').mouseenter(function () {
			$(this).css("border", "thick solid red");
		});
	});
</script>

Это эквивалентно использованию метода bind для события mouseenter; это показано в листинге 9-19.

Листинг 9-19: Использование метода bind для события mouseenter
<script type="text/javascript">
	$(document).ready(function () {
		$('img').bind("mouseenter", function () {
			$(this).css("border", "thick solid red");
		});
	});
</script>

Тут все красиво и хорошо, и с этой точки зрения вам должно понравиться, как работает этот пример. Тем не менее, можно использовать сокращенные методы в качестве аналога методу trigger. Это можно сделать, вызвав метод без аргументов. В листинге 9-20 представлен пример.

Листинг 9-20: Использование сокращенных методов для запуска обработчиков событий
<script type="text/javascript">
	$(document).ready(function () {
		$('img').bind("mouseenter", function () {
			$(this).css("border", "thick solid red");
		});
		$("<button>Trigger</button>").appendTo("#buttonDiv").click(function (e) {
			$('img').mouseenter();
			e.preventDefault();
		});
	});
</script>

Я добавил в документ button, который при нажатии выбирает элементы img и вызывает их обработчиков для события mouseenter. Для полноты картины в листинге 9-21 показан эквивалентный функционал, написанный с использованием метода trigger.

Листинг 9-21: Использование метода trigger
<script type="text/javascript">
	$(document).ready(function () {
		$('img').bind("mouseenter", function () {
			$(this).css("border", "thick solid red");
		});
		$("<button>Trigger</button>").appendTo("#buttonDiv").click(function (e) {
			$('img').trigger("mouseenter");
			e.preventDefault();
		});
	});
</script>

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

Использование сокращенных методов для объекта document

В таблице 9-6 представлены сокращенные методы jQuery, которые применяются для объекта document.

Таблица 9-6: Сокращенные событийные методы для объекта document
Метод Описание
load(function) Соответствует событию load; запускается, когда подэлементы и ресурсы документа были загружены
ready(function) Запускается, когда элементы в документе обработаны и DOM готов к использованию
unload(function) Соответствует событию unload; запускается, когда пользователь уходит со страницы

Метод ready заслуживает особого внимания. Он не соответствует напрямую событию DOM, но он очень полезен при использовании jQuery. Вы можете посмотреть различные способы использования метода ready в главе 5, где я объяснял, как отсрочить выполнение скрипта до полной готовности DOM и как можно контролировать выполнение события ready.

Использование браузерных сокращенных методов

В таблице 9-7 описаны методы для браузера, которые обычно нацелены на объект window (хотя методы error и scroll также используются с элементами).

Таблица 9-7: Сокращенные событийные методы для браузера
Метод Описание
error(function) Соответствует событию error; запускается, когда возникает проблема с загрузкой внешних ресурсов, например, рисунков
resize(function) Соответствует событию resize; запускается, когда меняется размер окна браузера
scroll(function) Соответствует событию scroll; запускается, когда используются полосы прокрутки

Использование сокращенных методов для мышки

В таблице 9-8 представлен набор сокращенных методов, которые jQuery предоставляет для работы с событиями, связанными с мышкой.

Таблица 9-8: Сокращенные событийные методы для мышки
Метод Описание
click(function) Соответствует событию click; запускается, когда пользователь нажимает и отпускает кнопку мышки
dblclick(function) Соответствует событию dblclick; запускается, когда пользователь нажимает и отпускает кнопку мышки дважды за очень короткое время (двойной клик)
focusin(function) Соответствует событию focusin; запускается, когда элемент попадает в фокус
focusout(function) Соответствует событию focusout; запускается, когда элемент выходит из фокуса
hover(function)
hover(function, function)
Запускается, когда мышка входит в область элемента и покидает элемент. Если указана одна функция, метод используется для обоих событий
mousedown(function) Соответствует событию mousedown; запускается, когда кнопка мыши нажимает на элемент
mouseenter(function) Соответствует событию mouseenter; запускается, когда мышка входит в область экрана, занимаемую элементом
mouseleave(function) Соответствует событию mouseleave; запускается, когда мышка выходит из области экрана, занимаемой элементом
mousemove(function) Соответствует событию mousemove; запускается, когда мышка двигается по области экрана, занимаемой элементом
mouseout(function) Соответствует событию mouseout; запускается, когда мышка выходит из области экрана, занимаемой элементом
mouseover(function) Соответствует событию mouseover; запускается, когда мышка входит в область экрана, занимаемую элементом
mouseup(function) Соответствует событию mouseup; запускается, когда кнопка мышки нажата на элементе

Использование метода hover удобно при создании обработчика для событий mouseenter и mouseleave. Если в качестве аргументов вы укажете две функции, то первая будет вызвана как отклик на событие mouseenter, а вторая – на mouseleave. Если вы укажете только одну функцию, то она будет вызываться для обоих событий. В листинге 9-22 показано использование метода hover.

Листинг 9-22: Использование метода hover
<script type="text/javascript">
	$(document).ready(function () {
		$('img').hover(handleMouseEnter, handleMouseLeave);
		function handleMouseEnter(e) {
			$(this).css("border", "thick solid red");
		};
		function handleMouseLeave(e) {
			$(this).css("border", "");
		}
	});
</script>

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

В таблице 9-9 представлены сокращенные методы, которые jQuery предоставляет для работы с событиями, обычно связанными с формами.

Таблица 9-9: Сокращенные событийные методы для формы
Метод Описание
blur(function) Соответствует событию blur; запускается, когда элемент теряет фокус
change(function) Соответствует событию change; запускается, когда меняется значение элемента
focus(function) Соответствует событию focus; запускается, когда элемент получает фокус
select(function) Соответствует событию select; запускается, когда пользователь выбирает значение элемента
submit(function) Соответствует событию submit; запускается, когда пользователь отправляет форму

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

В таблице 9-10 описаны сокращенные методы, которые jQuery предлагает для работы с событиями, связанными с клавиатурой.

Таблица 9-10: Сокращенные событийные методы для клавиатуры
Метод Описание
keydown(function) Соответствует событию keydown; запускается, когда пользователь нажимает на клавишу
keypress(function) Соответствует событию keypress; запускается, когда пользователь нажимает и отпускает клавишу
keyup(function) Соответствует событию keyup; запускается, когда пользователь отпускает клавишу