Eventos en jQuery: click, change, submit, keyup y on()

Los eventos permiten ejecutar código cuando el usuario interactúa con la página.

on()

on() es el método general para registrar eventos en jQuery.

$("#boton").on("click", function () {
    console.log("Clic");
});

this dentro del evento

Dentro de una función tradicional, this hace referencia al elemento que disparó el evento. Para usar métodos jQuery lo envolvemos con $(this).

$(".boton").on("click", function () {
    $(this).addClass("activo");
});

change

change es útil para detectar cambios confirmados en inputs, selects o checkboxes.

$("#provincia").on("change", function () {
    console.log($(this).val());
});

keyup

keyup se dispara cuando el usuario libera una tecla. Puede usarse para búsquedas simples o respuestas mientras escribe.

$("#buscar").on("keyup", function () {
    console.log($(this).val());
});

submit

El evento submit pertenece al formulario y nos permite interceptar su envío.

$("#formulario").on("submit", function (event) {
    event.preventDefault();

    console.log("Formulario procesado");
});

preventDefault()

Evita la acción por defecto del navegador. En un formulario impide el envío tradicional mientras validamos o enviamos datos con JavaScript.

Delegación de eventos

Si los elementos se crean dinámicamente, conviene escuchar el evento en un contenedor existente.

$("#lista").on("click", ".eliminar", function () {
    $(this).closest("li").remove();
});

El listener está en #lista, pero sólo actúa cuando el clic proviene de un elemento .eliminar.

off()

off() elimina listeners registrados previamente. Puede ser útil para evitar eventos duplicados.

$("#boton").off("click");

Ejercicio

Creá una lista dinámica. Permití agregar elementos desde un formulario y eliminarlos mediante delegación de eventos.

Errores comunes

• usar funciones flecha cuando necesitamos this del elemento;
• registrar eventos varias veces sin querer;
• escuchar el evento sobre el elemento equivocado;
• olvidar preventDefault() en formularios procesados con JavaScript.

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

← Modificar HTML, texto, atributos y clases con jQuery

Efectos y animaciones en jQuery: show, hide, fade y slide →