Статьи

Метод триггера JQuery: создание пользовательских событий в jQuery

Ноябрь 24, 2018

В моей предыдущей статье « Как создавать собственные события в JavaScript» мы обсуждали преимущества пользовательских событий и собственного объекта CustomEvent. Напомним, мы можем запускать наши собственные именованные события. Страница demonstation предоставляла форму, которая запускала событие «newMessage» всякий раз, когда было отправлено верное сообщение. Любое количество обработчиков может подписаться на это событие для выполнения своих собственных действий.

Наша единственная проблема: CustomEvent в настоящее время не поддерживается в Safari или Internet Explorer.

Существуют способы решения проблемы совместимости браузера. Одним из решений является написание собственных функций инкапсуляции событий, которые реализуют пользовательские функции событий. К счастью, в этом нет необходимости: пользовательские события поддерживаются в нескольких библиотеках JavaScript, включая jQuery .

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


$.event.trigger({
	type: "newMessage",
	message: "Hello World!",
	time: new Date()
});

Теперь обработчики могут подписаться на события «newMessage», например 

 
$(document).on("newMessage", newMessageHandler);

Демонстрационная страница

Этот пример демонстрирует код jQuery:

Просмотрите демонстрационную страницу пользовательских событий jQuery

Стандартный обработчик событий ищет представления в форме HTML. Функция получает текущее сообщение и, если оно действительно, отправляет новое событие «newMessage». 

 
$("#msgbox").on("submit", SendMessage);

// new message: raise newMessage event
function SendMessage(e) {

	e.preventDefault();
	var msg = $("#msg").val().trim();
	if (msg) {
		$.event.trigger({
			type: "newMessage",
			message: msg,
			time: new Date()
		});
	}

}

Теперь обработчики могут подписаться на события «newMessage». События генерируются только при наличии действительного сообщения: 

 
// newMessage event subscribers
$(document).on("newMessage", newMessageHandler);

// newMessage event handler
function newMessageHandler(e) {
	LogEvent(
		"Event subscriber on "+e.currentTarget.nodeName+", "
		+e.time.toLocaleString()+": "+e.message
	);
}

Само сообщение может быть извлечено из свойства сообщения объекта события.

Совместимость браузера

Методы jQuery 1.x запускаются в любом браузере, включая Internet Explorer 6.0 и выше. Очевидно, что это огромный бонус, даже если код работает (незаметно) медленнее, чем собственные CustomEvents. Однако следует помнить, что jQuery 2.0, выпуск которого запланирован на 2013 год, не будет поддерживать IE6, 7 и 8 .

jQuery популярен, но пользовательские события поддерживаются в большинстве библиотек JavaScript, включая Prototype , Mootools и YUI .

И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как jQuery: от новичка до ниндзя: новые уловки и хитрости .

Комментарии к этой статье закрыты. У вас есть вопрос о jQuery? Почему бы не спросить об этом на наших форумах ?

37
Share: