Toda acción que realiza el usuario en el navegador -pulsar un bóton, cargar una página, mover el ratón, escribir texto, etc- se conoce como evento. Podemos crear código para que responda a un evento especifico, quizás deseamos un mensaje "Hola [mi nombre]" al pulsar un botón. Listamos algunos eventos comunmente usados con JavaScript y a continuación veremos un ejemplos prácticos:

  • onblur: Cuando un elemento pierde el foco.
  • onchange: Cuando el contenido de un elemento cambia.
  • onclick: Cuando se da un clic en un elemento.
  • ondblclick: Cuando se da doble clic en un elemento.
  • onerror: Cuando hay un error en JavaScript.
  • onfocus: Cuando un elemento tiene el foco.
  • onkeydown: Cuando se presiona una tecla.
  • onkeypress: Cuando se tiene presionado una tecla.
  • onkeyup: Cuando se suelta una tecla.
  • onload: Cuando se carga la página.
  • onmousedown: Cuando se presiona un botón del ratón.
  • onmousemove: Cuando se mueve el ratón en la página.
  • onmouseout: Cuando se mueve el ratón fuera de un elemento.
  • onmouseover: Cuando se mueve el ratón sobre un elemento.
  • onmouseup: Cuando se suelta un botón del ratón.
  • onreset: Cuando se presiona el botón Reset.
  • onresize: Cuando se redimenciona la página o un elemento.
  • onsubmit: Cuando se presiona el botón Submit.
  • onunload: Cuando sale de la página actual o cambia a otra página.

Cada uno de estos eventos dependará de la etiqueta HTML que estemos usando. Por ejemplo, no podemos aplicar el evento onsubmit a un botón(input tipo button) porque este evento se usa especificamente con la etiqueta form.

Ejemplos de algunos Eventos

Ejemplo 01: Cambiando el color de fondo

Cambiaremos el color de fondo de la página al pulsar en el botón correspondiente. Note el evento onclick.

<html>
<head>
<title>Aprendiendo JavaScript</title>
</head>
<body>
<h1>Estoy aprendiendo JavaScript</h1>
 <form name="formulario" action="">
  <input type="button" value="Rojo" onclick="document.bgColor='red'" />
  <input type="button" value="Azul" onclick="document.bgColor='blue'" />
  <input type="button" value="Verde" onclick="document.bgColor='green'" />
 </form>
</body>
</html>

Ejemplo 02: Cuando presionamos alguna tecla

Diversos eventos al momento de escribir algun texto, aunque a simple vista parece tener el mismo efecto, son diferentes eventos: onkeypress, onkeydown y onkeyup. Nota: Usamos confirm para mostrar un mensaje en una pequeña ventana del navegador. La forma de usarlo es: confirm(‘mi mensaje’).

<html>
<head>
<title>Aprendiendo JavaScript</title>
</head>
<body>
<h1>Distintas interacciones al presionar una tecla</h1>
<form name="formulario" action="">
<p>Aca muestra el mensaje cuando presionamos una tecla - <strong>onkeypress</strong> </p>
<input type="text" onkeypress="confirm('Evento onkeypress')" />
<p>Muestra el mensaje cuando tenemos presionado la tecla - <strong>onkeydown</strong> </p>
<input type="text" onkeydown="confirm('Evento onkeydown')" />
<p>Muestra el mensaje cuando soltamos la tecla - <strong>onkeyup</strong> </p>
<input type="text" onkeyup="confirm('Evento onkeyup')" />
</form>
</body>
</html>