jQuery метод .trigger()
jQuery событияОпределение и применение
jQuery метод .trigger() позволяет выполнить все функции обработчики событий, присоединенные у выбранного элемента для данного типа события.
Обращаю Ваше внимание, что метод .triggerHandler() похож на метод trigger(), за исключением того, что:
- Метод .triggerHandler( "событие" ), вызванный по указанному типу событий не будет вызывать .событие() на элементе. Например, .triggerHandler( "submit" ), вызванный на элементе формы не будет вызывать событие .submit() (отправка формы) на этом элементе. Учтите, что при использовании метода .triggerHandler() действия браузера по умолчанию не будут выполняться.
- Метод .trigger() будет вызван на каждом совпавшем элементе коллекции jQuery, а метод .triggerHandler() будет вызван только на первом совпавшем элементе.
- События заданные методом .triggerHandler() в отличии от метода .trigger() не всплывают по дереву DOM, а это означает, что обработчики делигированных событий не будут вызваны.
- Метод .triggerHandler() возвращает значение, которое было возвращено последним обработчиком, который он вызвал для выполнения. Если ни один обработчик не был запущен, то возвращается значение undefined.
Обратите внимание на то, что при вызове события методом .trigger(), активация события не полностью имитируется, например, при срабатывании такого события как "click" переход по ссылке произведен не будет, как это было бы произведено по естественным причинам.
jQuery синтаксис:
Синтаксис 1.2: $( selector ).trigger( eventType, extraParameters ) eventType - String extraParameters - Array или PlainObject // необязательный параметр Синтаксис 1.3: $( selector ).trigger( event, extraParameters ) event - jQuery.Event Object extraParameters - Array или PlainObject // необязательный параметр
Добавлен в версии jQuery
1.0 (синтаксис расширен в версии 1.3)Значения параметров
| Параметр | Описание |
|---|---|
| eventType | Строковое значение, которое соответствует одному типу событий (опционально допускается указывать пространство имен). Например: "click" или "dblclick.myNamespace" |
| extraParameters | Дополнительные параметры для передачи обработчику событий. |
| event | Объект события jQuery.Event. jQuery скрывает различия реализации между браузерами, определяя свой собственный объект события. Большинство свойств исходного события копируются и нормализуются в новый объект события. |
Пример использования
<!DOCTYPE html> <html> <head> <title>Использование jQuery метода .trigger()</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>.
Результат нашего примера:
Следующий пример демонстрирует как с помощью метода .trigger() передать произвольные данные через объект события:
<!DOCTYPE html> <html> <head> <title>Использование jQuery метода .trigger() (передача дополнительных данных)</title> <script> $( document ).ready(function(){ var secretKey = function(){ // инициализируем переменную, содержащую функцию return Math.random() // возвращаем случайное значение от 0 до 1 }; // устанавливаем обработчики пользовательских событий "login" и "logoff" и передаем объект, содержащий данные, которые будут переданы в обработчик событий $( "body" ).on( "login", {"secretkey": secretKey()}, function( event, param1, param2 ) { console.log( "log in - ", param1, param2, event.data.secretkey); // выводим в консоль значения дополнительных параметров и значение свойства secretkey, переданное в объект данных (свойство Event.data) }) $( "body" ).on( "logoff", {"secretkey": secretKey()}, function( event ) { console.log( "log off - ", event.user, event.pass, event.data.secretkey); // выводим в консоль значения свойств объекта Event и значение свойства secretkey, переданное в объект данных (свойство Event.data) }) // выполняем все функции обработчики событий, присоединенные у выбранного элемента <body> для типа событий "login" и "logoff" $( "body" ).trigger( "login", [ "vasya", "utkin" ]); // передаем данные обработчику событий (доступны в качестве дополнительных аргументов) $( "body" ).trigger({ // передаем данные в объект события jQuery type: "logoff", user: "vasya", pass: "utkin" }); }); </script> </head> <body> </body> </html>
В этом примере мы инициализировали переменную, которая содержит функцию, которая при вызове возвращает случайное число от 0 до 1. С помощью метода .on() для элемента <body> установили обработчики пользовательских событий "login" и "logoff". В качестве второго параметра метода передали объект, содержащий данные, которые будут переданы в обработчик событий при его срабатывании (свойство объекта Event - event.data). Обратите внимание, что в качестве значения свойства нашего объекта будет использован результат вызова функции, содержащайся в созданной нами переменной.
Для события "login" мы передаем функции, которая будет выполнена каждый раз, когда событие срабатывает в качестве параметров, объект Event и два дополнительных параметра, значения которых она получит при вызове метода trigger() для данного типа событий. Функция выводит в консоль значения дополнительных параметров и значение свойства secretkey, переданное в объект данных (свойство объекта Event - event.data).
Для события "logoff" мы передаем функции, которая будет выполнена каждый раз, когда событие срабатывает в качестве параметра объект Event. Функция выводит в консоль значения свойств объекта Event, включая пользовательские свойства, которые мы передаем в объект при вызове метода trigger() для данного типа событий и значение свойства secretkey, переданное в объект данных (свойство объекта Event - event.data).
Для того, чтобы выполнить все функции обработчики событий, присоединенные у выбранного элемента <body> для типа событий "login" и "logoff" мы используем jQuery метод trigger(). В первом случае мы указываем в качестве первого параметра метода trigger() строковое значение, которое соответствует типу событий "login" и передаем массив данных. Обратите внимание, что данные содержащиеся под нулевым индексом в массиве будут соответствовать первому дополнительному параметру в обработчике этого события.
Во втором случае мы указываем в качестве параметра метода trigger() объект данных, содержащий пары ключ-значение, который мы передадим в объект события jQuery (Event). Обратите внимание, что свойство type этого объекта должно соответствовать событию, которое мы хотим инициировать, иначе обработчик события вызван не будет.
Результат нашего примера:
