Eventos (II) Eventos más importantes en JavaScript

Posted by On febrero 21, 2016 2 Comments

Ya hemos visto anteriormente la forma de trabajar con eventos, y aunque volveremos a hablar de estas formas más adelante, hoy vamos a ver un listado de los eventos más importantes en Javascript para poder hacer que nuestras webs comiencen a tener un mayor dinamismo de la información, para luego ir tocandolos, haciendo ejemplos y logrando efectos espectaculares.

Hay que partir de la idea de que cada etiqueta HTML tiene su propia lista de posibles eventos que pueden asignársele y que estos elementos pueden utilizarse en diferentes etiquetas HTML.

De este modo en la siguiente tabla vamos a observar una lista de los eventos más importantes en JavaScript:

Evento Descripción Elementos para los que está definido
onblur Deseleccionar el elemento <button>, <input>, <label>, <select>, <textarea>, <body>
onchange Deseleccionar un elemento que se ha modificado <input>, <select>, <textarea>
onclick Pinchar y soltar el ratón Todos los elementos
ondblclick Pinchar dos veces seguidas con el ratón Todos los elementos
onfocus Seleccionar un elemento <button>, <input>, <label>, <select>, <textarea>, <body>
onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body>
onkeypress Pulsar una tecla Elementos de formulario y <body>
onkeyup Soltar una tecla pulsada Elementos de formulario y <body>
onload La página se ha cargado completamente <body>
onmousedown Pulsar (sin soltar) un botón del ratón Todos los elementos
onmousemove Mover el ratón Todos los elementos
onmouseout El ratón «sale» del elemento (pasa por encima de otro elemento) Todos los elementos
onmouseover El ratón «entra» en el elemento (pasa por encima del elemento) Todos los elementos
onmouseup Soltar el botón que estaba pulsado en el ratón Todos los elementos
onreset Inicializar el formulario (borrar todos sus datos) <form>
onresize Se ha modificado el tamaño de la ventana del navegador <body>
onselect Seleccionar un texto <input>, <textarea>
onsubmit Enviar el formulario <form>
onunload Se abandona la página (por ejemplo al cerrar el navegador) <body>

Estos eventos tienen lugar continuamente cuando un usuario interacciona con la web, lo único que nosotros hacemos es lograr que esta interacción sea mucho más satisfactoria para el usuario.

De hecho hay ocasiones en las que una interacción llama a varios eventos encadenados, como en un enlace, en el cual el ratón pasa por encima (onmouseover), al hacer click (onclick), al soltar el botón (onmouseup). De esta forma se pueden encadenar acciones para cada evento.

Y ahí no terminan nuestras posibilidades ya que también es posible encadenar diferentes eventos sin eliminar los anteriores en un mismo evento, como podemos ver en el siguiente código de ejemplo:

<!DOCTYPE html>
<html>
<body>
<button id="miBoton">Pulsar</button>
<div id="demo"></div>

<script>
var x = document.getElementById("miBoton");
x.addEventListener("mouseover", funcion1);
x.addEventListener("click", funcion2);
x.addEventListener("mouseout", funcion3);
function funcion1() {
    document.getElementById("demo").innerHTML += "Ratón over!";
}

function funcion2() {
    document.getElementById("demo").innerHTML += "Has hecho click!";
}

function funcion3() {
    document.getElementById("demo").innerHTML += "Ratón out!";
}
</script>

</body>

Como ya he dicho muchas veces, el poder de JavaScript está en los eventos, en lo que se puede lograr de forma sencilla y con muy pocas líneas de código… pero todo esto lo vamos a descubrir en las siguientes entradas…