Usando las propiedades del evento (Versión en Video)

Tengo esta página web con una foto de "Winston".

Hace frío y "Winston" se está haciendo viejo,

así que quiere tener una barba.

Yo podría dibujar la barba.

Pero pienso que sería mejor si el usuario dibuja la barba

de "Winston", de la manera en que quieren que se vea.

Una barba larga, o como de tres días, o lo que sea que definan.

¿Cómo podríamos hacer eso?

Una forma es añadir un detector de eventos para el evento "mouseMove" en la imagen,

de manera que el programa llame a nuestra función cuando el usuario mueva su ratón,

sobre la cara de "Winston".

Vamos a hacer eso usando lo que acabamos de aprender.

El primer paso es encontrar el elemento, la imagen.

"var face = document.getElementById("...

... "face"), porque tengo este lindo "Id".

El segundo paso es definir la función que responde al evento.

Y vamos a empezar con una simple, para asegurarnos de que funciona,

y podremos hacer más tarde que haga algo más.

'document.getElementById("message").textContent += "mooove";'

Ok.

Y el paso final es conectar éste con éste,

para asegurarnos de que éste será llamado cuando éste detecte el evento "mouseMove".

Así que escribiremos: 'face.addEventListener("mousemove",'

y luego le pasamos el nombre de nuestra función, "onMouseMove".

Ahora, pausa esta guía paso a paso, y trata de mover el ratón sobre la cara.

¿Viste el mensaje?

Ok, espero que hayas visto este evento funcionando.

Pero esto no es lo que queremos que haga nuestro detector de eventos.

Queremos que dibuje, no que escriba texto.

¿Cómo podemos dibujar en una página web?

Podríamos usar la etiqueta "" y dibujar pixeles, como lo hicimos aquí

con los programas de "ProcessingJS".

Pero todo lo que estamos dibujando es una barba, que en realidad es un montón de puntos negros.

Así que podríamos crear un "" para cada punto, y asignar a este ""

un posicionamiento absoluto.

Aquí, se los voy a mostrar con un folículo de barba.

Entonces, voy a hacer un "" con una clase "beard", y luego voy a estilizar la barba con algo lindo de CSS

que voy a pegar aquí.

Y vamos a arreglar eso.

Así que puedes ver que nuestra barba tiene un fondo negro, es de 5 por 5 pixeles,

tiene un borde de 2 pixeles de radio, para hacerlo un poco más redondo,

y está usando un esquema de posicionamiento absoluto.

Actualmente, el "" se muestra debajo de la imagen.

¿Cómo podemos hacer para que se muestre sobre la cara?

Estamos usando posicionamiento absoluto, eso significa que deberíamos usar

las propiedades "top" y "left" para decirle, en realidad, dónde

debería posicionarse, ya que es posicionamiento absoluto.

Así que vamos a poner "top: 80px;", y luego "left: 15px;".

Hermoso.

Ahora que logramos que funcionara en HTML, vamos a hacer que funcione en JavaScript,

para que el usuario pueda crear dinámicamente este "" cada vez que mueva su ratón.

Vamos a ir abajo a nuestra función de JavaScript que responde al evento.

El primer paso es crear un "",

que podemos hacer con nuestra función "document.createElement()",

esto va a ser un "".

El segundo paso es añadir la clase: 'beard.className = "beard";'.

Así que ahora tenemos este "" flotando en el espacio.

El paso final es anexarlo a "".

Muy bien, ahora hicimos en JavaScript básicamente lo que habíamos hecho en HTML,

así que podemos borrar este HTML.

Ahora, deberías pausar la guía paso a paso, y probar presionar el ratón en "Winston".

Observa lo que pasa.

¿Viste que apareciera el folículo de barba?

¿Y trataste de presionar el ratón varias veces?

Si lo hiciste, probablemente notaste que la segunda vez que presionaste el ratón no pasó nada,

o cuando menos parece que no pasó nada.

Esto es porque cada "" tiene las mismas propiedades "top" y "left",

así que las nuevas barbas aparecen sobre las que ya estaban.

Queremos que "" se muestre donde quiera que el usuario presione el ratón.

¿Cómo podemos saber dónde se encuentra el ratón?

Como resultado, el navegador registra una gran cantidad de información

cada vez que sucede cualquier evento del usuario.

Y el navegador te da información cada vez

que se llama a la función de detector de eventos.

Pero ¿dónde y cómo podemos obtener esa información increíble?

Voy a teclear una letra, para darles un pista.

Esta "e" aquí, es el objeto de la información del evento.

Y el navegador lo envía como el primer argumento cuando llama

una función del detector de eventos.

No lo necesitamos antes, así que no me molesté en escribir la lista de argumentos.

Pero ahora que lo vamos a usar, le estoy dando un nombre, para que sea fácil

hacer referencia dentro de la función.

Recuerden que en JavaScript, una función puede ser llamada con cualquier número

de argumentos, incluso si la función no los usa o no se refiere a ninguno de ellos.

Así que siempre estábamos obteniendo esta información, sólo que no lo sabíamos.

Ahora voy a sacar la "e" a la consola: "console.log(e)".

Pausa la guía paso a paso, presiona el ratón en "Winston", y revisa tu consola.

Deberías poder ver el objeto del evento,

y leer todas sus propiedades.

Hay dos propiedades del evento que nos interesan en particular:

"clientX" y "clientY".

Estos registran la "x" y la "y" del evento y eso es lo que vamos a usar

para posicionar la barba.

Vamos a definir la propiedad "top" de la barba igual a "e.clientY" más "px", para las unidades.

Y establecer "left" igual a "e.clientX", más "px" para las unidades.

Ahora usa la pausa y trata de pasar el ratón por encima.

Dibujale una barba a "Winston".

Bastante bien, ¿eh?

Apuesto que pueden imaginar lo divertidas que pueden ser las aplicaciones de pintura que pueden hacer,

usando "clientX" y "clientY".

Y como lo viste en la consola, hay muchas propiedades

en un objeto de evento que podrías usar también.

Yo creo que las más utilizadas son las relacionadas con el teclado.

Entonces podrías descubrir cuáles teclas está presionando el usuario

cuando sucede un evento, y usar eso para hacer una

interfaz de teclado o en realidad un juego muy divertido.

Oh, una cosa más:

no tienes que llamar "e" a este argumento forzosamente.

Típicamente se hace, pero algunos desarrolladores lo llaman "evt" o "event".

No importa cómo lo llames, siempre y cuando se esté refiriendo

al primer argumento que el navegador pasa en tu función,

y siempre y cuando tú te refieras a él más tarde de la misma manera.

Si tienes problemas con esto, asegúrate de usar " console.log"

para ayudarte a depurar lo que está pasando.

Cuando eres un desarrollador web,

la consola es por mucho tu mejor amiga, ¡úsala!