Eventos onmouseover e onmouseout em JavaScript. Dica 19

Mais dois eventos em JavaScript relacionados ao mouse.

Nesta dica nós vemos um exemplo utilizando dois eventos do mouse, onmouseover e o evento onmouseout.

onmouseover

O evento onmouseover executa um JavaScript quando o ponteiro do mouse é movido para um elemento ou para um de seus filhos.

onmouseout

Já o evento onmouseout executa um JavaScript quando o ponteiro do mouse é movido para fora de um elemento ou de seus filhos.

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

O nosso documento HTML inicial é quase idêntico ao da dica anterior.

<!DOCTYPE html>
<html>
    <head>
        <title>Eventos em JavaScript, parte 01. Dica 19</title>
        <script src="eventos02.js"></script>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Enventos em JavaScript, parte 02. Dica 19</h1>
</body>
</html>

O documento .js inicial está em branco, e antes de darmos continuidade nós precisamos declarar um id em nosso HTML, pois vamos utiliza-lo para gerenciar o conteúdo da nossa tag h1.

<h1 id="exemplo">Enventos em JavaScript, parte 02. Dica 19</h1>

Eu vou utilizar os eventos onmouseover e onmouseout ao mesmo tempo (neste exemplo). Então vamos começar declarando o evento onmouseover.

<h1 id="exemplo" onmouseover="mouseOver();">Enventos em JavaScript, parte 02. Dica 19</h1>

Já declarei o evento onmouseover com a respectiva função JavaScript que ainda irei cria, agora faço a mesma "coisa" com o evento onmouseout, claro que com funções diferentes.

<h1 id="exemplo" onmouseover="mouseOver();" onmouseout="mouseOut();">Enventos em JavaScript, parte 02. Dica 19</h1>

O nosso HTML está pronto e com relação a criar funções em JavaScript, utilizar getElementById e innerHTML já foram exemplificados e explicados em dicas anteriores não irei entrar em detalhe com relação a isso. Então, o código fonte a seguir é o código fonte completo do nosso documento .js.

function mouseOver () {
document.getElementById("exemplo").innerHTML = "Eventos em JavaScript parte 01, dica 19";
}

function mouseOut () {
document.getElementById("exemplo").innerHTML = "Enventos em JS parte 01, dica 19";
}

Dica

Utilize o evento onmouseover sem o evento onmouseout e veja o reultado. Esta dica inteiramente baseada no exemplo que está na documentação da W3C.

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.