Gestión de eventos
Gestión de eventos
Gestión de eventos es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 1 de 1. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 1 lecciones en total.
Introducción
Hola:
Al presentar jQuery, dijimos que no se trata solo de la manipulación del DOM, sino también de una función importante como la gestión de eventos.
Qué es un evento
Primero, aprendamos qué es un evento.
Los eventos suelen ser generados por el usuario en el navegador web.
Podemos definir muchos eventos provocados por el usuario, como tocar la pantalla en dispositivos móviles, mover el ratón, hacer clic en un botón y desplazar la página.
Como JavaScript es un lenguaje de programación, gestionaremos el flujo de nuestro programa según los eventos que se produzcan.
Clic
Método click()
Comencemos por el evento más sencillo: el evento de hacer clic en un botón.
El método click() se utiliza para gestionar nuestros eventos de clic en HTML.
Podemos escuchar el evento de clic con la sintaxis siguiente.
$(selector).click(handler);
- Con $(selector) elegimos el elemento que escucharemos.
- handler representa la función de callback que se ejecutará cuando se produzca el clic.
Hagamos un ejemplo.
<button>Button</button>
<script>
/* Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
$('button').click(function(){
alert('Button clicked');
});
})
</script>Advertencia
El método click gestiona el clic del botón mediante la función anónima que recibe como argumento.
Doble clic
Eventos del ratón
A continuación se muestran algunos eventos que el usuario puede generar con el ratón.
¡Hagamos clic en el botón!
<button>Coddy Button</button>
<script>
// runs when button is click
$("button").click(function(){
$('button').text('Clicked')
});
// runs when button is double click
$("button").dblclick(function(){
$('button').text('Double Clicked')
});
</script>Eventos del ratón
Tenga en cuenta que algunos eventos no se pueden probar en la aplicación móvil, ya que eventos como Hover no se pueden realizar en dispositivos móviles.
<button>Coddy Button</button>
<script>
/* It runs when the mouse
hovers over the button
*/
$("button").hover(function(){
$('button').text('Hovering...')
});
/*
It runs when the mouse
enters an element
*/
$("button").mouseenter(function(){
$('button').text('Mouse enter...')
});
/*
It runs when the mouse leaves
an element
*/
$("button").mouseleave(function(){
$('button').text('Mouse Leave...')
});
</script>Eventos del teclado
Ahora aprenderemos a gestionar los eventos del teclado.
Primero, definiremos un campo de entrada y, después, gestionaremos los eventos que genere dicho campo.
<input type="text" id="name"
name="yourname"
placeholder="Enter your name" />
<p>Keyboard event: <span id="state"></span></p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
/*
It runs every time we press
the keyboard key on the keyboard.
*/
$('#name').keydown(function(){
$('#state').text('Key down')
});
/*
It runs when we take our finger
off the keyboard key
*/
$('#name').keyup(function(){
$('#state').text('Key up')
});
// Runs when the user focuses on input.
$('#name').focus(function(){
$('#state').text('Focus')
});
/*
It works when we unfocus
from an input on the keyboard.
*/
$('#name').blur(function(){
$('#state').text('Blur')
});
})
</script>Eventos de formulario
Con jQuery, también podemos gestionar los eventos que se producen en los formularios.
Acciones como introducir datos en un campo o realizar una selección en el cuadro select son eventos de formulario.
Ejemplo de eventos de formulario
En el código siguiente se ejemplifican varios eventos de formulario.
*
listen to the form with the coddyForm
id and run when submit button clicked
*/
$("#coddyForm").submit(
function(event){
});Eventos de window
Por último, veamos los eventos de window.
Quizá el evento de window más importante sea $(document).ready(), pero como ya aprendimos sobre este evento, estudiaremos otros eventos de window.
Método resize
Método resize()
El método resize se vincula al objeto window del navegador y se activa cuando cambia el tamaño de la ventana.
const window = {};
const $ = (obj) => ({
resize: (callback) => {
console.log("Resize event handler would be attached here.");
}
});
$(window).resize(function() {
//trigging when user change windows size
});Método scroll
Método scroll()
El método scroll() se conecta a un elemento desplazable o al objeto window y se activa cuando el usuario desplaza el componente correspondiente.
$(window).scroll(function() {
//Calling when user scroll the window
});
$('#my-scrollable-element').scroll(function() {
//Calling when user scroll the cursor
//that inside the #my-scrollable-element element
});Enhorabuena
Enhorabuena 🎉
Hemos aprendido la gestión de eventos en jQuery.
En la siguiente sección, aprenderemos la lección sobre cómo crear animaciones con jQuery.
Aprende JavaScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 22
- Lecciones
- 48
Preguntas frecuentes
¿La lección «Gestión de eventos» es gratis?
Sí — el texto completo de «Gestión de eventos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 1 lecciones en total.
¿Qué aprenderé en «Gestión de eventos»?
Gestión de eventos Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar jQuery Academy?
No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 1.
¿Cuánto tiempo toma la lección «Gestión de eventos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?
Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.