# jQuery.on(): cómo conectar controladores de eventos

El método jQuery.on() simplifica la **gestión de eventos** y se utiliza ampliamente en el desarrollo de aplicaciones web interactivas. Te presentamos la sintaxis y ejemplos prácticos de aplicación de esta función tan importante.

## ¿Qué es el método jQuery.on()?

jQuery.on() permite vincular controladores de eventos a elementos específicos en el desarrollo web. Puedes utilizar jQuery.on() para responder a las interacciones del usuario, como eventos de clics, entradas de teclado, movimientos del ratón o entradas de formularios, y llamar a funciones como consecuencia. Además, facilita la **delegación de eventos**, lo que te permite vincular controladores de eventos a elementos que se agreguen o eliminen dinámicamente durante la ejecución. Esto resulta útil, por ejemplo, para añadir una clase con [jQuery.addClass()](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/jquery-addclass/), localizar elementos con [jQuery.find()](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/jquery-find/) y realizar iteraciones con la función de bucle [jQuery.each()](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/jquery-each/) en el bloque de funciones. Los métodos para el procesamiento de eventos se pueden integrar fácilmente con [jQuery en WordPress](https://www.ionos.mx/digitalguide/hosting/blogs/wordpress-jquery/).

Consejo El [hosting con espacio ilimitado](https://www.ionos.es/alojamiento/espacio-web "Alquila espacio web con IONOS") de IONOS te proporciona más de 50 GB de espacio de almacenamiento para tus proyectos web y un certificado Wildcard SSL gratuito para asegurar tus comunicaciones. Elige la oferta de espacio web de IONOS y establece una base sólida a tus proyectos web.

## Sintaxis y parámetros del método jQuery.on()

La sintaxis de jQuery.on() es la siguiente:

```jQuery
$(selector).on(event, childSelector, data, function, map)
```

- **Event**: el nombre del evento al que debe responder el controlador de eventos, por ejemplo, “click”, “keydown”, “submit”, etc.
- **childSelector**: es un selector CSS opcional que especifica qué elementos hijo deben activar el evento
- **data**: datos adicionales opcionales que se pasan al controlador del evento
- **function**: la función que se debe ejecutar cuando se activa el evento
- **map**: permite vincular varios eventos y sus controladores en una sola llamada mediante un mapeo de objetos

Para obtener más información sobre funciones y su sintaxis, consulta el [tutorial de jQuery](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/jquery-tutorial-de-integracion-y-primeros-pasos/) disponible en nuestra guía.

Consejo Optimiza tus flujos de trabajo y mejora su eficiencia utilizando la potente [API de IONOS](https://developer.hosting.ionos.es "API de IONOS para desarrolladores"). Esta API te ofrece la capacidad de crear y configurar recursos, lo que no solo te permite ahorrar tiempo valioso, sino también reduce significativamente las posibilidades de errores.

## Ejemplo de uso de jQuery.on()

Puedes utilizar el método jQuery.on() para vincular eventos y ejecutar un determinado código cuando se produzcan dichos eventos. Aquí tienes un ejemplo de procesamiento de un **evento clic**:

```jQuery
$('#myButton').on('click', function() {
    console.log('¡Se ha pulsado el botón!');
});
```

En este ejemplo, el controlador de eventos para un clic está vinculado al elemento botón con el ID “myButton”. Cuando se hace clic en el botón, se ejecuta la **función del controlador del evento** y se muestra el mensaje “¡Se ha pulsado el botón!” en la consola. Puedes utilizar jQuery.on() para controlar otros eventos, como “mouseover”, “keydown” o “submit”, y definir funciones para cada uno de ellos.

Consejo [Deploy Now](https://www.ionos.es/alojamiento/deploy-now "Despliegues automáticos con IONOS") de IONOS es una forma sencilla y directa de poner en marcha tu página web. Te ofrece un entorno de preparación rápido con una URL de vista previa, una interfaz de usuario fácil de usar y un reconocimiento inteligente de frameworks que agiliza eficazmente el proceso de publicación.


This is a markdown version of: [https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/jquery-on/](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/jquery-on/) for AI/LLM consumption.