Los eventos del ratón (mouse) - Curso de JavaScript de cero a máster - Capítulo 56

Anteriormente, hice una pequeña introducción a los eventos. Puedes darle un pequeño repaso para recordar lo que son.

En este capítulo te mostraré como funcionan los eventos con el ratón (mouse) y de pantallas táctiles.

El evento onclick de JavaScript

Empecemos por algo básico, el evento onclick (ya lo vimos pero le damos un repaso rápido).

Partimos con la página html de los capítulos anteriores y un botón con estilos de BootStrap.

Al botón, le daremos un id botonDark

Página HTML

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
	<meta charset="utf-8">
	<title>Curso de JavaScript</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
	rel="stylesheet"
	integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
	crossorigin="anonymous">
	<link href="test.css" rel="stylesheet">
</head>
<body style="margin:1em">
	<button type="button" class="btn btn-dark" onclick="alerta()" 
	id="botonDark">Tócame</button>
</body>
<script src="test.js"></script>
</html>

Y en el código JS, vamos a utilizar una función super simple con un alert() solo para probar que el evento funciona. Una vez conozcas los eventos, solo tendrás que reemplazar este alert() por el código que quieras. Las posibilidades son infinitas.

Código JavaScript

Sencillamente, cuándo lo pulsemos aparecerá el alert().

let boton = document.getElementById("botonDark");

function alerta() {
    alert("Se ha activado el evento.");
}

El evento ondblclick

El evento ondblclick permite realizar un evento sobre algo haciendo doble click.

Etiquetas HTML

<button type="button" class="btn btn-dark" ondblclick="alerta()" 
id="botonDark">Tócame</button>
Palabra del lenguaje nº 91 encontrada.
El evento ondblclick proviene de las palabras on double click (podemos traducir como "al hacer doble click").

Este se corresponderá a la velocidad establecida en el sistema con el doble click. Por ejemplo, en Windows, si ponemos la velocidad de doble click más lenta, el evento nos responderá en nuestro equipo a un doble click más lento, por lo tanto, la velocidad del doble click es relativa a la configuración del usuario.

configuración del evento doble click de javascript

El evento onmousedown

El evento onmousedown activa un evento cuando se pulsa cualquier botón del ratón sobre un elemento que lleva el evento. Incluso, funciona con los botones de atrás y adelante y el de la rueda.

Palabra del lenguaje nº 92 encontrada.
El evento onmousedown sirve para cualquier botón del ratón.

Etiquetas HTML

<button type="button" class="btn btn-dark" onmousedown="alerta()" 
id="botonDark">Tócame</button>

El evento onmouseenter

El evento onmouseenter, es un evento que se activa en cuanto el cursor entra en el área de un elemento con dicho evento.

Palabra del lenguaje nº 93 encontrada.
El evento onmouseenter se activa al pasar el cursor.

Etiquetas HTML

<button type="button" class="btn btn-dark" onmouseenter="alerta()" 
id="botonDark">Vuela por encima de mí</button>

El evento onmouseleave

El evento onmouseleave hace todo lo contrario, se activa una vez se sale del área del elemento. Debes tener en cuenta que para que esto ocurra, primero se debe tener el cursor sobre el elemento.

Palabra del lenguaje nº 94 encontrada.
El evento onmouseleave se activa al salir del área afectada por un evento.

Etiquetas HTML

<button type="button" class="btn btn-dark" onmouseleave="alerta()" 
id="botonDark">Vuela por encima de mí</button>

El evento onmousemove

El evento onmousemove se activa cuando se mueve el cursor dentro del área del elemento.

Palabra del lenguaje nº 95 encontrada.
El evento onmousemove se activa al mover el cursor por el área afectada por un evento.

Etiquetas HTML

<button type="button" class="btn btn-dark" onmousemove="alerta()" 
id="botonDark">Vuela por encima de mí</button>

El evento onmouseover

El evento onmouseover, es un evento que se activa cuando el cursor entra en el área del elemento y el de sus sub elementos. Para que puedas apreciar la diferencia entre este tipo de evento y el de onmouseenter, he añadido cambiado algunas cosas.

Página HTML

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
	<meta charset="utf-8">
	<title>Curso de JavaScript</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
	rel="stylesheet"
	integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
	crossorigin="anonymous">
	<link href="test.css" rel="stylesheet">
</head>
<body style="margin:1em">
	<div class="card mx-auto" style="width: 18rem;">
		<img class="card-img-top" src="img/js.png" alt="Card image cap">
		<div class="card-body" id="accederCurso" onmouseover="alerta()">
		  <h5 class="card-title">Curso de JavaScript</h5>
		  <p class="card-text">Te doy la bienvenida a este nuevo
			curso de JavaScript, el cuál va a ser muy largo, 
			ya te lo aviso por si quieres echarte atrás.
			Si no tienes miedo a aprender y quieres dedicarte
			al desarrollo web, este curso seguro que es para tí.</p>
		</div>
	  </div>
</body>
<script src="test.js"></script>
</html>

Código JavaScript

let boton = document.getElementById("accederCurso");

function alerta () {
    alert("Lo siento, el curso no está disponible todavía.");
}

CSS

He añadido un estilo CSS de borde para que puedas apreciar los límites reales de los elementos, ya que estos no son visibles.

p, h5 {
    border: 1px solid #000;
}

Resultado en el navegador

Evento onmouseover JavaScript

Con el evento onmouseenter, entra el cursor en el <div> y hasta no salir de este, no vuelve a poder activarse. En cambio, con onmouseover, se va a activando cada vez que entramos en un sub elemento.

Palabra del lenguaje nº 96 encontrada.
El evento onmouseover se activa al entrar en el área del elemento y sus sub elementos.

El evento onmouseout

El evento onmouseout reacciona a la salida del cursor en elementos y sub elementos.

Palabra del lenguaje nº 97 encontrada.
El evento onmouseout es todo lo contrario a onmouseover.

Etiquetas HTML

<div class="card-body" id="accederCurso" onmouseout="alerta()">;

El evento onmouseup

El evento onmouseup reacciona un botón pulsado del ratón. Se activa cuando dejas de presionarlo.

Etiquetas HTML

<div class="card-body" id="accederCurso" onmouseup="alerta()">;
Palabra del lenguaje nº 98 encontrada.
El evento onmouseup se activa al soltar un botón cualquiera del ratón.

El evento oncontextmenu

Terminemos el capítulo viendo el evento oncontextmenu. Este tipo de evento, va a activarse al pulsar el click derecho sobre el elemento. Es decir, lo activa antes de mostrar el menú contextual del click derecho.

Etiquetas HTML

<div class="card-body" id="accederCurso" oncontextmenu="alerta()">;
Palabra del lenguaje nº 99 encontrada.
El evento oncontextmenu se activa al pulsar el botón derecho del ratón.