Pro jQuery

Адам Фриман

Вызов обработчиков событий вручную

Можно вручную вызвать функцию обработки событий для элементов, если использовать методы, описанные в таблице 9-5.

В листинге 9-15 показано, как можно запустить обработчики событий вручную.

<script type="text/javascript">
	$(document).ready(function () {
		$('img').bind({
			mouseenter: function () {
				$(this).css("border", "thick solid red");
			},
			mouseout: function () {
				$(this).css("border", "");
			}
		});
		$("<button>Trigger</button>").appendTo("#buttonDiv").bind("click", function (e) {
			$('#row1 img').trigger("mouseenter");
			e.preventDefault();
		});
	});
</script>

В этом скрипте я использую метод bind, чтобы создать пару функций обработки событий для элементов img в документе. Затем я использую метод appendTo, чтобы вставить элемент button в документ, и метод bind, чтобы зарегистрировать функцию обработки для события click.

Когда кнопка нажата, функция обработки событий выбирает элементы img, которые являются потомками row1, и использует метод trigger, чтобы вызвать своих обработчиков для события mouseenter. Результат, показанный на рисунке 9-2, выглядит так, как будто мышкой провели по всем трем элементам img одновременно.

Рисунок 9-2: Вызов функций обработки событий вручную

Использование объекта Event

Можно использовать также объект Event, чтобы запустить обработчики событий для других элементов. Это может быть подходящим способом для использования внутри обработчика, как показано в листинге 9-16.

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

В этом примере я использую метод bind, чтобы добавить красную рамку для потомков img элемента row1, как на ответ на событие mouseenter. Тоже самое я делаю с синей рамкой для элементов row2 img, но в обработчик я добавил следующее выражение:

$('#row1 img').trigger(e);

Результатом этого добавления будет то, что когда мышка наведена на один из row2 img элементов, обработчик для того же типа событий также запускается для элементов row1 img. Результат можно увидеть на рисунке 9-3.

Рисунок 9-3: Включение обработчиков событий с использованием объекта Event

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

Использование метода triggerHandler

Метод triggerHandler вызывает функцию-обработчика, не выполняя для события действия по умолчанию и не допуская баблинга события по DOM. В отличие от метода trigger, метод triggerHandler вызывает функцию обработчика только для первого элемента в объекте jQuery. В листинге 9-17 показано использование этого метода. Другим отличием является то, что результат метода triggerHandler – это результат, возвращенный функцией-обработчиком. Это обозначает, что метод triggerHandler нельзя использовать цепочкой.

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

Результат выполнения этого скрипта можно увидеть на рисунке 9-4.

Рисунок 9-4: Использование метода triggerHandler

Подписаться

или RSS канал: