Conceptos de DHTML

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.

pagina.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <table border="1">
        <tr>
            <td id="recu1">Recuadro 1</td>
            <td id="recu2">Recuadro 2</td>
        </tr>
    </table>
    <script src="funciones.js"></script>
</body>

</html>

funciones.js

  let r1 = document.getElementById('recu1')
  r1.addEventListener('mousedown', presionar)
  r1.addEventListener('mouseup', soltar)

  let r2 = document.getElementById('recu2')
  r2.addEventListener('mousedown', presionar)
  r2.addEventListener('mouseup', soltar)

  function presionar(e) {
      e.target.style.backgroundColor = '#ffff00'
  }

  function soltar(e) {
      e.target.style.backgroundColor = '#ffffff'
  }

Debemos registrar los dos eventos 'mousedown' y 'mouseup' para cada celda de la tabla:

  let r1 = document.getElementById('recu1')
  r1.addEventListener('mousedown', presionar)
  r1.addEventListener('mouseup', soltar)

37 - Eventos mousedown ,mouseup (DOM)

Retornar