Propiedades Basicas Javascript: Eventos

por **Sakura92** Sáb Abr 06, 2013 7:10 pm

TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE

#002 - Eventos

Recuerda que este tuto es parte de una serie de tutos, en la que se asume que has leído el anterior. También recuerda que se asume que manejas más o menos bien el HTML y CSS.

Los eventos son funciones de js que ejecutan una serie de acciones cuando sucede algo. Haces click y ¡puf! se abre algo. Pasas el mouse y ¡bam! saltan lucecitas de colores (?) En este tuto, aprenderemos a manejar algunos eventos básicos.

1. Ready, set, go!

Un detalle al que nos enfrentamos cuando tratamos con lenguajes de scripts es que generalmente los scripts se cargan antes de que termine de cargar toda la página -especialmente si tenemos muchas imágenes. Entonces, surge el problema de que por ahí el JavaScript llama a un elemento que todavía no fue cargado o algo por el estilo y esa parte deja de funcionar. Para evitar este problema, es usual colocar a todo nuestro js dentro de una función que llamará al total de la página y esperará a que esté cargada para ejecutar a nuestro código. Escrito en jQuery, la función sería:

$(document).ready(function () {
Aquí tu js
})

Analicémoslo un poquito: $(document) es un selector que llamará a todo el HTML, mientras que .ready() es nuestro evento. Lo que va dentro de ready es una función de js (tema a ver en un futuro) que envolverá a nuestro código.

2. Eventos para animaciones

Hay eventos que usualmente son empleados para animaciones: cuando haces click en un botón y se abre una pestaña, y cosas por el estilo. Estos son los más empleados:

Evento	Sintáxis
Clickear un elemento de id "cajita"	$('#cajita').click(function () {lo que sucederá});
Clickear dos veces un elemento de id "cajita"	$('#cajita').dblclick(function () {lo que sucederá});
Pasar el mouse sobre un elemento de id "cajita"	$('#cajita').hover(function () {lo que sucederá}); Si quieres que lo que sucede cuando empieza el hover (cuando pasas sobre el elemento) sea diferente de lo que sucede cuando termina el hover (cuando sales de encima del elemento), puedes colocarlo así: $('#cajita').hover(function () {lo que sucederá al empezar el hover}, function () {lo que sucederá al concluir el hover});
Hacer focus* sobre un elemento de id "cajita"	$('#cajita').focus(function () {lo que sucederá});

*focus es el nombre técnico de la acción de pararse en un área de escritura, por ejemplo.

Destaquemos algunos detalles que podrían pasar desapercibidos al ojo distraído:

Todas estas funciones concluyen con punto y coma. El punto y coma señala el fin del uso de un selector, por lo que por ejemplo si quieres emplear dos de estos eventos en un mismo selector (supongamos, click y hover ambos afectando a #cajita), puedes colocarlos de corrido y sin el punto y coma: $('#cajita').hover(function () {efectos}).click(function () {efectos});
Los eventos en sí son la parte destacada en negrita.
Estos no son todos los eventos de jQuery, ni por asomo. Son sólo los más usados (:
Donde dice "lo que sucederá" se refiere a los efectos que afectarán a los elementos que quieras cuando esos eventos se cumplan. ¡Aprenderemos algunas de esas cosas en el próximo tuto! (;

Espero y no haya sido demasiado liado. En el próximo tuto, veremos qué podemos hacer cuando se da un evento. Cualquier duda, consulta, etc. ¡no duden en dejar su mensaje aquí mismo! (:

<< Espera, volvamos atrás | Yey! ¡Entendí! Sigamos >>