Los eventos son acciones u ocurrencias que ocurren en el sistema. En el mundo de la programación, los eventos son algo que les sucede a los elementos HTML. Pero cuando se utiliza en páginas HTML, puede reaccionar a estos eventos. En este artículo veremos cuáles son los diferentes tipos de eventos en JavaScript y cómo funcionan, en la siguiente secuencia:
¿Qué son los eventos en JavaScript?
Javascript tiene eventos que proporcionan una interfaz dinámica a una página web. Estos eventos están conectados a elementos en el Modelo de objetos de documento (JUICIO).
Además, estos eventos usan de forma predeterminada la propagación burbujeante, es decir, hacia arriba en el DOM de hijos a padres. Podemos vincular eventos ya sea como en línea o en un script externo. Con la ayuda de JavaScript, puede detectar cuándo suceden ciertos eventos y hacer que ocurran cosas en respuesta a esos eventos.
Tipos de eventos en JavaScript
Hay diferentes tipos de eventos en que se utilizan para reaccionar a los eventos. Aquí, discutiremos algunos de los eventos famosos o más utilizados, como:
- Al hacer clic
- Onkeyup
- El ratón por encima
- Onload
- Enfocado
Así que sigamos adelante y echemos un vistazo a estos eventos en JavaScript con un ejemplo.
Evento al hacer clic
El evento Onclick es un evento del mouse y provoca cualquier lógica definida si el usuario hace clic en el elemento al que está vinculado. Tomemos un ejemplo y veamos cómo funciona:
function edu () {alert ('¡Bienvenido a Edureka!')} Haga clic en el botónSalida:
Después de hacer clic en el botón, aparece el siguiente mensaje de alerta:
cómo invertir la cadena de python
Evento Onekeyup
Este evento es un evento de teclado y se usa para ejecutar instrucciones cada vez que se suelta una tecla después de presionarla. El siguiente ejemplo muestra el funcionamiento del evento:
var a = 0 var b = 0 var c = 0 función changeBackground () {var x = document.getElementById ('bg') bg.style.backgroundColor = 'rgb (' + a + ',' + b + ',' + c + ')' a + = 1 b + = a + 1 c + = b + 1 si (a> 255) a = a - b si (b> 255) b = a si (c> 255) c = b}Salida:
Después de escribir algo, se ve así:
Evento Onmouseover
El evento onmouseover en JavaScript corresponde a pasar el puntero del mouse sobre el elemento y sus hijos, al que está vinculado. El ejemplo se muestra a continuación:
función hov () {var e = document.getElementById ('hover') e.style.display = 'none'}Salida:
El cuadro de color aparece antes de pasar el mouse. Tan pronto como desplace el mouse sobre el cuadro, desaparece.
Evento de carga
El evento onload se evoca cuando un elemento se carga por completo. Tomemos un ejemplo y veamos cómo funciona:
Salida:
Evento de enfoque
El evento Onfocus tiene una lista de elementos que ejecuta instrucciones cada vez que recibe el foco. El siguiente ejemplo muestra cómo funciona el evento onfocus:
función enfocada () {var e = document.getElementById ('entrada') if (confirm ('Evento de enfoque')) {e.blur ()}}Foco en el cuadro de entrada:
Salida:
Estos son algunos de los eventos más utilizados en JavaScript. Con esto, hemos llegado al final de nuestro artículo. Espero que haya entendido qué son los eventos y cómo se utilizan.
Mira nuestro que viene con capacitación en vivo dirigida por un instructor y experiencia en proyectos de la vida real. Esta capacitación lo convierte en un experto en habilidades para trabajar con tecnologías web de back-end y front-end. Incluye capacitación en desarrollo web, jQuery, Angular, NodeJS, ExpressJS y MongoDB.
Tienes una pregunta para nosotros? Menciónelo en la sección de comentarios de este blog y nos comunicaremos con usted.