OK, volveremos.
De vuelta en la introducción a javascript mencioné que una de las razones importantes para aprender javascript
es que podemos usarlo para hacer nuestras páginas interactivas.
Es la forma en que podemos ejecutar el código cuando un usuario hace clic en un botón o escribe algo o toca la tecla de flecha
o lo que sea que haga.
Podemos tener algún código correspondiente que se ejecute en un punto dado en el tiempo, no solo ejecutado
justo al comienzo de la página.
Entonces para hacer eso necesitamos hablar sobre los eventos de Dom.
Entonces, este video será una introducción a los eventos de Dom.
Conceptualmente el proceso para configurarlos y luego también la sintaxis.
Así que como mencioné los eventos están en todas partes.
Piense en cuándo interactúa con la página web las diferentes cosas que suceden, puede hacer clic en
elementos como un botón, puede pasar el mouse sobre un enlace y puede aparecer algo.
Puede arrastrar y soltar elementos en ciertas páginas.
Es posible que desee tener un código que se ejecuta desde los clics dobles del usuario o en realidad esta
página web tiene algunos ejemplos.
Esta diapositiva punto com es un sitio web y estoy presionando las teclas de flecha izquierda y derecha para cambiar las diapositivas.
Así que se está ejecutando algún código cuando presiono la tecla de flecha izquierda o la tecla de flecha derecha o cuando
hago clic aquí.
Eso también es un evento y está haciendo algo, está ejecutando un código que está cambiando la diapositiva actual.
Entonces, el punto es que los eventos están por todos lados y son realmente emocionantes.
Es uno de mis temas favoritos para enseñar porque ahora podemos hacer nuestras páginas web interactivas,
podemos tomar las cosas de manipulación que hemos estado aprendiendo sobre el cambio de colores cambiando
el texto y luego podemos hacer eso cuando sucede algo en particular.
Entonces esto realmente desbloquea el potencial de manipular el dormitorio.
Es cómo vamos a hacer juegos, así es como haremos los validadores de formas en tic
tac toe, vamos a hacer un juego de selección de color realmente genial y todo se deriva de estos eventos.
Entonces la forma en que funcionan estos eventos es que realmente los adjuntamos a elementos específicos, por lo que
seleccionamos un elemento como el primer botón o el segundo H-1 o la entrada donde un tipo es igual a texto y luego adjuntamos
un detector de eventos a ese elemento seleccionado.
podríamos estar escuchando un clic en un botón que podríamos escuchar para un evento de desplazamiento en una H1, podríamos escuchar el evento de
pulsación de tecla en una entrada de texto y hablaremos más sobre las diferencias entre esos eventos.
Entonces, como un ejemplo,
Hay tantos tipos diferentes de eventos en javascript, pero lo importante es que tenemos
que tener un evento que se está escuchando en un elemento determinado.
Así que al igual que antes cuando me gustaría hablar sobre seleccionar y luego manipular eso todavía se aplica.
Necesitamos seleccionar algo y luego la manipulación que sucede es que agregamos un oyente de
evento a esa cosa que seleccionamos.
Hay un método en particular que vamos a usar todo el tiempo que se llama add event listener.
el tipo de entrada porque tenemos una contraseña y tenemos algo seleccionado, lo llamamos agregar evento oyente y damos dos argumentos.
Entonces, en caso de que el oyente sea lo que usamos una vez que seleccionamos un elemento como el
primer botón o
El primero es el tipo de evento que queremos escuchar.
Y el segundo argumento es el código que queremos ejecutar cuando ocurre ese evento.
Así que aquí hay un ejemplo.
Estoy seleccionando el primer botón en una página realmente no importa dónde está el botón o
cómo se ve o cualquier otro botón.
presionando el botón en el oyente del evento, haga clic y luego el segundo argumento es una función que llega hasta aquí.
Y luego estoy
Y este código no se ejecuta de inmediato.
Recuerde que esto se llama devolución de llamada.
Este código no se ejecuta de inmediato.
Solo se ejecuta una vez que este evento se dispara.
Entonces, una vez que haces clic en el botón que javascript entra, se devuelve la llamada.
Esta función dice: "hey, es tu momento para brillar y volver aquí listo, vamos a ejecutarte".
Y luego ese código se ejecuta y nos aconsejan que no inicie sesión, haga clic en el botón.
De modo que esta función se ejecutará cada vez que un botón se ejecute rápidamente
con el botón específico que seleccionamos como seleccionado.
Así que aquí hay otro ejemplo.
En este caso, tengo la marca aquí un botón y un párrafo y los seleccioné con el selector Kery y los guardo
en las variables y luego todo lo que hacemos es agregar un oyente clic para que el botón
agregue el oyente del evento y luego el segundo argumento es esa función de devolución de llamada.
haga clic en ese botón cambia el contenido del texto de los párrafos para que alguien haga clic en el botón
y puede ver que cuando hago clic en ese botón cambia de que nadie me haya hecho clic y alguien ha hecho clic en el botón.
Y lo que vamos a hacer cada vez que se
Así que ahora voy a hacer una demostración rápida usando nuestra página de demostración de Dom. Comencemos haciendo este
H-1 aquí.
Cambiar el color cuando un usuario hace clic en él.
Entonces para hacer eso tenemos que comenzar siempre seleccionando el H-1.
Entonces tenemos un montón de opciones allí.
Solo voy a utilizar el documento selector de queery que el selector de consultas H-1 se asegura de que lo tengamos.
Todo bien.
Luego, solo escribimos H-1 que agrega el detector de eventos.
Recuerde que hay dos argumentos.
El primero es el evento que estamos escuchando.
Y pasaremos más tiempo hablando de los diferentes eventos, las diferentes opciones.
Por ahora solo hacemos clic y el segundo es el código que queremos ejecutar cuando el usuario hace clic.
Así que funciona y simplemente comienza realmente simple y solo haz una alerta cuando el usuario haga clic.
Así que haremos una alerta, cada clic se hizo así.
Y ahora vamos a presionar enter.
Nada cambia de inmediato.
Pero ahora si hago clic en el uno, cerraré esto.
Si hago clic en cualquier parte de la página.
Aparte del H-1, no pasa nada.
Tan pronto como hago clic en el H-1, me dice que H-1 era correcto.
Entonces eso es importante
eso significa que puedo ir aquí y hacer clic porque recuerda que si inspecciono esto, el H-1 recorre toda la
pantalla.
Solo se aplica al H-1, pero
Así que hay algo que hay que tener en cuenta que está bien para nosotros en este caso,
pero aparecerá ocasionalmente donde las cosas se comportan un poco diferente de lo que te gustaría y
necesitas usar CSSA para acortar la etapa uno o cambiar tu oyente de todos modos.
Entonces, en lugar de solo alertar, intentemos hacer otra cosa.
Y si presiono la flecha hacia arriba agrego un oyente de evento, hago clic y
cambio el código aquí y hago algo como H-1, que es igual al fondo de estilo, y vamos a hacer un fondo naranja anaranjado y presiono enter.
atención a lo que sucede, lo primero que sucede es que todavía dice en una alerta que H-1 fue presionado.
De nuevo, nada cambia de inmediato, pero cuando hago clic presto
Y luego, cuando lo cierro, cambia a naranja.
Entonces, la moraleja es que podemos tener más de un oyente en un elemento dado.
Cuando hacemos clic en ese H-1, el primer oyente que agregamos escuchaba un clic y ejecutó una alerta
y luego agregamos otro oyente que también escuchó un clic pero cambió el color
de fondo.
Entonces, cuando hago clic en ambos, corro.
se cambia a naranja, por supuesto, no lo ves porque ya era naranja, pero debes confiar en mí.
Y eso siempre va a pasar, por ahora, si hago clic nuevamente recibo la alerta y
Sigue cambiando a naranja una y otra y otra vez.
OK, me voy a actualizar y deshacerme de todo eso.
También quiero hacer una demostración rápida agregando un oyente a la UL.
Así que hagamos un selector de consulta de volcado de documentos UL y recuerde que tenemos tres aliados en lugar de solo un ul.
Entonces, voy a mostrarte lo que sucede cuando lo configuramos en un elemento padre como ese.
Bueno, y no voy a usar una variable, voy a hacer esto aquí.
Oyente Adamant
Hacer clic.
Entonces esa es la primera discusión.
El segundo es la función que
queremos ejecutar así.
Y voy a comenzar.
Solo hagamos una consola que logó bien los clics y usted sabe qué.
Esa es la voz pasiva.
Mala idea.
Hagamos.
Hiciste clic en UL mucho mejor.
DE ACUERDO.
Así que mantengamos abierta la consola y hagamos clic en UL.
Pero cómo haríamos clic en el petróleo.
Porque el pozo tiene tres aliados dentro de él.
La UL es todo esto aquí.
Entonces, cualquier rápido no importa en qué aliado esté en cualquier parte del pozo.
Puedes ver el número incrementando aquí.
Cualquier rápido en el pozo ejecutará este registro de puntos de la consola.
Así que vamos a actualizar una vez más y esta vez digamos que quiero cambiar al aliado.
Cuando hago clic en un aliado individual, quiero que algo suceda.
Hay algunas formas de hacerlo.
Y vamos a comenzar con el más simple que está uniendo a un oyente a cada aliado como cara
a cara.
Lo que haremos eventualmente es unir a un oyente al UL y luego a ese oyente.
Vamos a detectar qué mentira específicamente dentro de la UL se hizo clic en todos con un Lessner.
Por ahora, aunque vamos a agregar un oyente por separado a cada mentira,
entonces debemos comenzar seleccionando los Aliados para que nuestros aliados se equiparen con el selector de documentación del sitio, todo aliado se asegura de que los tengamos todos.
Muy bien, entonces tenemos que hacer un bucle for.
Entonces para var I es igual a cero.
Recuerda que dije que estaríamos haciendo esto todo el tiempo.
Por lo tanto, soy menos que aliados con esa longitud más más
solo así.
Y luego, dentro de aquí, vamos a agregar un oyente a cada aliado individual.
Entonces eso se ve así
Elyse I para que nos brinde la función
específica de aliado y escucha de eventos y así lo hacemos un poco.
Y luego el código que queremos ejecutar.
Cambiemos el color del aliado al que se hizo clic y simplemente cambiemos a púrpura.
Entonces tenemos algunas opciones diferentes.
Lo que debo hacer es referirme al aliado sobre el que se hizo clic.
Así que podría hacer esto aliados, aunque esa no es realmente una gran solución porque hay una manera
mucho más fácil de hacer eso que es usar esta palabra clave.
Así que, dentro de un oyente, la palabra clave se refiere al elemento al que se hizo clic o al elemento
que se colocó o al elemento donde se presionó la tecla, donde quiera que el elemento que vaya
justo antes del evento sea lo que sea que haya seleccionado se refiere a.
Así que puedo escribir este estilo de punto que el color es igual a púrpura.
Y en realidad eso es algo más obvio.
Es una fuente pequeña.
Así que vamos a hacer rosa así como así.
Presiono enter.
No ocurre nada inmediatamente, pero si hago clic en un aliado, puede ver que cambia a rosa.
Y si sigo haciendo clic en seguir cambiando a rosa, simplemente no puede decir.
Entonces, este patrón de seleccionar un grupo de cosas que se repiten individualmente y agregar un detector de
eventos a cada uno de ellos es realmente muy común.
Lo veremos todo el tiempo en los próximos proyectos que hagamos.
función anónima como hicimos aquí donde escribe la función entre paréntesis y no le da un nombre.
Lo último que mencionaré aquí es que no siempre tiene que usar una
No tienes que hacer eso.
Puede declarar una función nombrada por separado como hice aquí.
La función cambia el texto y luego todo lo que tenemos que hacer es decir el botón que agrega el detector de eventos
o hacer clic y luego le damos un cambio de texto.
Tenga en cuenta que no tenemos paréntesis después porque ejecutaría la función de inmediato, que no
es lo que queremos.
básicamente a este oyente rápido y diciendo que aquí está la función que quiero que ejecutes cuando el usuario haga clic en este botón.
Así que solo estamos pasando el valor de esta función, estamos pasando el contenido
Pero no lo ejecutes todavía.
Entonces estos dos funcionarán exactamente igual.
Es solo una cuestión de preferencia.
En su mayor parte, hay algunas diferencias que podemos encontrar más adelante.
Preferiría mucho usar esto.
El único momento en que no usaría una función anónima es si necesitaba usar ese código nuevamente
en otro lugar fuera del reloj.
Entonces, si quisiera ejecutarlo yo mismo de forma individual o si quisiera ejecutarlo en lugar de
otro oyente rápido en lugar de duplicar esta función, le pondría un nombre y luego duplicaría el nombre donde
lo uso dos veces.
De acuerdo, así que, al día siguiente, tendrás la oportunidad de hacer algunos ejercicios rápidos usando el rápido de Wisner y algunas de las
cosas que hemos aprendido en los últimos videos.