Eventos en jQuery: Manejo de eventos avanzado

Aunque puedas aprovechar las ventajas de los métodos de eventos y conceptos explicado hasta ahora, siempre se puede ir más allá. Para sacar todavía más partido a los eventos de jQuery, voy a explicar como funciona la función on() que permite un manejo de eventos avanzado.

A diferencia de métodos específicos para cada evento como click(), el método on() es mucho más flexible ya que no sólo se le pasa el evento y la función que se ejecute para responder al evento, sino también se le puede pasar datos adicionales. Dichos datos permiten a los elementos y eventos, pasar diferente información a la misma función, es decir, la misma función puede actuar de una manera u otra según el evento que se dispare.

Antes de seguir profundizando con el manejo de eventos avanzado, debes saber que jQuery evoluciona constantemente y es posible que veas que funciones como bind(), live() y delegate() actúen de la misma manera que on(). Esto se debe a que todas esas funciones fueron remplazadas.

Ahora veamos un ejemplo de uso básico

$('#selector').on('click', selector, Data, nombreFuncion);

1	$('#selector').on('click', selector, Data, nombreFuncion);

El primer argumento es un string con el nombre del evento. El segundo es opcional y es para un selector como div, .clase o #popup. Esto hará que se aplique el evento a un elemento diferente que esté dentro del evento seleccionado. Esto se conoce como delegación de evento y hablaré de ello en otro post. El tercer argumento son los datos que quieres pasarle a la función. Tiene que ser un objeto literal o una variable que contenga dicho objeto. Si no recuerdas lo que es un objeto literal este es un breve ejemplo

{
   dato1: valor1,
   dato2: valor2
}

/*Y en caso de almacenarlo en una variable*/

var datos = {mensaje:"Hola mundo"};

{

dato1: valor1,

dato2: valor2

}

/*Y en caso de almacenarlo en una variable*/

var datos = {mensaje:"Hola mundo"};

Usando la misma función para diferentes eventos

Supongamos que vamos a mostrar un mensaje y que su contenido sea diferente según el evento que se dispare. Comenzamos creando 2 objeto literales, cada uno con un mensaje diferente. Luego creamos la función que mostrará el mensaje y finalmente empleamos el método on().

var mensajeEnlace = { mensaje:'Hola, soy un enlace'}; 
var mensajeParrafo = { mensaje:'Hola, soy un párrafo'}; 

function mostrarMensaje(evt) { 
    alert(evt.data.mensaje); 
} 

$('a').on('mouseover',mensajeEnlace ,mostrarMensaje); 
$('p').on('click',mensajeParrafo ,mostrarMensaje);

var mensajeEnlace = { mensaje:'Hola, soy un enlace'};

var mensajeParrafo = { mensaje:'Hola, soy un párrafo'};

function mostrarMensaje(evt) {

alert(evt.data.mensaje);

}

$('a').on('mouseover',mensajeEnlace ,mostrarMensaje);

$('p').on('click',mensajeParrafo ,mostrarMensaje);

De esta manera, estamos llamando a la misma función pero, el mensaje será diferente según el evento ya que según se dispare uno u otro le pasamos un objeto diferente. En la función mostrarMensaje() el parámetro evt es el objeto event que se encarga de recoger los atributos del objeto literal que le hemos pasado. En esta ocasión sólo había un atributo pero podríamos incorporar más y llamarlos a través del objeto event, evt.data.nombreAtributo.

Otras formas de usar on()

Hemos visto cómo usar on() pasándole un evento pero, podemos pasar varios eventos para que realicen la misma acción cuando se disparen. Además, usaremos una función anónima.

$(document).on('click keypress', function() { 
   alert("Hola");
}); // end on

$(document).on('click keypress', function() {

alert("Hola");

}); // end on

En este caso, si en la página que estemos clicamos con el ratón cualquier parte de la página o pulsemos una tecla, provocaremos un alert(). Los nombres de eventos al estar separados por espacios, le estamos diciendo a jQuery que realice la función indicada si sucede alguno de los eventos pasados en la lista.

Si se da el caso de que quieres que un mismo elemento actúe de manera diferente según el evento disparado hay 2 opciones. Una de ellas ,y la más sencilla, es usar on() 2 veces.

$('#unElemento').on('click', function() { 
  //Haz algo si clico en el evento
});

$('#unElemento').on('mouseover', function() { 
  // Haz algo si paso el ratón por encima
});

$('#unElemento').on('click', function() {

//Haz algo si clico en el evento

});

$('#unElemento').on('mouseover', function() {

// Haz algo si paso el ratón por encima

});

La otra forma sería pasándole un objeto literal, indicando en el atributo el nombre del evento y cómo valor la función anónima.

$('#unElemento').on({ 

  'click' : function() { 
    // Haz algo si clico
   },//Fin de función click

   'mouseover' : function() { 
     // Haz algo si paso el ratón por encima
   }// Fin de función mouseover 

});

$('#unElemento').on({

'click' : function() {

// Haz algo si clico

},//Fin de función click

'mouseover' : function() {

// Haz algo si paso el ratón por encima

}// Fin de función mouseover

});

Y hasta aquí el manejo de eventos avanzado en jQuery, espero que os haya gustado. Buen finde 🙂