Bienvenidos sean a este post, hoy hablaremos sobre dos eventos que estan relacionados al mouse y al cursor en pantalla, en realidad estos dos eventos monitorean cuando el cursor esta o no esta sobre el elemento con el «listener» para estos eventos.
Del primero que hablaremos es onMouseOver el cual se encargara de monitorear que el cursor este sobre el elemento y onMouseOut se encargara de monitorear si el cursor saldra del elemento, para entender mejor esto pasemos al siguiente ejemplo y para ello modificaremos el codigo que vinimos trabajando hasta ahora:
<html>
<head>
<title>Pagina de eventos de Formularios</title>
<script language="javascript">
<!--
function form_submit()
{
var usuario=document.miForm.usuario.value;
var nombre=document.miForm.nombre.value;
var apellido=document.miForm.apellido.value;
var texto; texto="Usuario: " + usuario + "\n";
texto+="Nombre: " + nombre + "\n";
texto+="Apellido: " + apellido + "\n";
texto+="Sexo: " + document.miForm.sexo.value;
alert(texto);
}
function form_reset()
{
alert("Se hizo el reseteo del formulario");
}
function form_change(A)
{
switch(A)
{
case "uno":
alert("Se modifico el campo usuario");
break;
case "dos":
alert(document.miForm.sexo.value);
break;
}
}
function form_focus(A)
{
var foco=document.getElementById("foco");
foco.innerHTML+="Se selecciono al campo " + A;
}
function form_blur(A)
{
var foco=document.getElementById("foco");
foco.innerHTML="Se deselecciono al campo " + A + "<br>-->";
}
function Cursores(A,B)
{
var foco=document.getElementById("foco");
switch(A)
{
case "over":
foco.innerHTML="Estoy sobre " + B;
break;
case "out":
foco.innerHTML="Me fui de " + B;
break;
}
}
//-->
</script>
</head>
<body>
<form name="miForm" method="post" action="" onSubmit="form_submit()" onReset="form_reset()">
<table border="0" cellpadding="0" cellspacing="2" width="400">
<tr>
<td width="50%"> Ingrese un usuario:</td>
<td width="50%">
<input type="text" name="usuario" id="usuario" value="" onChange="form_change('uno');" onFocus="form_focus('usuario');" onBlur="form_blur('usuario')" onMouseOver="Cursores('over','usuario')" onMouseOut="Cursores('out','usuario')">
</td>
</tr>
<tr>
<td> Ingrese el nombre:</td>
<td>
<input type="text" name="nombre" id="nombre" value="" onFocus="form_focus('nombre');" onBlur="form_blur('nombre')" onMouseOver="Cursores('over','nombre')" onMouseOut="Cursores('out','nombre')">
</td>
</tr>
<tr>
<td> Ingrese el apellido:</td>
<td>
<input type="text" name="apellido" id="apellido" value="" onFocus="form_focus('apellido');" onBlur="form_blur('apellido')" onMouseOver="Cursores('over','apellido')" onMouseOut="Cursores('out','apellido')">
</td>
</tr>
<tr>
<td> Selecciona el sexo:</td>
<td>
<select name="sexo" id="sexo" onChange="form_change('dos');" onFocus="form_focus('sexo');" onBlur="form_blur('sexo')" onMouseOver="Cursores('over','sexo')" onMouseOut="Cursores('out','sexo')">
<option value="">--</option>
<option value="M">Masculino</option>
<option value="F">Femenino</option>
</select>
</td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td align="right"><input type="submit" value="Subir" onMouseOver="Cursores('over','subir')" onMouseOut="Cursores('out','subir')"> </td>
<td> <input type="reset" value="Resetear" onMouseOver="Cursores('over','resetear')" onMouseOut="Cursores('out','resetear')"></td>
</tr>
</table>
</form>
<div name="foco" id="foco"></div>
</body>
</html>En este caso al igual que en los posts anteriores nosotros agregamos una sentencia que apunta a una funcion para identificar el evento, veamos uno como ejemplo de las sentencias agregadas:
onMouseOver="Cursores('over','sexo')" onMouseOut="Cursores('out','sexo')"
En este tendremos los dos eventos, onMouseOver y onMouseOut los cuales se encargaran de monitorear cuando esta sobre y sale del elemento respectivamente, en ambos casos llamaremos a una funcion la cual es Cursores y por medio de esta enviaremos dos valores, uno que identificara al evento y otro el nombre del campo desde donde es invocado, pasemos a ver la nueva funcion en el Javascript.
En la seccion de codigo tendremos la siguiente funcion:
function Cursores(A,B)
{
var foco=document.getElementById("foco");
switch(A)
{
case "over":
foco.innerHTML="Estoy sobre " + B;
break;
case "out":
foco.innerHTML="Me fui de " + B;
break;
}
}Para esta funcion tendremos dos variables para recibir informacion, nuestro primer paso sera crear un objeto relacionado al DIV llamado foco del codigo HTML, despues tendremos un switch que chequeara el valor de A, en el caso de ser over mostrara un mensaje diciendo sobre que elemento esta gracias a B y en el caso de out dira de cual elemento salio tambien gracias a B, grabemos y probemos donde deberan obtener una salida como se ve en el siguiente video
Si observan el video veran como nos muestra las notificaciones sin necesidad de tocar o hacer otra accion sobre cada elemento, simplemente con la accion de posar el cursor o sacar el cursor de dicho elemento, como pueden ver una utilidad muy practica seria notificarle al usuario por medio de un mensaje que debe ir en el campo o cual es su funcion pero tambien vean que esto lo podemos aplicar a cualquier elemento, p.e los botones.
En resumen, hoy hemos visto dos eventos de mouse, son los eventos mas utilizados y practicos, hemos visto como actuan, hemos visto como aplicarlos y un ejemplo donde se puso en practica, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.
Tambien podes donar
Es para mantenimiento del sitio, gracias!
$1.50
El blog de Tinchicus 