Eventos personalizados con jQuery

Los eventos nos proporcionan una forma de ser notificados de algo que sucede en nuestro código, así por ejemplo cuando un usuario haga clic en un elemento, podemos ejecutar alguna acción. A eso nos referiremos con el evento clic.

$('#miElemento').on('click', function(){
    console.log('Me han hecho clic');
});

Eventos personalizados / custom events

Pero si queremos que el evento se ejecute en ciertas circunstancias? Por ejemplo podríamos tener un input que al ser modificado, levantara un evento “cambio” de un bloque div.

$('#bloqueReceptor').on('cambio', function(event, resultado){ // Agregamos el evento al div que escuchará
    console.log('Algo ha cambiado en el input, el nuevo valor es: ' + resultado.valor);
});

$('input').on('change', function(ev){
    $('#bloqueReceptor').trigger('cambio', { // Lanzamos el evento y pasamos un objeto como parametro (puede ser tambien un array).
        valor: ev.target.value
    });
});

Al hacer un cambio de valor en el input, se ejecutará nuestra función que lanzará el evento cambio en “bloqueReceptor” pasando un parametro llamado “valor”. Fácil verdad?

Trigger vs TriggerHandler

jQuery nos proporciona dos formas de llamar a eventos, trigger y triggerHandler, pero entre ellos dos disponemos de alguna diferencia.

Veamos… (extraído de la documentación de jQuery y traducido al castellano).

  • La función triggerHandler() no ejecuta el evento predeterminado del elemento (por ejemplo en el caso de un formulario, triggerHandler no enviaría el formulario).
  • Mientras trigger() se ejecutará en todos los elementos devueltos por el objeto jQuery, triggerHandler() solo afecta al primer elemento encontrado.
  • Los eventos creados con triggerHandler() no se propagan por la jerarquía DOM; si no son manejados por el elemento destinatario directamente, no hacen nada.
  • A diferencia de trigger(), triggerHandler() no devolverá un objeto jQuery si no el valor que haya devuelto el último elemento que lo ha hecho ejecutar. Si ningún controlador lo desencadena, devuelve undefined.
Corre la voz!

Comentarios

  1. ()

    Muchas gracias amigo me sirvio de mucho tu articulo...

  2. ()

    Hola , puedes darme un ejemplo de como se puede obtener el parametro pasado junto al evento en el trigger

  3. ()

    He actualizado el artículo ya que jquery ha cambiado y he puesto el ejemplo que pides.

  4. ()

    Hola, ¿Podría ser esto aplicable a elementos del tipo select (listas) cuando estas son dependientes? Me explico, cuando tenemos dependencia de un elemento hacia otros en niveles como por ejemplo de abuelo a padre y de padre a nieto. Lo que sucede es que tengo un código que carga una lista en el elemento select cuando detecta que su padre ha cambiado, pero si por ejemplo cambiamos al abuelo solo cambia padre pero al cambiar padre no cambia nieto. Se tendría que tener código repetido para estos casos lo cual es impráctico. Saludos.


Escribir un comentario

Escribe lo que desees, si quieres incluir código hazlo usando los tags <pre>

Nombre:
Email:
Website: