¿Qué son los eventos de JavaScript?
Estás montando en un automóvil y llega una señal, es rojo, te detienes. Cuando la señal se vuelve verde, comienza a conducir nuevamente. Sus acciones se basaron en alguna señal que se le proporcionó. Lo mismo ocurre con los eventos. Cuando está programando, desea que se realicen algunas acciones haciendo clic en un botón o presionando una tecla. El clic del botón o la presentación de una tecla genera un evento. Basado en este evento, se realiza alguna acción. Por ejemplo, hay un artículo y un botón que se lee "mostrar más". Cuando hace clic en ese botón, todo el artículo se vuelve visible
En esta publicación, vamos a discutir todo sobre eventos con ejemplos.
¿Qué es un evento?
En pocas palabras, un evento es una acción realizada por un usuario o iniciada por el navegador. JavaScript responde/reacciona a esa acción; Esta reacción/respuesta al evento se llama manejo del evento. El manejo de eventos es solo un código escrito por el desarrollador. Este código se ejecuta cuando se activa el evento. Los manejadores de eventos también se llaman oyentes de eventos. Los eventos se disparan dentro de la ventana del navegador y están relacionados o se unen a un solo o un conjunto de elementos. Los eventos son de muchos tipos diferentes. Algunos de ellos son:
- El usuario presiona una tecla en el teclado
- El usuario se cierne sobre un elemento
- El usuario hace clic en un elemento a través del mouse
- El usuario cierra el navegador
- El usuario cambia de tamaño del navegador
- La página web se está cargando o ha terminado de cargar
- Cuando ocurre un error
- El usuario envía un formulario
Eventos de JavaScript
Javascript nos proporciona un montón de eventos. Enumerarlos a todos y explicarlos a todos en un artículo es imposible. Aquí solo enumeraré los más comunes:
Eventos de entrada
- más azul
- cambiar
- enfocar
- Key -Up/Keydown
- llave
Eventos de ratón
- Ratón sobre
- Ratón
- Mousedown/ratón
Haga clic en eventos
- hacer clic
- Dblclick
Eventos de carga
- carga
- descargar
- error
- Cambiar de tamaño
Ahora que hemos discutido la teoría, vamos a la practicidad y discutamos algunos ejemplos de la vida real de los eventos de JavaScript. Supongamos que tengo un botón y cuando hago clic en ese botón, quiero que se muestre una alerta al usuario. El clic del botón desencadena el evento y luego un bloque de código manejará el evento y reaccionará mostrando una alerta.
Este es un botón simple en un archivo HTML. Ahora obtendremos el botón a través del nombre de la clase y luego manejaremos el evento I-e Haga clic.
const btn = documento.QuerySelector (".Haz click en mi");btn.addEventListener ('Click', function ()
alerta ("Usted hizo clic en el botón");
);
Coloque este código en una etiqueta de script o haga otro archivo con JS Extension y colóquelo allí.
Ahora, cuando hacemos clic en el botón, se mostrará una alerta:
También hay otras formas en que podemos implementar esto, por ejemplo:
const btn = documento.QuerySelector (".Haz click en mi");btn.onClick = function ()
alerta ("Usted hizo clic en el botón");
;
O:
const btn = documento.QuerySelector (".Haz click en mi");función clickedMe ()
alerta ("Usted hizo clic en el botón");
;
btn.onClick = ClickedMe;
El archivo html i-e el botón sigue siendo el mismo.
Nota: Puede colocar su código JavaScript en una etiqueta de script y luego ejecutar su archivo HTML en el navegador usando el servidor en vivo o crear un archivo diferente con JS Extension y hacer referencia al encabezado del archivo HTML.
Ahora veamos otro ejemplo: supongamos que tenemos un formulario de registro. En la forma tenemos dos campos de entrada y queremos poner validación. Si el usuario envía el formulario, queremos verificar si el usuario llenó las entradas o lo dejó vacío. Si ambos o uno de ellos están vacíos, mostramos una alerta de que el campo está vacío. De lo contrario, mostramos una alerta que dice que el usuario se ha registrado:
Cuando dejamos el campo de contraseña vacío y hicimos clic en el registro, un evento activado I-E enviar. Pero según nuestro controlador, el campo de entrada "Contraseña"Estaba vacío, por lo tanto, un mensaje"Por favor, rellene los campos obligatorios" se muestra.
Cuando llenamos ambos campos y hicimos clic en el botón Registro, ""Registrado" fue mostrado.
Conclusión
Los eventos y el manejo de eventos son conceptos realmente importantes de JavaScript. Cuando un usuario interactúa con una página web, se activa un evento. JavaScript proporciona controladores de eventos para responder a estos eventos y hacer que las páginas web sean más interactivas mientras proporcionan experiencia de usuario inmersiva. En esos manejadores de eventos podemos poner nuestro propio código y lógica y hacer algo hermoso.
En esta publicación, discutimos brevemente qué son los eventos de JavaScript y cómo podemos manejarlos; Luego pasamos a los tipos de eventos y manejadores de eventos y sus aplicaciones de la vida real.