Главная страница   /   9.3. Вызов обработчиков событий вручную (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

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

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

Таблица 9-5: Методы для вызова обработчиков событий вручную
Метод Описание
trigger(eventType) Запускает функцию обработки событий для указанных типов событий для всех элементов в объекте jQuery
trigger(Event) Запускает функцию обработки событий для указанного события для всех элементов в объекте jQuery
triggerHandler(eventType) Запускает функцию обработки событий для первого элемента в объекте jQuery без выполнения действия по умолчанию и баблинга события

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

Листинг 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.

Листинг 9-16: Запуск обработчиков событий вручную с использованием объекта Event
<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 нельзя использовать цепочкой.

Листинг 9-17: Использование метода 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