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

______

______

Previous Deployed sitios web en tu celular
Next Adobe Flash dejará de existir en 2020

No Comment

Leave a reply

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