Alguno entiende este código de JS?

Question

Estoy intentando crear un código que permita tomar las coordenadas del puntero del ratón y encontré un código en internet que hace todo el trabajo, pero a mi me gustaría poder comprenderlo. Hice un curso de JS, pero no vi nada de lo que aparece a continuación:

function getMousePos(canvas, evt) {

           

        return {

          x: evt.clientX,

          y: evt.clientY     

        };

      }

Me gustaría saber qué es "evt" ya que el autor no creo más arriba una variable con esta sintaxis. Quiero saber si evt es sintaxis de javascript o no. Es curioso porque si escribo evt.clientX fuera de esa función me da error. Por cierto X e Y qué son?¿variables? y si son variables por qué se ponen dos puntos y no el signo "="? ¿y poe qué no se les pone "var" o "let"? No entiendo cómo es posible que evt.clientX me de las coordenadas del mouse. Me tiene desconcertado esta función no he visto nada como esto hasta ahora.

Answer 1

Hola,

Cuando se invoca un evento, se le pasará un objeto de evento como primer argumento. Puedes nombrar a evt como quieras. Los nombres comunes son e, evt y event.

Hay muchas más propiedades que se pueden usar en el objeto de evento y se vuelven muy útiles si sabe cómo usarlo. Más información sobre el objeto de evento aquí.

Saludos,

Eric Ruiz

Answer 2

... y contestando a la otra parte, donde preguntabas por la x y la y y los dos puntos:

Lo que está haciendo es emplear la notación de objetos de javascript para devolver un objeto. Fíjate que detrás de return viene un bloque entre llaves {...}. Eso indica que vamos a devolver un objeto. Y dentro de las llaves se definen las propiedades del objeto. Cuando pone x:valor, y:valor, eso define dos propiedades llamadas x e y y les asigna el correspondiente valor.