informaticaPC

Tutorial de JQuery

Uso de eventos


Regístrate

Tus datos no serán compartidos, solo nosotros te enviaremos información y novedades

Definiendo Eventos

JQuery nos proporciona un gran control sobre los diferentes tipos de eventos, facilitándonos enormemente el asignarlos, manejarlos y eliminarlos.

Para asignar y eliminar eventos se utilizarán preferiblemente los métodos on() y off() respectivamente, aunque como veremos un poco más adelante disponemos de otros métodos que son en realidad shortcuts o atajos de ellos.

En versiones de JQuery anteriores a la 1.7 se utilizaban los métodos bind() y unbind().

A continuación veamos un ejemplo (fíjate en las diferentes formas de definir las funciones cuando se utiliza on(), ya que es posible no indicar parámetros o bien pasarle el propio evento e incluso datos):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | eventos en JQuery I</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow; }
    </style>

    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {

            // Definiendo el evento 'click'
            $("#boton1").on("click",function(){
               alert("Hiciste clic en 'boton1'");
            });

            // Pasando el evento a la función (el 'alert' muestra la posición del
            // cursor respecto del área VISIBLE del documento)
            $("#boton2").on("click",function(event){
               alert("se produjo un evento [" + event.type + "] en 'boton2'" );
            });

            // Pasando datos a través del evento
            $("#boton3").on("click", {mensaje:"hola"}, function(event){
               alert("Hiciste clic en 'boton3' -> [" + event.data.mensaje + "]" );
            });

            // Ahora usamos el método 'click()' en lugar utilizar 'on()' para asignar
            // el evento, y 'off()' para eliminarlo de 'boton2'
            $("#boton4").click(function() {
               $("#boton2").off("click");
            });

        });

    </script>
  </head>

  <body>

      <input type="button" id="boton1" value="'boton1' : haz click" />
      <input type="button" id="boton2" value="'boton2' : haz click" /><br />
      <input type="button" id="boton3" value="'boton3' : haz click" /><br />
      <input type="button" id="boton4" value="'Desactivar evento de 'boton2'" />

  </body>

</html>

Ejemplo

Más información

Vea también: [ Manejadores de Eventos ] - [ on() ] - [ off() ]

El objeto Event

Como has podido comprobar en el ejemplo anterior, es posible pasar el propio evento como parámetro de la función que se debe procesar al producirse éste.

Dicho evento es realmente un objeto con propiedades y métodos a los que podemos acceder para obtener información y realizar determinadas acciones.

  • pageX / pageY: posición del cursor con respecto a la esquina superior izquierda del documento.
  • clientX / clientY: posición del cursor con respecto a la esquina superior izquierda del área visible del documento.
  • data: datos enviados a través del evento (consulta el ejemplo del punto anterior).
  • preventDefault(): impide que se realice la acción por defecto del elemento (si por ejemplo se utiliza en un botón de tipo 'submit' se impediría que se envíe el formulario).
  • stopPropagation(): impide que el evento se propague por el DOM hacia los elementos padre de aquel en que se produjo.
  • target: el elemento en el que se produjo el evento.
  • type: el tipo de evento que se produjo.
  • which: contiene información sobre la tecla o botón que lo produjo.

Consulta el enlace facilitado a continuación para más información.

Veamos ahora un pequeño ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | Objeto Event en JQuery II</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow; }
        #log { color:yellow;background-color:red;margin-bottom:10px; }
    </style>

    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {

            // Se muestran las coordenadas en las que se hizo clic
            $("#boton1").on("click",function(event){
               $("#log").text("X: [" + event.pageX + "] / Y: " + event.pageY + "]");
            });

            // Muestra el 'id' del elemento en el que se hizo clic
            $("#boton2").on("click",function(event){
               $("#log").text("id: " + event.target.id);
            });

            // Información sobre el botón con el que se hizo clic
            $("#boton3").on("click", function(event){
               $("#log").text("Botón: [" + event.which + "]");
            });

            // Impedimos que se realice la acción por defecto del enlace
            $("#enlace").on("click", function(event){
               event.preventDefault();
               $("#log").text("Observa que no se cargará la URL del enlace");
            });

        });

    </script>
  </head>

  <body>

      <div id="log"> </div>

      <input type="button" id="boton1" value="Haz clic en diferentes posiciones de este botón" />
      <input type="button" id="boton2" value="Haz clic" /><br />
      <input type="button" id="boton3" value="Haz clic con los botones izquierdo y central" /><p />

      <a id="e" href="http://informaticapc.com/">Haz clic en este enlace</a>

  </body>

</html>

Ejemplo

Más información

Vea también: [ Objeto Event ]

Primera página Página anterior Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso