jQuery метод .triggerHandler()

jQuery события

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

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

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

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></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 события