Curso de JavaScript desde cero

Manejar eventos de mouse con JavaScript

Capítulo 56: Los eventos del ratón (mouse)

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 

<!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.

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. 

<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. 
<button type="button" 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. 
<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. 
<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. 
<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. 

<!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>
let boton = document.getElementById("accederCurso");

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

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;
}
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 onmouseoutreacciona 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. 
<div class="card-body" id="accederCurso" onmouseout="alerta()">;

El evento onmouseup

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

<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. 

<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.

Ejercicios de JavaScript


Estas preguntas van a ser tipo test. Intenta contestarlas sin mirar el temario, así verás cuantos eventos recuerdas.
  1. El evento se activa al mover el cursor dentro del elemento.
    1. onclick
    2. onmousemove
    3. onmouseenter
    4. onmouseover
  2. El evento se activa al entrar dentro del elemento sin tener en cuenta los sub elementos.
    1. onclick
    2. onmousemove
    3. onmouseenter
    4. onmouseover
  3. El evento se activa al hacer click en el elemento con cualquier botón del ratón.
    1. onclick
    2. onmousemove
    3. onmouseup
    4. onmousedown
  4. El evento se activa al hacer doble click en el elemento.
    1. onclick
    2. ondbclick
    3. ondblclick
    4. ondbllclick
  5. El evento se activa al hacer click derecho en el elemento.
    1. ondblclick
    2. onmouseright
    3. oncontextmouse
    4. oncontextmenu
  6. El evento se activa al hacer click (izquierdo) en el elemento.
    1. onclick
    2. onmousemove
    3. onmouseup
    4. onmousedown
  7. El evento se activa al salir del área afectada por un evento.
    1. onmouseout
    2. onmouseexit
    3. onmouseleave
    4. onmousedown
  8. El evento se activa al entrar en el área del elemento y sus sub elementos.
    1. onmouseover
    2. onmouseenter
    3. onmouseleave
    4. onmouseup
  9. El evento se activa al salir del área del elemento y sus sub elementos.
    1. onmouseover
    2. onmouseleave
    3. onmouseout
    4. onmousedown
  10. El evento se activa al soltar un botón cualquiera del ratón sobre el elemento afectado.
    1. onmouseon
    2. onmousein
    3. onmouseout
    4. onmouseup

La solución la encontrarás aquí: Haz click aquí.

Comentarios

Si te quedan dudas sobre el temario, sobre JavaScript o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.

Twitter

Programación Fácil YouTube

Suscríbete

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.