Eventos de JavaScript

 Los eventos HTML son "cosas" que les suceden a los elementos HTML.

Cuando se utiliza JavaScript en páginas HTML, JavaScript puede "reaccionar" a estos eventos.

Eventos HTML

Un evento HTML puede ser algo que hace el navegador o algo que hace un usuario.

A continuación se muestran algunos ejemplos de eventos HTML:

  • Se terminó de cargar una página web HTML
  • Se modificó un campo de entrada HTML
  • Se hizo clic en un botón HTML

A menudo, cuando ocurren acontecimientos, es posible que desees hacer algo.

JavaScript le permite ejecutar código cuando se detectan eventos.

HTML permite que se agreguen atributos de controlador de eventos, con código JavaScript , a elementos HTML.

Entre comillas simples:

<element event='some JavaScript'>

Entre comillas dobles:

<element event="some JavaScript">

En el siguiente ejemplo, onclickse agrega un atributo (con código) a un <button>elemento:

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

En el ejemplo anterior, el código JavaScript cambia el contenido del elemento con id="demo".

En el siguiente ejemplo, el código cambia el contenido de su propio elemento (usando this.innerHTML):

<button onclick="this.innerHTML = Date()">The time is?</button>

El código JavaScript suele tener varias líneas de longitud. Es más habitual ver atributos de eventos que invocan funciones:

<button onclick="displayDate()">The time is?</button>

Eventos HTML comunes

A continuación se muestra una lista de algunos eventos HTML comunes:

EventoDescripción
encambioSe ha cambiado un elemento HTML
al hacer clicEl usuario hace clic en un elemento HTML
al pasar el ratón por encimaEl usuario mueve el ratón sobre un elemento HTML
fuera del ratónEl usuario aleja el ratón de un elemento HTML
al presionar una teclaEl usuario presiona una tecla del teclado
cargarEl navegador ha terminado de cargar la página.

Controladores de eventos de JavaScript

Los controladores de eventos se pueden utilizar para gestionar y verificar la entrada del usuario, las acciones del usuario y las acciones del navegador:

  • Cosas que se deben hacer cada vez que se carga una página
  • Cosas que se deben hacer cuando se cierra la página
  • Acción que debe realizarse cuando un usuario hace clic en un botón
  • Contenido que debe verificarse cuando un usuario ingresa datos
  • Y más...

Se pueden utilizar muchos métodos diferentes para permitir que JavaScript trabaje con eventos:

  • Los atributos de evento HTML pueden ejecutar código JavaScript directamente
  • Los atributos de eventos HTML pueden llamar a funciones de JavaScript
  • Puede asignar sus propias funciones de controlador de eventos a elementos HTML
  • Puede evitar que se envíen o gestionen eventos
  • Y más...


Comentarios

Publicar un comentario

Entradas populares de este blog

1-Teclas

Imagen
En este codigo implementamos tres funciones para capturar los eventos del teclado. <!DOCTYPE html > <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Ejemplo de Keypress.js </title> </head> <body>     <script src = "https://cdn.jsdelivr.net/npm/keypress.js@2.1.5/keypress.js" ></script>     <script>         // Configuración del teclado         var configTeclado = { prevent_repeat : true };         var eventoTeclado = new window . keypress . Listener ( this , configTeclado );         // Funciones asociadas a las combinaciones         function pulsaA () {             console . log ( 'has pulsado a' );         } ...
Leer más

2-canvas

Imagen
Este código crea un lienzo en la página web y permite interactuar con él utilizando el ratón. Cuando cargas la página, la función inicializar()se ejecuta automáticamente gracias al atributo onloaden el cuerpo del HTML. Esta función configura el lienzo ( canvas) para escuchar eventos del ratón. Eventos que detectan: mousedown: Se dispara cuando haces clic sobre el lienzo. Al suceder, se ejecuta la función clickRaton()que muestra en la consola el mensaje "pulsando ratón". mouseup: Se activa cuando sueltas el botón del ratón. Llama a la función sueltaRaton(), que imprime "soltado ratón" en la consola. mousemove: Este evento detecta el movimiento del ratón mientras está sobre el lienzo. La función posicionRaton()obtiene la posición actual del ratón (coordenadas xe y) y las muestra en la consola. En resumen, este código registra interacciones básicas del ratón sobre un lienzo para capturar clics, movimientos y la acción de soltar el botón, mostrando los resultados en la ...
Leer más

3-1-Personajes

Imagen
 El código está diseñado para dibujar personajes en un lienzo ( canvas ), pero actualmente no tienen movimiento porque no se está actualizando la posición de los personajes en cada frame. Solución: Hacer que los personajes se muevan Para que los personajes se muevan, debes modificar sus coordenadas ( x o y ) dentro de la función principal() en cada iteración del bucle que setInterval ejecuta. Esto se logra simplemente alterando las propiedades this.x o this.y de los objetos creados con la función personaje . <!DOCTYPE html > <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Document </title>             </head> <body onload = " inicializa ()" >     <canvas id = "canvas...
Leer más