Hablaremos sobre los eventos en JavaScript, los eventos son acciones o resultados de la interacción del usuario con nuestro Sitio Web, para luego si queremos poder llamar un handler (función que se ejecuta luego de ocurrir un evento).

Recordar que una función agrupa un bloque de código para reutilizarlo.

nota

Podemos decir que los eventos o acciones pueden de ser usando el mouse, teclado, haciendo Scroll o comportamiento de nuestra página web.

Veamos cómo ejecutar un evento a través de un enlace, que el usuario al hacer click en un enlace, se produce un mensaje.

Veamos el ejemplo: 

<!-- Ejecutamos un mensaje cuando se presiona click en el enlace, tener en cuenta que se agrega antes (javascript:) para ejecutar la función que deseamos --> 
<a href="javascript:alert('Hola Mundo');">Click aqui</a>

Veamos los eventos del Mouse:

  • onmousedown : se dispara cuando se ha presionado el botón
  • onmousemove : se ha movido el ratón en una zona
  • onmouseover : se pasa el puntero en una zona determinada
  • onmouseout : el puntero sale de una zona determinada
  • onmouseup : se ha levantado botón izquierdo del mouse
  • onclick : se ha presionado el botón izquierdo del mouse
  • ondbloclick : se ha presionado doble pulsación
  • onselect : cuando se realiza un selección

Otros Eventos del Teclado y de la pagina:

  • onkeydown : se presiona un tecla.
  • onkeypress : el usuario pulsa una tecla
  • onkeyup : el usuario deja de pulsar una tecla
  • onfocus : el objeto gana el foco
  • onblur : el objeto pierde el foco
  • onreset : el usuario resetea el formulario
  • onsubmit : el formulario esta a punto de enviarse
  • onload : el navegador termino de cargar la pagina
  • onunload : el objeto se ha descargado

Otros Eventos adicionales:

  • onabort : el usuario cancela la carga de una imagen
  • onchange : el contenido de un objeto o selección ha cambiado
  • ondragdrop : se dispara en el objeto fuente durante la operación de arrastre.
  • onerror : se produce el error en la carga de un objeto
  • onmove : cuando mueve la ventana
  • onresize : cuando se redimensiona la ventana

Ahora crearemos un programa donde calculemos el factorial de un numero.

Veamos el código de ejemplo: 

<!DOCTYPE html>
<html lan="es">
<head>
<meta charset="UTF-8">
<title>Mi titulo</title>
<body>

<script type="text/javascript">
function MiFactorial(num)
{
 var msj = ( (num==1)?1:(num*MiFactorial(num-1)));
 alert(msj);
}
</script>

<a href="#" onclick="MiFactorial(10)">Mostar el factorial de 10</a>
</body>

</html>

El objeto this

Veamos ahora el objeto this en los eventos, el this hace referencia al objeto que provocó el evento, de tal modo como todo objeto tiene propiedades y métodos, de tal forma podemos acceder a sus características del objeto.

Ahora veamos un ejemplo con la palabra clave this, creamos un programa las cuales tendremos cuatro div con el mismo evento y la llamada a la misma función cuando se provoque el evento onclick.

Veamos el código del ejemplo:

<!DOCTYPE html>
<html lan="es">
<head>
<meta charset="UTF-8">
<title>Mi titulo</title>
<body>

<style type="text/css">
div {
width: 400px;
height: 400px;
background-color: #FF0000;
border: black;
margin: 15px;
float: left;
}
</style>

<script type="text/javascript">
function Mensaje(obj)
{
alert("Mi mensaje de la caja es " + obj.id);
}
</script>

<div id="caja1" onclick="Mensaje(this)"></div>

<div id="caja2" onclick="Mensaje(this)"></div>

<div id="caja3" onclick="Mensaje(this)"></div>

<div id="caja4" onclick="Mensaje(this)"></div>

</body>
</html>

Y así aprendimos sobre los eventos en JavaScript

nota