Los manejadores de eventos en Javascript

  • Por
Lista de los manejadores de eventos más habituales del lenguaje Javascript, junto con una descripción de cada uno.

Ahora vamos a ver una lista de los manejadores de eventos que hay disponibles en Javascript, ofreciendo una pequeña descripción de cada uno.

Si queremos saber previamente qué es un evento y como se tratan en Javascript, podemos consultar el artículo anterior del manual: Los eventos en Javascript

Nota: Estos manejadores de eventos son los más comunes, presentes en Javascript 1.2 de Netscape Navigator. Existen otros manejadores que también son muy interesantes y veremos más adelante en capítulos de temas avanzados de eventos.

La lista de manejadores de eventos contiene el nombre del manejador en negrita, su descripción y finalmente la versión de Javascript que incorporó dicho manejador.

onabort

Este evento se produce cuando un usuario detiene la carga de una imagen, ya sea porque detiene la carga de la página o porque realiza una acción que la detiene, como por ejemplo irse de la página.
Javascript 1.1

onblur

Se desata un evento onblur cuando un elemento pierde el foco de la aplicación. El foco de la aplicación es el lugar donde está situado el cursor, por ejemplo puede estar situado sobre un campo de texto, una página, un botón o cualquier otro elemento.
Javascript 1.0

onchange

Se desata este evento cuando cambia el estado de un elemento de formulario, en ocasiones no se produce hasta que el usuario retira el foco de la aplicación del elemento. Javascript 1.0
Javascript 1.0

onclick

Se produce cuando se da una pulsación o clic al botón del ratón sobre un elemento de la página, generalmente un botón o un enlace.
Javascript 1.0

ondragdrop

Se produce cuando un usuario suelta algo que había arrastrado sobre la página web.
Javascript 1.2

onerror

Se produce cuando no se puede cargar un documento o una imagen y esta queda rota.
Javascript 1.1

onfocus

El evento onfocus es lo contrario de onblur. Se produce cuando un elemento de la página o la ventana ganan el foco de la aplicación.
Javascript 1.0

onkeydown

Este evento se produce en el instante que un usuario presiona una tecla, independientemente que la suelte o no. Se produce en el momento de la pulsación.
Javascript 1.2

onkeypress

Ocurre un evento onkeypress cuando el usuario deja pulsada una tecla un tiempo determinado. Antes de este evento se produce un onkeydown en el momento que se pulsa la tecla..
Javascript 1.2

onkeyup

Se produce cuando el usuario deja de apretar una tecla. Se produce en el momento que se libera la tecla.
Javascript 1.2

onload

Este evento se desata cuando la página, o en Javascript 1.1 las imágenes, ha terminado de cargarse.
Javascript 1.0

onmousedown

Se produce el evento onmousedown cuando el uuario pulsa sobre un elemento de la página. onmousedown se produce en el momento de pulsar el botón, se suelte o no.
Javascript 1.2

onmousemove

Se produce cuando el ratón se mueve por la página.
Javascript 1.2

onmouseout

Se desata un evento onmuoseout cuando el puntero del ratón sale del área ocupada por un elemento de la página.
Javascript 1.1

onmouseover

Este evento se desata cuando el puntero del ratón entra en el área ocupada por un eolemento de la página.
Javascript 1.0

onmouseup

Este evento se produce en el momento que el usuario suelta el botón del ratón, que previamente había pulsado.
Javascript 1.2

onmove

Evento que se ejecuta cuando se mueve la ventana del navegador, o un frame.
Javascript 1.2

onresize

Evento que se produce cuando se redimensiona la ventana del navegador, o el frame, en caso de que la página los tenga.
Javascript 1.2

onreset

Este evento está asociado a los formularios y se desata en el momento que un usuario hace clic en el botón de reset de un formulario.
Javascript 1.1

onselect

Se ejecuta cuando un usuario realiza una selección de un elemento de un formulario.
Javascript 1.0

onsubmit

Ocurre cuando el visitante apreta sobre el botón de enviar el formulario. Se ejecuta antes del envío propiamente dicho.
Javascript 1.0

onunload

Al abandonar una página, ya sea porque se pulse sobre un enlace que nos lleve a otra página o porque se cierre la ventana del navegador, se ejecuta el evento onunload.
Javascript 1.0

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

paco

07/6/2013
ejemplos
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>validar-nombre</title>
<script type="text/javascript">
function f(){
var patron= new RegExp("^$");
if(patron.test(formu.nombre.value)){
ok
}else{
no
}
}
</script>
</head>
<body>
<form name="formu" action="" onsubmit="f()">
<input name="nombre" type="text" value="" />
<input type="button" value="Validar" onclick="f()" />
</form>
</body>
</html>
-----------------------------------------------------------------------------
<!DOCTYPE html>
<html >
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body >
<script type="text/javascript">
function func1(e,boton) {

if(boton.style.backgroundColor=="red")
{
boton.style.backgroundColor="";
} else {
boton.style.backgroundColor="red";
}
}

function func2(e){
document.getElementById('x').value=e.clientX;

document.getElementById('y').value=e.clientY;
}
</script>
<table border="1" onmousemove="func2(event)">
<tr>
<th>coordenadas</th>
<th><input id="x" type="text" size="20" value="" /></th>
<th><input id="y" type="text" value="" /></th>
</tr>
<tr>
<td><input type="submit" value="1" size="20" onclick="func1(event,this);"/></td>
<td><input type="submit" value="2" onclick="func1(event,this);"/></td>
<td><input type="submit" value="3" onclick="func1(event,this);"/></td>
</tr>


<tr>
<td><input type="submit" value="4" size="20" onclick="func1(event,this);"/></td>
<td><input type="submit" value="5" onclick="func1(event,this);"/></td>
<td><input type="submit" value="6" onclick="func1(event,this);"/></td>
</tr>
<tr>
<td><input type="submit" value="7" size='20' onclick="func1(event,this);"/></td>
<td><input type="submit" value="8" onclick="func1(event,this);"/></td>
<td><input type="submit" value="9" onclick="func1(event,this);"/></td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------------------------------------------
<html>
<head>
<title>Equipos</title>
<script type="text/javascript">
var equipos=new Array("a","b","c","d");
var enfrentamientos=new Array(new Array(0,1,2,3),new Array(2,0,3,1),new Array(0,3,1,2),new Array(1,0,3,2),new Array(0,2,1,3),new Array(3,0,2,1));

function rellena_origen(){
var origen=f1.origen;
origen.multiple=true;
for(var i = 1; i <= (equipos.length); i++) {
origen.options[i]=new Option(i);
}
f1.destino.disabled=true;
}

function limpia_destino(){
var destino=f1.destino;
while(destino.firstChild) {
destino.removeChild(destino.firstChild);
}
}

function rellena_destino(){
limpia_destino();
var origen=f1.origen;
var destino=f1.destino;
for(var i=1;i<origen.options.length;i++){
if(origen.options[i].selected){
for(var p=0;p<enfrentamientos[origen.options[i].value].length;p=p+2){
destino.options[destino.options.length]=new Option(equipos[enfrentamientos[origen.options[i].value][p]]+' - '+equipos[enfrentamientos[origen.options[i].value][p+1]]);
}
}
}
if(destino.options.length==0){
destino.disabled=true;
}else{
destino.disabled=false;
}
}

</script>
</head>
<body onload="rellena_origen()">
<form name="f1">
<fieldset>
<legend></legend>
<label for="origen">Seleccione</label>
<select name="origen" onchange="rellena_destino()" >
</select>
<label for="destino">Seleccione</label>
<select name="destino">
</select>
</fieldset>
</form>
</body>
</html>

paco

07/6/2013
ejemplo
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
valores=new Array('Meira','Courel','Lugo','Rábade','Abadín');
codigo=new Array('27240','27560','27415','27150','27102');
function rellena_select(){
for(var i=0;i<valores.length;i++){
f2.origen.add(new Option(valores[i],codigo[i]));
}
}
function funcion (org) {
var eleccion=org.options[org.selectedIndex].text;
borrar();
for(var i=0;i<valores.length;i++){

if(valores[i]!=eleccion){
f2.destino.add(new Option(valores[i],codigo[i]));
}
}

}
function borrar (){

while(f2.destino.firstChild){
f2.destino.removeChild(f2.destino.firstChild);
}
}
function funcion2 (){
f2.boton.disabled=false;

}
function funcion3 (){
var nombreorigen="";
var codigoorigen="";
var nombredestino="";
var codigodestino="";
var opcion="";
for(var i=0;i<f2.origen.options.length;i++){
if(f2.origen[i].selected==true){
nombreorigen=f2.origen[i].text;
codigoorigen=f2.origen[i].value;
}
}
for(var i=0;i<f2.destino.options.length;i++){
if(f2.destino[i].selected==true){
nombredestino=f2.destino[i].text;
codigodestino=f2.destino[i].value;
}
}
opcion="A cidade elexida como orixen é: "+nombreorigen+" e o seu código postal é: "+codigoorigen+" "+"A cidade elexida como destino é: "+nombredestino+" e o seu código postal é: "+codigodestino;
alert(opcion);
}



</script>
</head>
<body onload="rellena_select()">

<form name="f2" action="formulario2.html" method="post">
<fieldset>
<legend> Seleccione Origen y Destino</legend>
<h2>ORIGEN<select id="origen" name="origen" onchange="funcion(this)">
<option onclick="borrar()">Selecciona un lugar de origen</option>
</select>
DESTINO<select id="destino" name="destino" onclick="funcion2()">

</select>
<input type="button" value="validar" name="boton" disabled="disabled" onclick="funcion3()"/> </h2>
</fieldset>
</form>
</body>
</html>

patricia

15/9/2015
Videos
Hola Miguel , están muy bien tus vídeos donde explicas temas de Javascript
pero lo que esta grave es que invites a personas que no saben hablar ni explicar, te recomiendo si si vas a explicar como trabajar con Javascript, un ejemplo seas tu solo, pues tu lo explicas muy bien, he de decirtelo, los demás solo entorpecen tu trabajo.
Saludos