Diferença entre onmousemove e onmouseenter em JavaScript. Dica 20

Leia esta dica ouvindo o vídeo ou, assista ao vídeo:

Nesta dica conferimos a diferença entre os eventos onmousemove e onmouseenter em JavaScript.

O HTML inicial está com título, um documento JS e um CSS linkado. Duas divs onde já declarei os eventos onmousemove e onmouseenter, já informando as funções que iremos criar no JavaScript.

O documento JS está em branco e o CSS existe apenas para dar um formato visivel aos nossos elementos HTML (div).

div {
    width: 90%;
    height: 150px;
    margin: 0 0 3% 3%;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: gray;
}
h2 {
    background-color: white;
    font-size: 40px;
}

Como podemos ver em nosso CSS, nós utilizaremos tags h2, e utilizaremos essas tags dentro de cada div.

Evento onmousemove

O evento onmousemove ocorre sempre que o ponteiro do mouse se movimentar dentro de um elemento div.

        <div onmousemove="movaSobreOElemento()">
            <h2>Acionando o evento onmousemove:<br>
                <span id="mover">Passe o mouse</span>
            </h2>
        </div>

Como podemos ver, neste exemplo eu utilizei uma tag span e, iremos gerenciar o conteúdo dessa tag span a partir do seu id. Agora inserimos uma configuração quase idêntica dentro da nossa div onde está o evento onmouseenter.

        <div onmouseenter="entreNoElemento()">
            <h2>Acionando o evento onmouseenter:<br>
                <span id="entrar">entre com o mouse</span>
            </h2>
        </div>

Evento onmouseenter

O evento onmouseenter ocorre apenas quando o ponteiro do mouse entra no elemento div.

JavaScript

A primeira coisa que fazemos é criar as funções.

function movaSobreOElemento () {

}
function entreNoElemento () {

}

Lembrando que o nome dessas funções (neste exemplo) já foram informadas no código fonte inicial de HTML. Com essas funções vamos gerenciar o conteúdo das nossas tags span, enfatizando que já foi criado um id diferente para cada tag span. E como vamos gerenciar esse conteúdo a partir de seu id, utilizamos getElementById (já visto em dicas anteriores).

function movaSobreOElemento () {
    document.getElementById("mover")
}
function entreNoElemento () {
    document.getElementById("entrar")
}

Vamos alterar o que está escrito nessas tags, então utilizamos innerHTML (já visto em outras dicas).

function movaSobreOElemento () {
    document.getElementById("mover").innerHTML = ;
}
function entreNoElemento () {
    document.getElementById("entrar").innerHTML = ;
}

O que vamos escrever?

Nós vamos contar quantas vezes o evento é acionado e, para isso precisamos criar variáveis com valor inicial 0 (zero). Sugiro que as crie antes mesmo da declaração das funções.

var a = 0;
var b = 0;

Agora informamos que nosso innerHTML receberá o valor dessa variável mais 1. Assim, na primeira vez que o evento for acionado vai aparecer o número 1, depois o dois e assim consecutivamente.

function movaSobreOElemento () {
document.getElementById("mover").innerHTML = a+=1;
}
function entreNoElemento () {
document.getElementById("entrar").innerHTML = b+=1;
}

Código fonte HTML final

<!DOCTYPE html>
<html>
    <head>
        <title>Eventos em JavaScript, parte 03. Dica 20</title>
        <script src="eventos03.js"></script>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="eventos03.css">
    </head>
    <body>
        <h1>Enventos em JavaScript, parte 03. Dica 20</h1>

        <div onmousemove="movaSobreOElemento()">
            <h2>Acionando o evento onmousemove:<br>
                <span id="mover">Passe o mouse</span>
            </h2>
        </div>

        <div onmouseenter="entreNoElemento()">
            <h2>Acionando o evento onmouseenter:<br>
                <span id="entrar">entre com o mouse</span>
            </h2>
        </div>
</body>
</html>

Código fonte JavaScript final

var a = 0;
var b = 0;

function movaSobreOElemento () {
document.getElementById("mover").innerHTML = a+=1;
}
function entreNoElemento () {
document.getElementById("entrar").innerHTML = b+=1;
}

Dica

Na dica anterior nós vimos o evento onmouseover que por algum acaso é bem similar aos eventos apresentados nesta dica. O desafio é o seguinte, criar uma div e uma função para ver quando e como o evento onmouseover é acionado. Será mais interessante inserir este novo exemplo juntamente com o exemplo apresentado nesta dica.

Pergunta

Depois dessas 20 dicas de JavaScript, já estamos preparados para começar os exemplos práticos?

Espero que esta dica tenha sido útil.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.