Que es un evento en JS?

En JavaScript, un evento es una acción o suceso que ocurre en el navegador, como un clic en un botón, la carga de una página, o la acción de escribir en un campo de texto. Los eventos son una característica importante de la programación en JavaScript ya que nos permiten crear páginas web interactivas e intuitivas.

Para manejar eventos en JavaScript, se utilizan los event handlers (manejadores de eventos). Un event handler es una función de JavaScript que se ejecuta cuando ocurre un evento específico. Por ejemplo, si queremos ejecutar una función cuando se haga clic en un botón, podemos asignar esa función como event handler del evento "click" del botón.

Hay varias formas de asignar event handlers a un elemento en JavaScript, incluyendo:

• Usando atributos HTML específicos, como onclick o onload
• Usando el método addEventListener de JavaScript, el cual permite agregar varios event handlers a un mismo elemento y es compatible con todos los navegadores modernos.

Un ejemplo de como utilizar el addEventListener:

En este ejemplo, se está asignando la función anónima function(){ alert("Button was clicked!"); } como event handler del evento "click" del botón con ID "myBtn". Cuando se haga clic en ese botón, se ejecutará esa función y se mostrará una alerta en pantalla.

Hay muchos eventos diferentes que pueden ser manejados en JavaScript, y puedes utilizarlos para crear aplicaciones web muy interactivas. Cualquier cosa desde un simple clic en un botón hasta un cambio en el tamaño de la ventana o una acción de teclado puede ser detectada y manejada mediante eventos en JavaScript.

Como declarar un evento en JavaScript?

Usando atributos HTML específicos: Puedes declarar un evento en JavaScript utilizando atributos HTML específicos, como onclick, onload, onmouseover, etc. Este enfoque es fácil de usar, pero no es recomendado debido a que mezcla el código de JavaScript con el HTML.

Usando la propiedad on*: Puedes declarar un evento en JavaScript utilizando la propiedad on* del elemento HTML. Esta forma es similar a usar atributos HTML específicos, pero permite separar el código de JavaScript del HTML.

Usando el método addEventListener: Este es el enfoque recomendado para declarar eventos en JavaScript. El método addEventListener permite asignar múltiples event handlers a un mismo elemento y es compatible con todos los navegadores modernos.

El metodo addEventListener es el más recomendado y el que permite mayor flexibilidad. Sin embargo, es importante que tengas en cuenta la compatibilidad con los navegadores y lo que más te acomode a tus necesidades

Eventos mas utilizados en JS

Click: Este evento se activa cuando el usuario hace clic en un elemento.

Sumbit: Este evento se activa cuando un formulario es enviado.

Input: Este evento se activa cuando el valor de un campo de entrada cambia.

Mouseover: Este evento se activa cuando el cursor del ratón pasa sobre un elemento.

Keydown: Este evento se activa cuando una tecla del teclado es presionada.

Load: Este evento se activa cuando un recurso (como una imagen, un script o una página) ha sido cargado completamente.

Resize: Este evento se activa cuando el tamaño de la ventana del navegador cambia.

Scroll: Este evento se activa cuando el usuario hace scroll en la página.

Hay que tener en cuenta que esta lista no es exhaustiva, existen muchos otros eventos además