Eventos personalizados en jQuery Eventos personalizados en jQuery


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

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 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

Anterior Deployed sitios web en tu celular
próximo Adobe Flash dejará de existir en 2020

Sin comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada.