#10 Eventos DOM (Muito bom!)

`${Eventos DOM}`

Adicionando "observadores" de eventos:

Basta usar o comando addEventListener('evento', function) o primeiro argumento é um evento, como 'click', 'mouseout' etc. Já o segundo é uma função

Alguns desses eventos podem ser encontrados na MDN

Event reference | MDN

Código desenvolvido sem atribuição de variáveis

document.querySelector('div#area').addEventListener('click', (e) => {
            e.target.innerText = 'clicou'
        })

Código praticado na aula com atribuição de variáveis

var a = window.document.querySelector('div#area')
a.addEventListener('click', clicar)
a.addEventListener('mouseenter', entrar)
a.addEventListener('mouseout', sair)

function clicar() {

    //a.style.background = 'red'

    a.innerText = "clicou"

}

function entrar() {

    a.innerText = "entrou"
}

function sair() {

    a.innerText = "saiu"

}

Outra forma é adicionar direto na tag HTML, sem Listener

<div id="area" onclick='clicar()' onmouseenter="entrar()" onmouseout="sair()">
        Interaja..
    </div>

Na segunda atividade da aula fiz a seguinte brincadeira

Criei um script para selecionar as cores e salvar em variáveis

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font: normal 18pt Arial;
        }

        input {
            font: normal 18pt Arial;
            width: 100px;
        }

        div#res {
            margin-top: 20px;
        }

    </style>
</head>
<body>
    <h1>Somando Valores</h1>
    <input type="color" name="color1" id="color1"> +
    <input type="color" name="color2" id="color2">
    <input type="button" id="botao" value="Salvar">
    <div class="res" >cor1</div> <div class="res" >cor2</div>
    
    <script>

        // Script aqui
    </script>
</body>
</html>

window.addEventListener('DOMContentLoaded', () => {

	document.querySelector("input#color1").value = '#033dfc'
	document.querySelector("input#color2").value = '#be03fc'

 })

document.querySelector('input#botao').addEventListener('click', () => {

	const color1 = document.querySelector("input#color1")
	const color2 = document.querySelector("input#color2")
	const res = document.querySelectorAll("div.res")
	
	
	res[0].style.color = color1.value
	res[1].style.color = color2.value

})