Ejemplo de jquery .trigger ()

.trigger (eventType [, extraParameters ] )Devoluciones: jQuery

Descripción: Ejecute todos los controladores y comportamientos adjuntos a los elementos coincidentes para el tipo de evento dado.

• versión agregada: 1.0.trigger (eventType [, extraParameters ] )

  • tipo de evento Tipo: Cadena Una cadena que contiene un tipo de evento de JavaScript, como click o submit.
  • extraParameters Tipo: Array o PlainObject Parámetros adicionales para pasar al controlador de eventos.

• versión agregada: 1.3.acontecimiento desencadenante [, extraParameters ] )

  • evento Tipo: Evento A jQuery.Event objeto.
  • extraParameters Tipo: Array o PlainObject Parámetros adicionales para pasar al controlador de eventos.

Cualquier controlador de eventos adjunto con .on() o uno de sus métodos abreviados se activa cuando ocurre el evento correspondiente. Se pueden disparar manualmente, sin embargo, con el .trigger() método. Una llamada a .trigger() ejecuta los controladores en el mismo orden en que lo estarían si el evento fuera activado naturalmente por el usuario:

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

A partir de jQuery 1.3, .trigger()los eventos ed aparecen en el árbol DOM; un controlador de eventos puede detener el burbujeo devolviendo false del manejador o llamando al .stopPropagation() método en el objeto de evento pasado al evento. A pesar de que .trigger() simula la activación de un evento, completo con un objeto de evento sintetizado, no replica perfectamente un evento que ocurre naturalmente.

Para activar controladores enlazados a través de jQuery sin activar también el evento nativo, use .triggerHandler() en lugar de.

Cuando definimos un tipo de evento personalizado usando el .on() método, el segundo argumento para .trigger() puede resultar útil. Por ejemplo, suponga que hemos vinculado un controlador para el custom evento a nuestro elemento en lugar de la incorporada click evento como lo hicimos anteriormente:

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

El objeto de evento siempre se pasa como primer parámetro a un controlador de eventos. También se puede pasar una matriz de argumentos a la llamada .trigger (), y estos parámetros se pasarán al controlador además del objeto de evento. A partir de jQuery 1.6.2, se puede pasar una sola cadena o un argumento numérico sin estar envuelto en una matriz.

Tenga en cuenta la diferencia entre los parámetros adicionales que se pasan aquí y los eventData parámetro al método .on (). Ambos son mecanismos para pasar información a un controlador de eventos, pero el extraParameters argumento para .trigger() permite determinar la información en el momento en que se desencadena el evento, mientras que eventData argumento para .on() requiere que la información ya esté calculada en el momento en que se enlaza el controlador.

los .trigger() El método se puede utilizar en colecciones jQuery que envuelven objetos JavaScript simples de forma similar a un mecanismo pub / sub; cualquier controlador de eventos vinculado al objeto se llamará cuando se active el evento.

Nota: Tanto para objetos simples como para objetos DOM que no sean window, si el nombre de un evento desencadenado coincide con el nombre de una propiedad en el objeto, jQuery intentará invocar la propiedad como un método si ningún controlador de eventos llama event.preventDefault(). Si no desea este comportamiento, utilice .triggerHandler() en lugar de. Nota: Al igual que con .triggerHandler(), al llamar .trigger() con un nombre de evento coincide con el nombre de una propiedad en el objeto, con el prefijo on (por ejemplo, desencadenando click sobre window que tiene un no nulo onclick método), jQuery intentará invocar esa propiedad como método. Nota: Cuando se dispara con un objeto simple que no es similar a una matriz pero que aún contiene un length propiedad, debe pasar el objeto en una matriz (por ejemplo, [ { length: 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.5.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().click(function() {
  update( $( "span" ).first() );
});
 
$( "button" ).last().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>

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

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

$( "p" )
  .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"
});