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

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

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);
      }
   });
}