Creación de eventos en JQuery !!

Posted on Actualizado enn


Hola, el día de hoy vamos a mirar podemos agregar eventos a elementos del DOM por medio de JQuery, la asignación de eventos a los elementos del DOM es una de las tareas mas comunes cuando estamos desarrollando aplicaciones Web, más exactamente con JQuery.
Sin embargo, así como podemos crear y asociar eventos a elementos del DOM, tambien es posible eliminarlos, en este post solo vamos a revisar como podemos crear los eventos, en el próximo veremos como podemos eliminarlos. Para crear y asignar un evento a un elemento del DOM, disponemos de cuatro posiblidades generales:

  1. Asignación directa del evento: Se realiza la asignación de un evento a cierto elemento del DOM de manera directa, la sintaxis general para asignar eventos es: $(“selector”).evento(function(){}). Ahora vamos a explicar como funciona, primero y como todo en JQuery, especificas el selector (elemento con el cual vamos a trabajar), luego en evento se debe especificar el tipo de evento/acción (click, mouseenter, etc) y por último la función a ejecutar. El siguiente código muestra como podemos añadir el evento click a un boton el cual tiene definido el id btn1 para mostrar un mensaje.
        $(function () {
            $("#btn1").click(function () {
                alert("Evento click añadido con JQUERY !");
            });
        })
  2. Eventos simples con bind: Al igual que con la asignación directa de eventos, con bind podemos relacionar un evento a un elemento, la sintaxis general es: $(“selector”).bind(“evento”, function(){}). A diferencia del punto anterior, con bind, en los argumentos se especifíca el tipo de acción/evento y la función a realizar, tomando el mismo ejemplo del punto anterior tendriamos:
        $(function () {
            $("#btn1").bind("click",function () {
                alert("Evento click añadido con JQUERY !");
            });
        })
  3. Eventos múltiples con bind: Una de la grandes de ventajas al utilizar bind para relacione eventos a los elementos, es que con bind podemos asignar múltiples eventos a los elementos dentro del mismo bloque de código, esto hará nuestro código más limpio y fácil de entender. La sintaxis general es:
    $(“selector”).bind({
    evento1: function(){},
    evento2: function(){}
    })
    y como funciona? primero definimos el selector, luego usamos el método bind, y a diferencia de la asignación simple con bind, aca usamos los corchetes para contener el bloque de código, paradefinir cada evento, primero especificamos el nombre de la acción/evento, luego dos puntos y posteriormente la función que se debe ejecutar, separamos con una coma (,) y definimos el siguiente evento y función, cuando se define el último evento asociado al elemento, de debe omitir el escribir la coma. Para complementar el ejemplo del click, en el botón, vamos a volver a mostrar un mensaje cuando se haga click sobre el botón, pero ahora adicionalmente, cuando el mouse entre sobre el botón el fondo de este verde, y al salir el mouse sera amarrillo. Así que el código JQuery resultante sería:

            $(function () {
                $("#btn1").bind({
                    click: function () {
                        alert("Evento click !");
                    },
                    mouseenter: function () {
                        $(this).css("background-color", "green");
                    },
                    mouseleave: function () {
                        $(this).css("background-color", "yellow");
                    }
                });
            })
  4. Eventos a elementos nuevos: Si bien hemos visto como crear eventos para los elementos del DOM, los tres putos anteriores definen los eventos sobre los elementos ya creados en el DOM, es decir, si se crease un nuevo elemento, este no tendría los eventos definidos con bind o algú evento directo asociado. Para poder definir eventos a elementos que se crean en tiempo de ejecución de una aplicación usamos live, live tiene tres características generales:
    • Asigna eventos a elementos ya creados
    • Asigna eventos a elementos nuevos
    • Asignación de eventos simple

    La sintaxis general de live es: $(“selector”) .live(“evento”, function(){})

Hemos revisado como podemos añadir eventos a los elementos previamente creados como a elementos nuevos,  en el próximo post revisaremos como podemos eliminar eventos.
Como siempre les dejo el código con un ejemplo  !
Link al ejemplo !!

2 comentarios sobre “Creación de eventos en JQuery !!

    […] post sobre JQuery vimos como asignar eventos a los elementos del DOM y algunos eventos especiales (post1, post2), hoy vamos a ver como eliminar los eventos asociados a un […]

    […] Cuando se carga la página, solo se carga el HTML, por lo tanto si se tiene código JavaScript este no estará disponible, para solucionar este caso en la página  que realiza el llamado se debe definir el código necesario, para este caso no es posible hacerlo de la manera tradicional como se atacha un manejador de evento a un elemento, se debe hacer uso de la función live que permite asignar manejadores de eventos a elementos que se crean luego de la carga del DOM, les dejó un link donde hablé del tema: jQuery live. […]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s