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 decuatro 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
  5. Asigna eventos a elementos nuevos
  6. 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 !!