 |
Eventos mousedown ,mouseup (DOM)
Eventos mousedown ,mouseup (DOM)
El evento mousedown se activa cuando el botón de un dispositivo apuntador (usualmente el botón de un ratón) es presionado en un elemento mientras que el evento mouseup se dispara cuando se suelta un botón de un dispositivo señalador (como un mouse o panel táctil) mientras el puntero se encuentra dentro de él. mouseup los eventos son el contrapunto de los mousedown eventos.
Recordemos que el evento mousedown se dispara cuando presionamos alguno de los botones del mouse y el evento mouseup cuando dejamos de presionar el botón.
Resolveremos el mismo problema que habíamos realizado con el modelo antiguo de captura de eventos.
Implementemos una página que contenga una tabla con una fila y dos columna, al presionar el botón del mouse dentro de una casilla de la tabla cambiar el color de fondo de la misma por amarillo y cuando levantamos el dedo del mouse regresar a color blanco la casilla.
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script >
window.addEventListener('load',inicializarEventos,false);
function inicializarEventos(e)
{
var r1=document.getElementById('recu1');
r1.addEventListener('mousedown',presionar,false);
r1.addEventListener('mouseup',soltar,false);
var r2=document.getElementById('recu2');
r2.addEventListener('mousedown',presionar,false);
r2.addEventListener('mouseup',soltar,false);
}
function presionar(e)
{
var objeto=e.target;
objeto.style.backgroundColor='#ffff00';
}
function soltar(e)
{
var objeto=e.target;
objeto.style.backgroundColor='#ffffff';
}
</script>
</head>
<body>
<table border="1">
<tr>
<td id="recu1">Recuadro 1</td><td id="recu2">Recuadro 2</td>
</tr>
</table>
</body>
</html>
El código javascript es:
window.addEventListener('load',inicializarEventos,false);
function inicializarEventos(e)
{
var r1=document.getElementById('recu1');
r1.addEventListener('mousedown',presionar,false);
r1.addEventListener('mouseup',soltar,false);
var r2=document.getElementById('recu2');
r2.addEventListener('mousedown',presionar,false);
r2.addEventListener('mouseup',soltar,false);
}
function presionar(e)
{
var objeto=e.target;
objeto.style.backgroundColor='#ffff00';
}
function soltar(e)
{
var objeto=e.target;
objeto.style.backgroundColor='#ffffff';
}
En la función inicializarEventos obtenemos la referencia a cada celda de la tabla y le asignamos los dos eventos:
var r1=document.getElementById('recu1');
r1.addEventListener('mousedown',presionar,false);
r1.addEventListener('mouseup',soltar,false);