En JavaScript, los eventos son acciones o interacciones que ocurren en la página web y pueden ser detectadas y manejadas por el código de JavaScript. Los eventos pueden ser de muchos tipos, como clics de mouse, carga de página, teclas presionadas, etc. El objetivo principal de los eventos es permitir a los desarrolladores interactuar con el usuario y realizar ciertas acciones en respuesta a esa interacción.
El manejo de eventos en JavaScript es una parte fundamental de la programación de aplicaciones web interactivas. Al escuchar y responder a los eventos, los desarrolladores pueden crear aplicaciones más dinámicas y atractivas para el usuario. Además, los eventos permiten que el código se ejecute en un momento determinado, en lugar de ejecutarse en orden lineal, lo que mejora la experiencia de usuario y hace que la aplicación sea más eficiente.
Introducción
Los eventos en JavaScript son acciones o interacciones que tienen lugar en una página web y que pueden ser detectadas y manejadas por el código JavaScript. Estos eventos pueden ser cosas como hacer clic en un botón, mover el cursor sobre un elemento, cargar una página, enviar un formulario, etc.
Hay muchos tipos de eventos en JavaScript, pero aquí están algunos de los más comunes: "click", "mouseover", "load", "submit", "keypress", "focus", "blur". Cada evento puede ser asignado a un elemento específico y se puede hacer uso de funciones callback para ejecutar acciones específicas cuando se desencadene un evento determinado (Lenguaje JS, s.f.).
Otra cosa para tener en cuenta es el DOM. El DOM (Document Object Model) es una representación en forma de árbol de un documento HTML o XML. El DOM permite a los programadores acceder y manipular los elementos de un documento de una manera estructurada y programática.
En JavaScript, puedes acceder al DOM usando los métodos y propiedades del objeto document. Por ejemplo, puedes usar “document.getElementById()” para acceder a un elemento en particular por su ID, o “document.querySelectorAll()” para acceder a varios elementos que cumplan con un selector CSS. Además, puedes manipular los elementos del DOM, como cambiar su contenido, estilo o atributos, añadir o eliminar elementos, etc.
Comprensión de eventos
Imagina que tienes un botón en una página web y quieres que, al hacer clic en él, se muestre un mensaje en la pantalla. Este es un caso típico de eventos en JavaScript. A continuación, se muestra el código que podrías usar para lograr esto:
Esta pantalla se obtuvo directamente del software que se está explicando en la computadora, para
fines educativos.
¿Qué son los controladores de eventos y los oyentes de eventos?
Un controlador de eventos es una función en JavaScript que se ejecuta cuando un evento es activado (Kantor, 2022-c). Se pueden asignar a elementos HTML específicos, como botones o enlaces, y se llaman cuando el evento correspondiente se produce, como un clic en un botón. Un ejemplo de controlador de evento en JavaScript sería asociar una función a un evento en un elemento HTML. Por ejemplo, si quieres que, al hacer clic en un botón, se muestre un mensaje en la página:
Esta pantalla se obtuvo directamente del software que se está explicando en la computadora, para
fines educativos.
En este ejemplo, estas asociando una función anónima a un evento "click" en un elemento HTML con ID "myButton". Cuando se hace clic en el botón, se ejecutará la función y se mostrará un mensaje en una ventana emergente.
Un oyente de eventos, por otro lado, es una función que se encarga de "escuchar" un evento y ejecutar un controlador de eventos cuando se activa el evento. Un oyente de eventos se asigna a un elemento HTML y puede escuchar múltiples eventos. Por ejemplo, se puede asignar un oyente de eventos a un elemento de formulario para escuchar el evento "submit" y ejecutar un controlador de eventos cuando se envía el formulario (Monus, 2020). Un ejemplo de un oyente de eventos en JavaScript es cuando asignas una función a un evento específico en un elemento HTML. Por ejemplo, puedes asignar una función a ser ejecutada cuando un usuario haga clic en un botón:
Esta pantalla se obtuvo directamente del software que se está explicando en la computadora, para
fines educativos.
En este ejemplo, usas el método “addEventListener” en el elemento con ID "myButton" para asignar una función que se ejecutará cuando se produzca un evento "click". Esta función se convierte en un oyente de eventos para el evento "click" en el botón especificado.
Controladores de eventos en línea
Los controladores de eventos en línea para JavaScript son aquellos que se definen en un elemento HTML y se ejecutan cuando se produce un evento específico en ese elemento. Se escriben como atributos HTML, dentro de las etiquetas del elemento, y su valor es una función JavaScript (Uniwebsidad, s.f.). Por ejemplo:
Esta pantalla se obtuvo directamente del software que se está explicando en la computadora, para
fines educativos.
En este caso, cuando el usuario hace clic en el botón, se ejecuta la función “alert()” y se muestra un mensaje en pantalla. Los controladores de eventos en línea son una forma rápida y sencilla de manejar eventos en una página web, pero a medida que la complejidad de la página aumenta, es recomendable utilizar controladores de eventos en JavaScript externo.
Hay muchos controladores de eventos en JavaScript que pueden ser usados para responder a diferentes tipos de acciones y comportamientos en una página web. Algunos de los más comunes incluyen:
Estos son solo algunos ejemplos, pero hay muchos otros controladores de eventos disponibles en JavaScript. Es importante tener en cuenta que los controladores de eventos deben ser utilizados en combinación con los oyentes de eventos para responder a los eventos y ejecutar acciones específicas en respuesta.
Propiedades del controlador de eventos
Las propiedades de un controlador de eventos en JavaScript son las características específicas que describen el comportamiento de un evento específico (Mdn web docs, 2022-a). Algunas de las propiedades más comunes incluyen:
Oyentes de eventos
Los listeners de eventos en JavaScript son funciones que se ejecutan cuando ocurre un evento específico en un elemento HTML. Estos listeners escuchan continuamente un evento y se activan cuando se cumple una determinada condición, como el clic de un botón, el envío de un formulario o el cambio de una entrada (Monus, 2020). La ventaja de usar listeners de eventos es que permiten añadir comportamiento a los elementos HTML sin tener que interferir en su estructura.
A continuación, un ejemplo de listeners en JavaScript:
Esta pantalla se obtuvo directamente del software que se está explicando en la computadora, para
fines educativos.
Esta pantalla se obtuvo directamente del software que se está explicando en la computadora, para
fines educativos.
Esta pantalla se obtuvo directamente del software que se está explicando en la computadora, para
fines educativos.
La siguiente, es una lista más detallada de los listeners que tienes a tu disposición en el lenguaje JavaScript (Kantor, 2022-c):
Eventos comunes
Los eventos comunes en JavaScript son acciones que ocurren en una página web que pueden ser detectadas por el código, como, por ejemplo: hacer clic en un botón, cargar una página, mover el ratón, teclear en un formulario, etc. Estos eventos pueden ser manipulados y procesados mediante controladores y oyentes de eventos (Mdn web docs, 2022-b). Algunos ejemplos comunes de eventos en JavaScript incluyen: "click", "load", "mouseover", "submit", "keypress", etc.
Eventos de mouse
Los eventos del mouse en JavaScript se refieren a los eventos que se disparan cuando se interactúa con el cursor del mouse en una página web (Kantor, 2022-a). Algunos ejemplos de eventos del mouse en JavaScript incluyen:
Por ejemplo, puedes usar el evento “click” en JavaScript para ejecutar una función cuando se hace clic en un botón:
Esta pantalla se obtuvo directamente del software que se está explicando en la computadora, para
fines educativos.
Eventos de formulario
Los eventos de formulario en JavaScript son eventos que se producen cuando el usuario interactúa con un formulario en una página web (Kantor, 2022-b). Algunos ejemplos de eventos de formulario en JavaScript son:
Por ejemplo, si quieres ejecutar una función cuando un usuario envía un formulario, puedes agregar un controlador de evento “submit” al formulario:
Esta pantalla se obtuvo directamente del software que se está explicando en la computadora, para
fines educativos.
En este ejemplo, al hacer clic en el botón “Submit”, se ejecutará la función y se imprimirá “Form submitted!" en la consola.
Eventos de teclado
Los eventos de teclado son eventos que se activan cuando un usuario interactúa con el teclado (Soni, 2021). Algunos ejemplos de eventos de teclado en JavaScript incluyen:
Por ejemplo, podrías usar el evento keypress para detectar cuándo un usuario ha presionado una tecla específica en un formulario de búsqueda y realizar una búsqueda en consecuencia:
Esta pantalla se obtuvo directamente del software que se está explicando en la computadora, para
fines educativos.
Los eventos son una parte fundamental de la programación en JavaScript. Son una manera de reaccionar a acciones del usuario, tales como clicks, hover, y mucho más. La habilidad de manipular y reaccionar a estos eventos permite a los desarrolladores crear aplicaciones interactivas y atractivas para el usuario.
Al comprender los conceptos y la sintaxis detrás de los eventos, los desarrolladores pueden mejorar significativamente la funcionalidad y la experiencia del usuario de sus aplicaciones. Por lo tanto, es importante tomarse el tiempo para practicar y profundizar en el tema de los eventos en JavaScript.
Asegúrate de:
Los siguientes enlaces son externos a la Universidad Tecmilenio, al acceder a ellos considera que debes apegarte a sus términos y condiciones.
Lecturas
Para conocer más acerca de eventos, te sugerimos revisar lo siguiente:
Videos
Para conocer más acerca de eventos, te sugerimos revisar lo siguiente: