Listado completo de tutoriales

Eventos: mousedown y mouseup

Otros dos eventos relacionados con el mouse son mousedown y mouseup.
El evento mousedown se dispara inmediatamente luego que presionamos con la flecha del mouse un elemento HTML que tiene registrado dicho evento.
El evento mouseup se ejecuta luego de soltar el botón del mouse estando dentro del control HTML.

Para probar estos eventos implementaremos una página que contenga dos div, a un div le asignaremos el evento mousedown y al otro el evento mouseup. Cuando ocurra el evento procederemos a cambiar el texto contenido dentro del div.

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <p>Presione el recuadro amarillo sin soltar el botón del mouse.</p>
    <div style="width:200px;height:200px;background:#ffff00" id="recuadro1">
    </div>
    <p>Presione el recuadro naranja y suelte el botón del mouse.</p>
    <div style="width:200px;height:200px;background:#ff5500" id="recuadro2">
    </div>

    <script>
        document.getElementById('recuadro1').addEventListener('mousedown', presion1);
        document.getElementById('recuadro2').addEventListener('mouseup', presion2);

        function presion1() {
            document.getElementById('recuadro1').innerHTML = 'Se presione el mouse y todavía no se soltó';
        }

        function presion2() {
            document.getElementById('recuadro2').innerHTML = 'Se presione el mouse y se soltó';
        }
    </script>

</body>

</html>

Registramos los eventos mousedown y mouseup para los dos div, al div recuadro1 procedemos a registrar el evento mousedown y al div recuadro2 procedemos a registrar el evento mouseup:

        document.getElementById('recuadro1').addEventListener('mousedown', presion1);
        document.getElementById('recuadro2').addEventListener('mouseup', presion2);

El método que se dispara para el primer div procedemos a modificar todo el contenido del div accediendo a la propiedad innerHTML:

        function presion1() {
            document.getElementById('recuadro1').innerHTML = 'Se presione el mouse y todavía no se soltó';
        }

De forma similar codificamos la función que modifica el segundo div:

        function presion2() {
            document.getElementById('recuadro2').innerHTML = 'Se presione el mouse y se soltó';
        }

Retornar