Eventos personalizados en jQuery Eventos personalizados en jQuery

Todos los que hemos manejado javascript o jquery conocemos que son los eventos, pero si eres novato aquí te colocamos que es un evento:
Se le conoce a un evento en el mundo de la programación a cualquier acción que realiza el usuario con el sistema o en nuestro caso en el sitio web como por ejemplo los más comunes que se presentan a continuación según su respectivo lenguaje.

Su método de uso como muchos lo han de conocer es en jQuery como se muestra a continuación:

$('.btn').click(function(event){ 
event.preventDefault(); alert('Hola mundo.'); 
});

En este ejemplo estamos asignando un método click a cualquier elemento que tenga la clase btn, después detenemos el evento por defecto que tenga el elemento y finalmente mostramos un mensaje de con la leyenda “Hola mundo”.

Esto fue un poco de teoría básica del manejo de los eventos en jQuery pero y si sucediera el caso de que queremos la misma acción en otro modulo,tendríamos que copiar y pegar en otro selector diferente.
Pero y si te dijera que hay una manera de crear tus propios métodos de evento. Esto lo veremos a continuación:

Primeramente crea un html llamado index.html y no olvides incorporar la librería de jQuery a continuación de colocamos el código para agregar el js

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js’></script>

También requeriremos crear un archivo js llamado global_function.js el cual deberemos vincular con nuestro html de la siguiente manera

<script src=’js/global_function.js’></script>

Nota: Es recomendable colocar los js al final del body para acelerar la carga 

Ahora para continuar debemos colocar un método ya sea ready o $(function()) para iniciar con el script , yo para que inicie como plugin utilizare el siguiente

$(function(){ 
#aquí colocaremos nuestro código 
});

Ahora deberemos continuar con lo siguiente que es crear nuestro método de evento personalizado , lo haremos con la función de jquery “$.fn” que es una propiedad de javascript para crear funciones que afectaran a uno o mas selectores. Mi selector se llamara “mostrar_alerta”

         $(function(){
            $.fn.mostrar_alerta = function(){
                alert('Hola mundo. Esto es desde mi evento creado'); 
            }
         })
     

Ahora para llamar  a nuestro evento personalizado deberemos cambiar un poco nuestro código inicial con lo siguiente manera

$('.btn').click(function(event){ 
 event.preventDefault(); 
 //alert('Hola mundo.'); 
  $(this).mostrar_alerta();
});

Y si lo ejecutamos veremos la respuesta de nuestro nuevo mensaje en cualquier botón.

También a los eventos personalizados se les puede incorporar métodos por ejemplo AJAX para realizar una solicitud a otro archivo por ejemplo:

$('.btn').click(function(event){ 
 event.preventDefault(); 
 //alert('Hola mundo.');
  var url = 'ajax/clients/create';
  var form = $('#my-form&').serialize();
  var result = $('.mensaje&');
  $(this).request(url,form,result);
});
$.fn.request =function(url,form,result){
   $.ajax({
      type:'POST',
      url:url,
      data:form,
      success:function(respond){
       result.html(respond);
      }
   });
}

Ventajas

• Reducción de métodos repetidos
• Código mas ordenado
• Reciclar código en diferentes proyectos

Referencias de interés

Librosweb capitulo 11

Basic plugin creation

Los eventos personalizados en jquery