Lección 17. Eventos en HTML.

Los eventos permiten ejecutar accionescuando el usuario interactúa con la página. Se utilizan con JavaScript para responder a clicks, teclas, cambios de valores, envíos de formularios, etc.

Veamos algunos de los eventos mas conocidos y utiles:

onclick._

Se ejecuta cuando se hace click en un elemento.

Copiar código
<button onclick="alert('Hola!')">Haz clic</button>

Nota: el valor del atributo onclick es lenguaje JS.

oninput._

Se ejecuta cuando el usuario escribe dentro de un campo.

Copiar código
<input type="text" oninput="console.log(this.value)">

onchange._

Se activa cuando un valor cambia y se pierde el foco.

Copiar código
<select onchange="alert('Cambiaste la opción')">
  <option>Rojo</option>
  <option>Azul</option>
</select>

Nota: oninput es utilizado mayormente para inputs de textos, mientras onchange es utilizado para todo tipo de inputs que NO requieren insertar texto, sino solo cambiar de valor.

onsubmit._

Permite controlar lo que sucede cuando el formulario se envía.

Copiar código
<form onsubmit="alert('Formulario enviado'); return false;">
  <button type="submit">Enviar</button>
</form>

Nota: Este evento es utilizado para validar datos enviados en el formulario.

onkeydown._

Se ejecuta cada vez que una tecla es presionada.

Copiar código
<input type="text" onkeydown="console.log('Tecla presionada')">

Nota: Con mas código JS, podemos verificar que tecla fue presionada.

Otros mas eventos._

Otros tipos de eventos: