Leccion 02 Eventos

Eventos JQUERY son utiizados por elementos que pueden ser llamados por cualquier forma como lo vimos en la Leccion 01 aqui los llamaremos de la forma mas comun por su Id del elemento !!!

Existen distintas funciones para asignar una función que maneje un evento lanzado por un elemento. 

Para el evento click, al hacer clic sobre un elemento:

1. $("#idDelBoton").click(function () {  
2.   alert("Has hecho clic");  
3. }); 

evento submit, cuando se pulsa sobre el botón de enviar de un formulario:

1. $("#idDelFormulario").submit(function() {  
2.   alert("Enviando");  
3. });  

evento dblclick, al hacer doble clic sobre un elemento:

1. jQuery("#idDelElemento").dblclick(function () {  
2.   alert("Has hecho doble clic");  
3. });  

evento hover, cuando al pasar el ratón por encima de un elemento. Podemos utilizarjQuery(this) para referirnos a este elemento:

1. $("#idDelElemento").hover(function () {  
2.   $(this).css("border", "1px solid red");  
3. });  

evento mouseenter, cuando el cursor entra en un elemento

1. $("#idDelElemento").mouseenter(function () {  
2.   $(this).css("border", "1px solid red");  
3. });  

evento mouseout, cuando el cursor sale de un elemento

1. $("#idDelElemento").mouseout(function () {  
2.   $(this).css("border", "0");  
3. });  

evento change, cuando se modifica un elemento:

1. $("#idDelElemento").change(function () {  
2.   alert("Cambiado");  
3. });  

evento load, cuando se termina de cargar el elemento:

1. $(window).load(function () {  
2.   alert("Página cargada");  
3. });  

evento ready, cuando se termina de cargar el DOM, para no tener que esperar a cargar las imágenes, por ejemplo, de forma que el usuario pueda utilizar nuestra funcionalidad JavaScript cuanto antes:

1. $(document).ready(function () {  
2.   alert("DOM cargado");  
3. });  

esto último, al ser esto algo muy común, se puede resumir pasando una función a la función jQuery, directamente:

1. jQuery(function () {  
2.   alert("DOM cargado");  
3. });