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.

Lista de eventos
Lista de eventos mas comunes

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

Previous Estándares de programación
Next Adiós Wi-Fi, llega la tecnología Li-Fi y la trae un mexicano

No Comment

Leave a reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *