DOM_eventos.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eventos DOM</title>
    <style>
        #area{
            font: normal 20pt Arial;
            background: seagreen;
            color: white;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="area">
<!--CHAMANDO AS FUNÇÕES NO HTML:-->
        <!-- onclick="clicar()" 
            onmouseenter="entrar()" 
            onmouseout="sair()"-->

        Interaja...
    </div>

    <script>
        var a = document.getElementById("area")
//EXISTE UMA OUTRA FORMA DE FAZER AO INVÉS DE CHAMAR
//AS FUNÇÕES NO HTML:
        a.addEventListener('click', clicar)
        a.addEventListener('mouseenter', entrar)
        a.addEventListener('mouseout', sair)

        function clicar(){          
            a.innerText = "Clicou!"
            a.style.background = "red"
        }
        function entrar(){
            a.innerText = "Entrou"
        }
        function sair(){
            a.innerText = "Saiu"
            a.style.background = "seagreen"
        }
    </script>
</body>
</html>