<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Eventos #01</title>
<link rel='stylesheet' href='css/estilo.css'>
<script src='js/jquery.js'></script>
<style>
input {
font-size: 2em;
}
</style>
</head>
<body class='conteudo exercicio'>
<h1>Eventos #01</h1>
<div id='posicao'></div>
<div id='cliques'>Cliques: 0</div>
<input type="text" placeholder="Cor de Background">
<script>
// função para mostrar os movimentos do mouse
function mostrarPosicaoMouse(e){
$('#posicao').html(`x: ${e.clientX} y: ${e.clientY}`)
}
//registra os eventos jQuery
$('body').on('mousemove', mostrarPosicaoMouse)
//seleciona o elemento e para o mouse no quadro
$('#posicao').mouseover(e => {
$('body').off('mousemove', mostrarPosicaoMouse)// para a posição no quadro
})
//começa novamente a mostar a posição do mouse
$('#posicao').mouseleave(e => {
$('body').on('mousemove',mostrarPosicaoMouse)
//$('#body').mousemove(mostrarPosicaoMouse)
})
let cliques = 0
$('body').click(e => {
$('#cliques').html(`Cliques: ${++cliques}`)
})
const Background = $('body').css('background-color')
$('input').keyup(function (e) {
const valor = $(this).val()
//pode ter de um dígito, de a até um f (minusculo), //e A até F (maíusculo), de 3 á 6 dígitos
if (valor.match(/#[\da-fA-F]{3,6}/)) {
$('body').css('background-color', valor)
}else{
$('body').css('background-color', BackgroundOriginal)
}
})
</script>
</body>
