Como funciona o evento tela.offsetLeft??

Olá, Joicilene! Tudo bem?

Antes de tudo, peço desculpas pela demora em retornar!

Para que possamos descobrir a posição do mouse após um click, podemos coletar algumas informações que são geradas pelo evento onclick.

Durante o curso, foi desenvolvido um código que chama uma função assim que a tela for clicada, veja abaixo:

// código anterior omitido

function desenhaCirculo(evento) {
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

    pincel.fillStyle="blue";
    pincel.beginPath();
    pincel.arc(x, y, 10, 0, 2*3.14);
    pincel.fill();

    console.log("posição do clique : " + x + ", " + y);
}

tela.onclick = desenhaCirculo; 

O onclick é o evento que estamos analisando, e é justamente ele que a função desenhaCirculo() recebe como parâmetro. Os eventos do Javascript, geralmente, possuem algumas propriedades, que podem ser passadas através de um ponto seguido de seu nome, alguns exemplos de propriedades são:

• .pageX : verifica a posição horizontal do evento do mouse;
• .pageY : verifica a posição vertical do evento do mouse.

Para evitar uma diferença de valores e apenas contabilizar o espaço da tela, removemos as distâncias do topo (com a propriedade offsetTop) e da esquerda (com a propriedade offsetLeft) da variável tela, que representa o espaço que estamos trabalhando da tag <canvas>:

var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;

Enquanto isso, no outro código abordado pelo instrutor, percebemos o uso do evento onkeydown, o qual está associado às teclas que pressionamos no teclado. Quem deve responder a esse evento não é mais a tela, mas sim o document, visto que estamos lidando diretamente com uma interação entre o usuário e o navegador.

O Document Object Model (DOM), também chamado de document é utilizado pelo nosso navegador para representar a página Web.

Assim que uma tecla é pressionada, o próprio document percebe isso e executa uma função específica que nós associamos ao evento onkeydown, como a leDoTeclado :

function leDoTeclado(evento) {
        if(evento.keyCode == cima) {
            y = y - taxa;
        } else if (evento.keyCode == baixo) {
            y = y + taxa;
        } else if (evento.keyCode == esquerda) {
            x = x - taxa;
        } else if (evento.keyCode == direita) {
            x = x + taxa;
        }
    }

   document.onkeydown = leDoTeclado;

Nesta função, pegamos o evento que ocorreu (tecla foi pressionada) e fazemos uma sequência de verificações a fim de encontrar qual tecla foi efetivamente pressionada. Quando descobrimos isso, alteramos os valores das variáveis x e y .

Nesse sentido, quando utilizamos tela.onclick e evento.pageX - tela.offsetLeft, estamos lidando com o comportamento da nossa tela de pintura e como ocorre a interação do usuário com ela. Por outro lado, quando trabalhamos com document.onkeydown, focamos em entender como ocorre a interação entre o teclado do usuário e o próprio navegador.

Para impulsionar ainda mais seus estudos e conhecer um pouco sobre o DOM, deixo como dica de leitura um artigo super interessante logo abaixo:

• Artigo da Alura: O que é o DOM?

Caso tenha dúvidas após minha explicação ou ao longo dos seus estudos, sinta-se confortável para enviá-las ao fórum. Fico à disposição para te auxiliar no que for preciso.

Até mais e bons estudos, Joicilene!