Pro jQuery

Адам Фриман

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

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

<script type="text/javascript">
	$(document).ready(function () {
		$('img').mouseenter(function () {
			$(this).css("border", "thick solid red");
		});
	});
</script>

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

<script type="text/javascript">
	$(document).ready(function () {
		$('img').bind("mouseenter", function () {
			$(this).css("border", "thick solid red");
		});
	});
</script>

Тут все красиво и хорошо, и с этой точки зрения вам должно понравиться, как работает этот пример. Тем не менее, можно использовать сокращенные методы в качестве аналога методу trigger. Это можно сделать, вызвав метод без аргументов. В листинге 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.

<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.

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

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

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

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

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

Использование метода hover удобно при создании обработчика для событий mouseenter и mouseleave. Если в качестве аргументов вы укажете две функции, то первая будет вызвана как отклик на событие mouseenter, а вторая – на mouseleave. Если вы укажете только одну функцию, то она будет вызываться для обоих событий. В листинге 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-10 описаны сокращенные методы, которые jQuery предлагает для работы с событиями, связанными с клавиатурой.

Подписаться

или RSS канал: