.trigger()

.trigger( eventType [, extraParameters ] )Возвращает: jQuery

Описание: Выполняет все обработчики и действия, привязанные к выбранным элементам для заданного типа события.

версия добавлена: 1.0.trigger( eventType [, extraParameters ] )
- eventType
  
  Тип: Строка
  
  Строка, содержащая тип события JavaScript, например click или submit.
- extraParameters
  
  Тип: Массив или Объект
  
  Дополнительные параметры, передаваемые обработчику события.
версия добавлена: 1.3.trigger( event [, extraParameters ] )
- event
  
  Тип: Event
  
  Объект события jQuery.Event.
- extraParameters
  
  Тип: Массив или Объект
  
  Дополнительные параметры, передаваемые обработчику события.

Любые обработчики событий, привязанные с помощью .on() или одного из его сокращённых методов, срабатывают при возникновении соответствующего события. Однако их можно вызвать вручную с помощью метода .trigger(). Вызов метода .trigger() выполняет обработчики в том же порядке, в котором они выполнялись бы, если бы событие было вызвано пользователем естественным образом:

$( "#foo" ).on( "click", function() {
  alert( $( this ).text() );
});
$( "#foo" ).trigger( "click" );

Начиная с jQuery 1.3, .trigger() события поднимаются по дереву DOM; обработчик события может остановить поднятие, вернув false из обработчика или вызвав метод .stopPropagation() в объекте события, переданном обработчику. Несмотря на то, что .trigger() имитирует активацию события, включая сгенерированный объект события, он не полностью воспроизводит естественно возникающее событие.

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

Когда мы определяем тип пользовательского события с помощью метода .on(), второй аргумент метода .trigger() может оказаться полезным. Например, предположим, что мы привязали обработчик события custom к нашему элементу вместо встроенного события click:

$( "#foo" ).on( "custom", function( event, param1, param2 ) {
  alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );

Объект события всегда передаётся как первый параметр обработчику события. В вызов .trigger() также можно передать массив аргументов, и эти параметры будут переданы обработчику после объекта события. Начиная с jQuery 1.6.2, одиночный строковый или числовой аргумент можно передавать без обертывания в массив.

Обратите внимание на различие между дополнительными параметрами, переданными здесь, и параметром eventData метода .on(). Оба являются механизмами передачи информации обработчику события, но аргумент extraParameters метода .trigger() позволяет определить информацию в момент срабатывания события, в то время как аргумент eventData метода .on() требует, чтобы информация была уже вычислена в момент привязки обработчика.

Метод .trigger() может использоваться с коллекциями jQuery, которые оборачивают обычные объекты JavaScript, аналогично механизму публикации/подписки; любые обработчики событий, привязанные к объекту, будут вызваны при срабатывании события.

Примечание: Для обычных объектов и объектов DOM, кроме window, если имя срабатывающего события совпадает с именем свойства в объекте, jQuery попытается вызвать свойство как метод, если ни один обработчик событий не вызовет event.preventDefault(). Если это поведение нежелательно, используйте .triggerHandler() вместо этого.

Примечание: Как и с .triggerHandler(), при вызове .trigger() с именем события, совпадающим с именем свойства в объекте, с префиксом on (например, вызывая click на window, у которого есть метод onclick), jQuery попытается вызвать это свойство как метод.

Примечание: При запуске с обычным объектом, который не является массивоподобным, но всё же содержит свойство length, вы должны передать объект в массиве (например, [ { length: 1 } ]).

Примеры:

Нажатия на кнопку #2 также запускают клик для кнопки #1.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>trigger demo</title>
  <style>
  button {
    margin: 10px;
  }
  div {
    color: blue;
    font-weight: bold;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button>Button #1</button>
<button>Button #2</button>
<div><span>0</span> button #1 clicks.</div>
<div><span>0</span> button #2 clicks.</div>
 
<script>
$( "button" ).first().on( "click", function() {
  update( $( "span" ).first() );
} );
 
$( "button" ).last().on( "click", function() {
  $( "button" ).first().trigger( "click" );
  update( $( "span" ).last() );
} );
 
function update( j ) {
  var n = parseInt( j.text(), 10 );
  j.text( n + 1 );
}
</script>
 
</body>
</html>

Демо:

Чтобы отправить первую форму без использования функции submit(), попробуйте:

$( "form" ).first().trigger( "submit" );

Чтобы отправить первую форму без использования функции submit(), попробуйте:

var event = jQuery.Event( "submit" );
$( "form" ).first().trigger( event );
if ( event.isDefaultPrevented() ) {
  // Perform an action...
}

Чтобы передать произвольные данные событию:

$( "p" )
  .on( "click", function( event, a, b ) {
    // When a normal click fires, a and b are undefined
    // for a trigger like below a refers to "foo" and b refers to "bar"
  } )
  .trigger( "click", [ "foo", "bar" ] );

Чтобы передать произвольные данные через объект события:

var event = jQuery.Event( "logged" );
event.user = "foo";
event.pass = "bar";
$( "body" ).trigger( event );

Альтернативный способ передачи данных через объект события:

$( "body" ).trigger({
  type:"logged",
  user:"foo",
  pass:"bar"
});

.trigger( eventType [, extraParameters ] )Возвращает: jQuery

версия добавлена: 1.0.trigger( eventType [, extraParameters ] )

версия добавлена: 1.3.trigger( event [, extraParameters ] )

Примеры:

Демо: