Aparte de onclick y ondblclick hay otros eventos de mouse 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. El evento mouseover se dispara cuando ingresamos con la flecha del mouse a un control HTML que tiene registrado dicho evento, y mouseout se dispara cuando sacamos la flecha del mouse del control.

Mousedown

El evento mousedown ocurre cuando un usuario presiona un botón del mouse sobre un elemento. Se puede utilizar en todos los elementos HTML, EXCEPTO: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title>

Consejo: el orden de los eventos relacionados con el evento onmousedown (para el botón izquierdo / medio del mouse)

Mouseup

El evento mouseup se activa cuando se suelta un botón de un dispositivo señalador (como un mouse o trackpad) mientras el puntero se encuentra dentro de él.
El evento mouseup ocurre cuando un usuario suelta un botón del mouse sobre un elemento. Se puede utilizar en todos los elementos HTML, EXCEPTO: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title>
El evento mouseup es el contrapunto del evento mousedown.

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>
addEventListener('DOMContentLoaded',inicio,false);

function inicio()
{
document.getElementById('recuadro1').addEventListener('mousedown',presion1,false);
document.getElementById('recuadro1').addEventListener('mouseup',presion3,true);
document.getElementById('recuadro2').addEventListener('mouseup',presion2,false);
}

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ó';
}
function presion3()
{
document.getElementById('recuadro1').innerHTML='Se presiono el mouse y se soltó';
}
</script>

</body>
</html>

Ver ejemplo anterior

En la función inicio 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:

function inicio()
{
document.getElementById('recuadro1').addEventListener('mousedown',presion1,false);
document.getElementById('recuadro1').addEventListener('mouseup',presion3,true);
document.getElementById('recuadro2').addEventListener('mouseup',presion2,false);
}

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ó';
}
function presion3()
{
document.getElementById('recuadro1').innerHTML='Se presiono el mouse y 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ó';
}

Mouseover

El evento mouseover se dispara cuando se usa un dispositivo señalador (como un mouse o trackpad) para mover el cursor sobre el elemento o uno de sus elementos secundarios.

Se puede utilizar en todos los elementos HTML, EXCEPTO: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>,

Consejo: este evento se usa a menudo junto con el evento onmouseout , que ocurre cuando un usuario mueve el puntero del mouse fuera de un elemento.

Mouseout

El evento mouseout se dispara cuando se usa un dispositivo señalador (generalmente un mouse) para mover el cursor de modo que ya no esté contenido dentro del elemento o de uno de sus elementos secundarios. mouseout , también se entrega a un elemento si el cursor entra en un elemento secundario, porque el elemento secundario oscurece el área visible del elemento. Se puede utilizar en todos los elementos HTML, EXCEPTO: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>,

Es muy común utilizar estos dos eventos para producir cambios en el elemento HTML cuando ingresamos la flecha del mouse y retornar al estado anterior cuando se saca la flecha del mouse.

Es importante hacer notar que estos eventos se disparan sin tener que presionar la flecha del mouse, solo con desplazarla al interior del elemento HTML se dispara el evento mouseover.

Implementaremos un pequeño ejemplo que muestre un cuadrado, el mismo mostrará los bordes redondeados cuando ingresemos la flecha del mouse en su interior y volverá al estado anterior cuando retiremos la flecha.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>
<div style="width:200px;height:200px;background:#0000ff" id="recuadro1">
</div>

<script>
addEventListener('DOMContentLoaded',inicio,false);

function inicio()
{
document.getElementById('recuadro1').addEventListener('mouseover',entrada,false);
document.getElementById('recuadro1').addEventListener('mouseout',salida,false);
}

function entrada()
{
document.getElementById('recuadro1').style.borderRadius='30px';
document.getElementById('recuadro1').style.background='red';
}

function salida() {
document.getElementById('recuadro1').style.borderRadius='0px';
document.getElementById('recuadro1').style.background='blue';
}
</script>

</body>
</html>

Ver ejemplo anterior

Definimos en el HTML un div de color azul de 200 píxeles de lado:

En la función inicio registramos los eventos mouseover y mouseout:

function inicio()
{
document.getElementById('recuadro1').addEventListener('mouseover',entrada,false);
document.getElementById('recuadro1').addEventListener('mouseout',salida,false);
}

El método entrada se ejecuta cuando ingresemos la flecha del mouse en el div llamado recuadro1 y procedemos en el mismo a modificar la propiedad borderRadius del estilo de este elemento (indicamos que el redondeo de los vértices del div sea de 30 píxeles y el color de fondo rojo):

function entrada()
{
document.getElementById('recuadro1').style.borderRadius='30px';
document.getElementById('recuadro1').style.background='red';
}

Cuando sale la flecha del mouse del div se ejecuta la función salida donde fijamos con 0 la propiedad borderRadius y color de fondo azul:

function salida() {
document.getElementById('recuadro1').style.borderRadius='0px';
document.getElementById('recuadro1').style.background='blue';
}

Mousemove

El evento mousemove se dispara cada vez que desplazamos la flecha del mouse sobre el elemento HTML que esta escuchando este evento.

Este tipo de evento hay que utilizarlo con cuidado ya que puede sobrecargar el navegador, ya que este evento se dispara cada vez que desplazamos aunque sea solo un pixel.

Implementaremos para ver su funcionamiento una página que muestre un div que capture el evento mousemove y como acción incrementaremos un contador para saber la cantidad de veces que se disparó el evento.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<div style="width:200px;height:200px;background:gold" id="recuadro1">
</div>
<p id="cantidad">0</p>

<script>
addEventListener('DOMContentLoaded',inicio,false);

function inicio()
{
document.getElementById('recuadro1').addEventListener('mousemove',mover,false);
}

function mover()
{
var x=parseInt(document.getElementById('cantidad').innerHTML);
x++;
document.getElementById('cantidad').innerHTML=x;
}
</script>

</body>
</html>

Ver ejemplo anterior

Disponemos un div y un párrafo donde mostramos el número 0:

Capturamos el evento mousemove para el div:

function inicio() {
document.getElementById('recuadro1').addEventListener('mousemove',mover,false);
}

Cada vez que se emite el evento mousemove se llama el método mover donde extraemos el valor del párrafo, lo incrementamos en uno y lo volvemos a actualizar:

function mover() {
var x=parseInt(document.getElementById('cantidad').innerHTML);
x++;
document.getElementById('cantidad').innerHTML=x;
}

Este ejemplo demuestra la diferencia entre onmousemove, onmouseenter y onmouseover.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
float: left;
padding: 30px;
text-align: center;
background-color: lightgray;
}
#demo11{
background-color: green;
}
p {
background-color: white;
}
</style>
</head>
<body>
<h3>Este ejemplo demuestra la diferencia entre onmousemove, onmouseenter y onmouseover..</h3>
<p >El evento <b>onmousemove</b> ocurre cada vez que el puntero del mouse se mueve sobre el elemento div.</p>
<p>El evento <b>mouseenter</b> solo ocurre cuando el puntero del mouse ingresa al elemento div.</p>
<p>El evento <b>mouseover</b> ocurre cuando el puntero del mouse ingresa al elemento div y sus elementos secundarios (p y span)..</p>
<div onmousemove="myMoveFunction()" style="background-color: lightgreen; ">
<p>onmousemove: <br> <span id="demo">El mouse esta sobre mi!</span></p>
</div>
<div onmouseenter="myEnterFunction()" style="background-color: gold; ">
<p>onmouseenter: <br> <span id="demo2">El mouse esta sobre mi!</span></p>
</div>
<div onmouseover="myOverFunction()" style="background-color: salmon; ">
<p>onmouseover: <br> <span id="demo3">El mouse esta sobre mi!</span></p>
</div>
<script>
var x = 0;
var y = 0;
var z = 0;

function myMoveFunction() {
document.getElementById("demo").innerHTML = z+=1;
}

function myEnterFunction() {
document.getElementById("demo2").innerHTML = x+=1;
}

function myOverFunction() {
document.getElementById("demo3").innerHTML = y+=1;
}
</script>
</body>
</html>

Ver ejemplo anterior