jQuery метод .triggerHandler()

Определение и применение

jQuery метод .triggerHandler() позволяет вызвать все функции обработчики событий, присоединенные у выбранного элемента по указанному типу событий без вызова самого события.

Обращаю Ваше внимание, что метод .triggerHandler() похож на метод .trigger(), за исключением того, что:

Метод .triggerHandler( "событие" ), вызванный по указанному типу событий не будет вызывать .событие() на элементе. Например, .triggerHandler( "submit" ), вызванный на элементе формы не будет вызывать событие .submit() (отправка формы) на этом элементе. Учтите, что при использовании метода .triggerHandler() действия браузера по умолчанию не будут выполняться.
Метод .trigger() будет вызван на каждом совпавшем элементе коллекции jQuery, а метод .triggerHandler() будет вызван только на первом совпавшем элементе.
События заданные методом .triggerHandler() не всплывают по дереву DOM, а это означает, что обработчики делигированных событий не будут вызваны.
Метод .triggerHandler() возвращает значение, которое было возвращено последним обработчиком, который он вызвал для выполнения. Если ни один обработчик не был запущен, то возвращается значение undefined.

jQuery синтаксис:

Синтаксис 1.2:
$( selector ).triggerHandler( eventType, extraParameters ) 

eventType - String 
extraParameters - Array или PlainObject // необязательный параметр

Синтаксис 1.3:
$( selector ).triggerHandler( event, extraParameters ) 

event - jQuery.Event Object
extraParameters - Array или PlainObject // необязательный параметр

Добавлен в версии jQuery

1.2 (синтаксис расширен в версии 1.3)

Значения параметров

Параметр	Описание
eventType	Строковое значение, которое соответствует одному типу событий (опционально допускается указывать пространство имен). Например: "click" или "dblclick.myNamespace"
extraParameters	Дополнительные параметры для передачи обработчику событий.
event	Объект события jQuery.Event. jQuery скрывает различия реализации между браузерами, определяя свой собственный объект события. Большинство свойств исходного события копируются и нормализуются в новый объект события.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .triggerHandler()</title>
		<style>input:focus {
	border: 3px solid green; /* сплошная граница размером 3 пикселя зеленого цвета */
}
</style>
		<script>
	$( document ).ready(function(){
	  $( "button:first" ).click(function() { // задаем функцию при нажатии на первый элемент <button> в документе
	    $( "input" ).triggerHandler( "focus" ); // вызываем все функции обработчики событий, присоединенные у выбранного элемента <input> (без вызова самого события)
	  });
	  $( "button:last" ).click(function() { // задаем функцию при нажатии на последний элемент <button> в документе
	    $( "input" ).trigger( "focus" ); // вызываем все функции обработчики событий, присоединенные у выбранного элемента <input>
	  });
	  $( "input" ).focus(function(){ // задаем функцию при получении фокуса элементом <input> 
	    $( "span" ).html( "Focus" ) // задаем содержимое выбранных элементов <span>
		       .fadeIn( 500 ) // плавно изменяем прозрачность для элементов <span> (из скрытого состояния в видимое).
		       .fadeOut( 500 ); // плавно изменяем прозрачность для элементов <span> (из видимого состояния в скрытое).
	  });
	});
		</script>
	</head>
	<body>
		<button>triggerHandler()</button>
		</button>trigger()</button>
		<input type = "text"><span style = "display:none; color:red"></span>
	</body>
</html>

В этом примере с использованием jQuery метода .focus() мы привязали JavaScript обработчик событий "focus" (получение фокуса элементом) к элементу <input>, который при срабатывании вызывает функцию, которая с помощью jQuery метода .html() задает текстовое содержимое выбранного элемента <span>, с помощью эффекта .fadeIn() плавно изменяем этому элементу прозрачность из скрытого состояния в видимое, а затем с помощью эффекта .fadeOut() опять плавно скрываем.

Кроме того, мы разместили две кнопки (элемент <button>), которым привязали JavaScript обработчик событий "click" (клик левой кнопкой мыши на элементе). При срабатывании события на первой кнопке запускается функция, которая с помощью метода .triggerHandler() вызывает все функции обработчики события "focus", присоединенные у выбранного элемента <input>. Важным здесь является то, что само событие "focus" не вызывается, то есть браузерные стили по умолчанию и созданные CSS стили для элемента, находящегося в фокусе применены к элементу <input> не будут.

При срабатывании события на второй кнопке запускается функция, которая с помощью метода .trigger() вызывает все функции обработчики события "focus", присоединенные у выбранного элемента <input>. В этом случае событие "focus" вызывается и браузерные стили по умолчанию, и созданные стили CSS для элемента, находящегося в фокусе будут применены к элементу <input>.

Результат нашего примера:

Пример использования jQuery метода .triggerHandler(). — Пример использования jQuery метода .triggerHandler()

jQuery события