MEJOR SITIO PARA DESARROLLADORES WEB
HTML CSS JAVASCRIPT SQL PYTHON PHP JAVA KOTLIN GO C C++ C# Django CÓMO W3.CSS AI Más 🔍 ◑ Libros REFERENCIAS EJERCICIOS

JS Tutorial

JS HOGAR JS Introducción JS A donde JS Producción JS Declaraciones JS Sintaxis JS Comentarios JS Variables JS Let JS Const JS Operadores JS Aritmética JS Asignación JS Tipos de datos JS Funciones JS Objetos JS Eventos JS Cadenas JS Métodos de cadena JS Búsqueda de cadenas JS Plantillas de cadenas JS Números JS Métodos numéricos JS Matrices JS Métodos de matriz JS Clasificación de matrices JS Iteración de matriz JS Array Const JS Fechas JS Formatos de fecha JS Métodos de obtención de fecha JS Métodos de configuración de fechas JS Math JS aleatorio JS Booleanos JS Comparaciones JS If Else JS Switch JS Bucle For JS Bucle For In JS Bucle For Of JS Bucle While JS Break JS Iterables JS Conjuntos JS Maps JS Tipo de JS Conversión de tipo JS Bitwise JS RegExp JS Errores JS Alcance JS Hoisting JS Modo estricto JS this palabra clave JS Función de flecha JS Clases JS Módulos JS JSON JS Depuración JS Guía de estilo JS Mejores prácticas JS Errores JS Rendimiento JS Palabras reservadas

JS Versiones

JS Versiones JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS 2019 JS 2020 JS 2021/2022 JS IE / Edge JS Historia

JS Objetos

Objeto Definiciones Objeto Propiedades Objeto Métodos Objeto Display Objeto Accesorios Objeto Constructores Objeto Prototipos Objeto Iterables Objeto Conjuntos Objeto Mapas Objeto Referencia

JS Funciones

Función Definiciones Función Parámetros Función Invocación Función Llamar Función Aplicar Función Unir Función Cierres

JS Clases

Clase Introducción Clase Herencia Clase Estático

JS Asíncrono

JS Devoluciones de llamada JS Asincrónico JS Promesas JS Async/Await

JS HTML DOM

DOM Introducción DOM Métodos DOM Documento DOM Elementos DOM HTML DOM Formularios DOM CSS DOM Animaciones DOM Eventos DOM Oyente de eventos DOM Navegación DOM Nodos DOM Colecciones DOM Listas de nodos

JS Navegador BOM

JS Ventana JS Pantalla JS Ubicación JS Historia JS Navegador JS Alerta emergente JS Momento JS Cookies

JS Web APIs

Web API Introducción API de formularios web API de historial web API de almacenamiento web API de trabajador web API de recuperación web API de geolocalización web

JS AJAX

AJAX Introducción AJAX XMLHttp AJAX Pedido AJAX Respuesta AJAX XML Archivo AJAX PHP AJAX ASP AJAX Base de datos AJAX Aplicaciones AJAX Ejemplos

JS JSON

JSON Introducción JSON Sintaxis JSON vs XML JSON Tipos de datos JSON Analizar JSON Stringificar JSON Objetos JSON Matrices JSON Servidor JSON PHP JSON HTML JSON JSONP

JS vs jQuery

jQuery Selectores jQuery HTML jQuery CSS jQuery DOM

JS Gráficos

JS Gráficos JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

JS Ejemplos

JS Ejemplos JS HTML DOM JS HTML Input JS HTML Objetos JS HTML Eventos JS Navegador JS Editor JS Ejercicios JS Prueba JS Bootcamp JS Certificado

JS Referencias

JavaScript Objetos HTML DOM Objetos

JavaScript. W3Schools en español. Lecciones para principiantes

Ua En De Fr

JavaScript Eventos

❮ Prev Next ❯

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

Cuando se utiliza JavaScript en páginas HTML, JavaScript puede "reaccionar" ante 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 eventos, es posible que desee hacer algo.

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

HTML permite agregar atributos de controlador de eventos, con código JavaScript, a elementos HTML.

Con comillas simples:

<elementoevento='algo de JavaScript'>

Entre comillas dobles:

<elementoevento="algo de JavaScript">

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

Ejemplo

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

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):

Ejemplo

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

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

Ejemplo

<button onclick="displayDate()">The time is?</button>
Try it Yourself »

Eventos HTML comunes

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

Evento Descripción
onchange Se ha cambiado un elemento HTML
onclick El usuario hace clic en un elemento HTML
onmouseover El usuario mueve el ratón sobre un elemento HTML
onmouseout El usuario aleja el ratón de un elemento HTML
onkeydown El usuario empuja una tecla del teclado
onload El navegador ha terminado de cargar la página

La lista es mucho más larga: Referencia de JavaScript de W3Schools Eventos DOM HTML.

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 se debe realizar cuando un usuario hace clic en un botón
  • Contenido que se debe verificar 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 eventos HTML pueden ejecutar código JavaScript directamente
  • Los atributos de eventos HTML pueden llamar a funciones JavaScript
  • Puede asignar sus propias funciones de controlador de eventos a elementos HTML
  • Puede evitar que se envíen o se gestionen eventos
  • Y más...

Aprenderá mucho más sobre eventos y controladores de eventos en los capítulos de HTML DOM.

Ponte a prueba con ejercicios

Ejercicio:

El elemento <button> debería hacer algo cuando alguien hace clic en él. ¡Intenta solucionarlo!

<button ="alert('Hello')">Click me.</button>

❮ Prev Next ❯