1
00:00:00,210 --> 00:00:02,150
OK, volveremos.

2
00:00:02,400 --> 00:00:07,620
De vuelta en la introducción a javascript mencioné que una de las razones importantes para aprender javascript

3
00:00:07,680 --> 00:00:10,520
es que podemos usarlo para hacer nuestras páginas interactivas.

4
00:00:10,680 --> 00:00:16,590
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

5
00:00:16,590 --> 00:00:17,920
o lo que sea que haga.

6
00:00:18,090 --> 00:00:23,310
Podemos tener algún código correspondiente que se ejecute en un punto dado en el tiempo, no solo ejecutado

7
00:00:23,310 --> 00:00:24,880
justo al comienzo de la página.

8
00:00:25,410 --> 00:00:28,290
Entonces para hacer eso necesitamos hablar sobre los eventos de Dom.

9
00:00:28,320 --> 00:00:31,250
Entonces, este video será una introducción a los eventos de Dom.

10
00:00:31,260 --> 00:00:36,300
Conceptualmente el proceso para configurarlos y luego también la sintaxis.

11
00:00:36,300 --> 00:00:38,660
Así que como mencioné los eventos están en todas partes.

12
00:00:38,670 --> 00:00:43,170
Piense en cuándo interactúa con la página web las diferentes cosas que suceden, puede hacer clic en

13
00:00:43,170 --> 00:00:47,330
elementos como un botón, puede pasar el mouse sobre un enlace y puede aparecer algo.

14
00:00:47,370 --> 00:00:50,320
Puede arrastrar y soltar elementos en ciertas páginas.

15
00:00:50,550 --> 00:00:55,440
Es posible que desee tener un código que se ejecuta desde los clics dobles del usuario o en realidad esta

16
00:00:55,440 --> 00:00:56,650
página web tiene algunos ejemplos.

17
00:00:56,670 --> 00:01:03,550
Esta diapositiva punto com es un sitio web y estoy presionando las teclas de flecha izquierda y derecha para cambiar las diapositivas.

18
00:01:03,690 --> 00:01:09,300
Así que se está ejecutando algún código cuando presiono la tecla de flecha izquierda o la tecla de flecha derecha o cuando

19
00:01:09,300 --> 00:01:10,050
hago clic aquí.

20
00:01:10,590 --> 00:01:15,780
Eso también es un evento y está haciendo algo, está ejecutando un código que está cambiando la diapositiva actual.

21
00:01:16,950 --> 00:01:20,930
Entonces, el punto es que los eventos están por todos lados y son realmente emocionantes.

22
00:01:20,920 --> 00:01:26,070
Es uno de mis temas favoritos para enseñar porque ahora podemos hacer nuestras páginas web interactivas,

23
00:01:26,070 --> 00:01:31,230
podemos tomar las cosas de manipulación que hemos estado aprendiendo sobre el cambio de colores cambiando

24
00:01:31,230 --> 00:01:35,070
el texto y luego podemos hacer eso cuando sucede algo en particular.

25
00:01:35,070 --> 00:01:38,340
Entonces esto realmente desbloquea el potencial de manipular el dormitorio.

26
00:01:38,370 --> 00:01:43,170
Es cómo vamos a hacer juegos, así es como haremos los validadores de formas en tic

27
00:01:43,170 --> 00:01:49,050
tac toe, vamos a hacer un juego de selección de color realmente genial y todo se deriva de estos eventos.

28
00:01:49,050 --> 00:01:55,890
Entonces la forma en que funcionan estos eventos es que realmente los adjuntamos a elementos específicos, por lo que

29
00:01:55,890 --> 00:02:04,440
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

30
00:02:04,440 --> 00:02:07,590
un detector de eventos a ese elemento seleccionado.

31
00:02:07,920 --> 00:02:15,540
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

32
00:02:15,540 --> 00:02:20,880
pulsación de tecla en una entrada de texto y hablaremos más sobre las diferencias entre esos eventos.

33
00:02:20,880 --> 00:02:21,990
Entonces, como un ejemplo,

34
00:02:21,990 --> 00:02:26,490
Hay tantos tipos diferentes de eventos en javascript, pero lo importante es que tenemos

35
00:02:26,490 --> 00:02:30,170
que tener un evento que se está escuchando en un elemento determinado.

36
00:02:30,180 --> 00:02:34,890
Así que al igual que antes cuando me gustaría hablar sobre seleccionar y luego manipular eso todavía se aplica.

37
00:02:34,920 --> 00:02:41,190
Necesitamos seleccionar algo y luego la manipulación que sucede es que agregamos un oyente de

38
00:02:41,190 --> 00:02:43,740
evento a esa cosa que seleccionamos.

39
00:02:43,740 --> 00:02:48,930
Hay un método en particular que vamos a usar todo el tiempo que se llama add event listener.

40
00:02:49,650 --> 00:02:56,200
el tipo de entrada porque tenemos una contraseña y tenemos algo seleccionado, lo llamamos agregar evento oyente y damos dos argumentos.

41
00:02:56,200 --> 00:03:02,160
Entonces, en caso de que el oyente sea lo que usamos una vez que seleccionamos un elemento como el

42
00:03:02,160 --> 00:03:03,070
primer botón o

43
00:03:03,330 --> 00:03:06,950
El primero es el tipo de evento que queremos escuchar.

44
00:03:07,350 --> 00:03:12,790
Y el segundo argumento es el código que queremos ejecutar cuando ocurre ese evento.

45
00:03:13,260 --> 00:03:14,330
Así que aquí hay un ejemplo.

46
00:03:14,400 --> 00:03:19,590
Estoy seleccionando el primer botón en una página realmente no importa dónde está el botón o

47
00:03:19,590 --> 00:03:22,060
cómo se ve o cualquier otro botón.

48
00:03:22,350 --> 00:03:29,430
presionando el botón en el oyente del evento, haga clic y luego el segundo argumento es una función que llega hasta aquí.

49
00:03:29,430 --> 00:03:30,540
Y luego estoy

50
00:03:30,750 --> 00:03:33,690
Y este código no se ejecuta de inmediato.

51
00:03:33,690 --> 00:03:35,910
Recuerde que esto se llama devolución de llamada.

52
00:03:35,910 --> 00:03:38,140
Este código no se ejecuta de inmediato.

53
00:03:38,430 --> 00:03:42,000
Solo se ejecuta una vez que este evento se dispara.

54
00:03:42,000 --> 00:03:46,390
Entonces, una vez que haces clic en el botón que javascript entra, se devuelve la llamada.

55
00:03:46,440 --> 00:03:51,630
Esta función dice: "hey, es tu momento para brillar y volver aquí listo, vamos a ejecutarte".

56
00:03:51,630 --> 00:03:56,040
Y luego ese código se ejecuta y nos aconsejan que no inicie sesión, haga clic en el botón.

57
00:03:56,250 --> 00:04:02,130
De modo que esta función se ejecutará cada vez que un botón se ejecute rápidamente

58
00:04:02,130 --> 00:04:05,290
con el botón específico que seleccionamos como seleccionado.

59
00:04:05,910 --> 00:04:07,540
Así que aquí hay otro ejemplo.

60
00:04:07,830 --> 00:04:15,060
En este caso, tengo la marca aquí un botón y un párrafo y los seleccioné con el selector Kery y los guardo

61
00:04:15,750 --> 00:04:21,630
en las variables y luego todo lo que hacemos es agregar un oyente clic para que el botón

62
00:04:21,630 --> 00:04:26,910
agregue el oyente del evento y luego el segundo argumento es esa función de devolución de llamada.

63
00:04:26,910 --> 00:04:32,610
haga clic en ese botón cambia el contenido del texto de los párrafos para que alguien haga clic en el botón

64
00:04:32,610 --> 00:04:39,660
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.

65
00:04:39,660 --> 00:04:42,260
Y lo que vamos a hacer cada vez que se

66
00:04:42,930 --> 00:04:50,180
Así que ahora voy a hacer una demostración rápida usando nuestra página de demostración de Dom. Comencemos haciendo este

67
00:04:50,180 --> 00:04:50,790
H-1 aquí.

68
00:04:50,810 --> 00:04:53,700
Cambiar el color cuando un usuario hace clic en él.

69
00:04:53,780 --> 00:04:58,310
Entonces para hacer eso tenemos que comenzar siempre seleccionando el H-1.

70
00:04:58,810 --> 00:05:00,510
Entonces tenemos un montón de opciones allí.

71
00:05:00,530 --> 00:05:09,070
Solo voy a utilizar el documento selector de queery que el selector de consultas H-1 se asegura de que lo tengamos.

72
00:05:09,310 --> 00:05:10,460
Todo bien.

73
00:05:10,460 --> 00:05:14,920
Luego, solo escribimos H-1 que agrega el detector de eventos.

74
00:05:15,010 --> 00:05:16,790
Recuerde que hay dos argumentos.

75
00:05:16,940 --> 00:05:19,910
El primero es el evento que estamos escuchando.

76
00:05:20,060 --> 00:05:24,050
Y pasaremos más tiempo hablando de los diferentes eventos, las diferentes opciones.

77
00:05:24,050 --> 00:05:30,050
Por ahora solo hacemos clic y el segundo es el código que queremos ejecutar cuando el usuario hace clic.

78
00:05:30,310 --> 00:05:37,060
Así que funciona y simplemente comienza realmente simple y solo haz una alerta cuando el usuario haga clic.

79
00:05:37,160 --> 00:05:44,330
Así que haremos una alerta, cada clic se hizo así.

80
00:05:44,750 --> 00:05:46,990
Y ahora vamos a presionar enter.

81
00:05:47,120 --> 00:05:48,700
Nada cambia de inmediato.

82
00:05:49,190 --> 00:05:52,910
Pero ahora si hago clic en el uno, cerraré esto.

83
00:05:52,910 --> 00:05:54,570
Si hago clic en cualquier parte de la página.

84
00:05:54,590 --> 00:05:56,400
Aparte del H-1, no pasa nada.

85
00:05:56,620 --> 00:06:01,150
Tan pronto como hago clic en el H-1, me dice que H-1 era correcto.

86
00:06:01,430 --> 00:06:02,510
Entonces eso es importante

87
00:06:02,500 --> 00:06:09,730
eso significa que puedo ir aquí y hacer clic porque recuerda que si inspecciono esto, el H-1 recorre toda la

88
00:06:09,740 --> 00:06:10,130
pantalla.

89
00:06:12,980 --> 00:06:15,290
Solo se aplica al H-1, pero

90
00:06:15,500 --> 00:06:20,720
Así que hay algo que hay que tener en cuenta que está bien para nosotros en este caso,

91
00:06:20,720 --> 00:06:25,680
pero aparecerá ocasionalmente donde las cosas se comportan un poco diferente de lo que te gustaría y

92
00:06:25,700 --> 00:06:30,190
necesitas usar CSSA para acortar la etapa uno o cambiar tu oyente de todos modos.

93
00:06:30,640 --> 00:06:35,130
Entonces, en lugar de solo alertar, intentemos hacer otra cosa.

94
00:06:35,330 --> 00:06:42,140
Y si presiono la flecha hacia arriba agrego un oyente de evento, hago clic y

95
00:06:42,130 --> 00:06:54,260
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.

96
00:06:54,250 --> 00:07:01,870
atención a lo que sucede, lo primero que sucede es que todavía dice en una alerta que H-1 fue presionado.

97
00:07:01,880 --> 00:07:06,030
De nuevo, nada cambia de inmediato, pero cuando hago clic presto

98
00:07:06,170 --> 00:07:10,360
Y luego, cuando lo cierro, cambia a naranja.

99
00:07:10,730 --> 00:07:14,840
Entonces, la moraleja es que podemos tener más de un oyente en un elemento dado.

100
00:07:14,840 --> 00:07:22,090
Cuando hacemos clic en ese H-1, el primer oyente que agregamos escuchaba un clic y ejecutó una alerta

101
00:07:22,610 --> 00:07:28,280
y luego agregamos otro oyente que también escuchó un clic pero cambió el color

102
00:07:28,270 --> 00:07:28,890
de fondo.

103
00:07:28,910 --> 00:07:31,200
Entonces, cuando hago clic en ambos, corro.

104
00:07:31,390 --> 00:07:37,190
se cambia a naranja, por supuesto, no lo ves porque ya era naranja, pero debes confiar en mí.

105
00:07:37,320 --> 00:07:42,190
Y eso siempre va a pasar, por ahora, si hago clic nuevamente recibo la alerta y

106
00:07:42,290 --> 00:07:45,000
Sigue cambiando a naranja una y otra y otra vez.

107
00:07:45,670 --> 00:07:48,560
OK, me voy a actualizar y deshacerme de todo eso.

108
00:07:48,590 --> 00:07:52,720
También quiero hacer una demostración rápida agregando un oyente a la UL.

109
00:07:52,880 --> 00:08:03,320
Así que hagamos un selector de consulta de volcado de documentos UL y recuerde que tenemos tres aliados en lugar de solo un ul.

110
00:08:04,490 --> 00:08:08,500
Entonces, voy a mostrarte lo que sucede cuando lo configuramos en un elemento padre como ese.

111
00:08:08,510 --> 00:08:11,850
Bueno, y no voy a usar una variable, voy a hacer esto aquí.

112
00:08:12,130 --> 00:08:14,640
Oyente Adamant

113
00:08:15,250 --> 00:08:16,140
Hacer clic.

114
00:08:16,550 --> 00:08:17,930
Entonces esa es la primera discusión.

115
00:08:17,930 --> 00:08:20,330
El segundo es la función que

116
00:08:24,610 --> 00:08:25,560
queremos ejecutar así.

117
00:08:25,880 --> 00:08:27,410
Y voy a comenzar.

118
00:08:27,680 --> 00:08:35,720
Solo hagamos una consola que logó bien los clics y usted sabe qué.

119
00:08:35,810 --> 00:08:37,210
Esa es la voz pasiva.

120
00:08:37,250 --> 00:08:38,050
Mala idea.

121
00:08:38,300 --> 00:08:39,270
Hagamos.

122
00:08:39,460 --> 00:08:43,550
Hiciste clic en UL mucho mejor.

123
00:08:43,880 --> 00:08:44,520
DE ACUERDO.

124
00:08:44,720 --> 00:08:48,430
Así que mantengamos abierta la consola y hagamos clic en UL.

125
00:08:48,980 --> 00:08:50,420
Pero cómo haríamos clic en el petróleo.

126
00:08:50,450 --> 00:08:53,090
Porque el pozo tiene tres aliados dentro de él.

127
00:08:53,120 --> 00:08:55,290
La UL es todo esto aquí.

128
00:08:55,320 --> 00:09:00,890
Entonces, cualquier rápido no importa en qué aliado esté en cualquier parte del pozo.

129
00:09:01,040 --> 00:09:02,820
Puedes ver el número incrementando aquí.

130
00:09:02,930 --> 00:09:07,150
Cualquier rápido en el pozo ejecutará este registro de puntos de la consola.

131
00:09:08,120 --> 00:09:14,290
Así que vamos a actualizar una vez más y esta vez digamos que quiero cambiar al aliado.

132
00:09:14,300 --> 00:09:17,540
Cuando hago clic en un aliado individual, quiero que algo suceda.

133
00:09:17,960 --> 00:09:19,400
Hay algunas formas de hacerlo.

134
00:09:19,420 --> 00:09:25,840
Y vamos a comenzar con el más simple que está uniendo a un oyente a cada aliado como cara

135
00:09:25,850 --> 00:09:26,360
a cara.

136
00:09:26,360 --> 00:09:32,880
Lo que haremos eventualmente es unir a un oyente al UL y luego a ese oyente.

137
00:09:32,990 --> 00:09:39,250
Vamos a detectar qué mentira específicamente dentro de la UL se hizo clic en todos con un Lessner.

138
00:09:39,250 --> 00:09:44,230
Por ahora, aunque vamos a agregar un oyente por separado a cada mentira,

139
00:09:44,240 --> 00:09:55,570
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.

140
00:09:55,570 --> 00:09:59,040
Muy bien, entonces tenemos que hacer un bucle for.

141
00:09:59,210 --> 00:10:02,190
Entonces para var I es igual a cero.

142
00:10:02,410 --> 00:10:04,880
Recuerda que dije que estaríamos haciendo esto todo el tiempo.

143
00:10:04,880 --> 00:10:09,670
Por lo tanto, soy menos que aliados con esa longitud más más

144
00:10:13,730 --> 00:10:14,740
solo así.

145
00:10:15,050 --> 00:10:20,600
Y luego, dentro de aquí, vamos a agregar un oyente a cada aliado individual.

146
00:10:20,840 --> 00:10:21,940
Entonces eso se ve así

147
00:10:21,960 --> 00:10:27,350
Elyse I para que nos brinde la función

148
00:10:30,080 --> 00:10:39,220
específica de aliado y escucha de eventos y así lo hacemos un poco.

149
00:10:39,770 --> 00:10:41,920
Y luego el código que queremos ejecutar.

150
00:10:42,320 --> 00:10:49,250
Cambiemos el color del aliado al que se hizo clic y simplemente cambiemos a púrpura.

151
00:10:49,250 --> 00:10:51,250
Entonces tenemos algunas opciones diferentes.

152
00:10:51,290 --> 00:10:54,600
Lo que debo hacer es referirme al aliado sobre el que se hizo clic.

153
00:10:54,800 --> 00:11:00,980
Así que podría hacer esto aliados, aunque esa no es realmente una gran solución porque hay una manera

154
00:11:01,000 --> 00:11:05,320
mucho más fácil de hacer eso que es usar esta palabra clave.

155
00:11:05,680 --> 00:11:12,410
Así que, dentro de un oyente, la palabra clave se refiere al elemento al que se hizo clic o al elemento

156
00:11:12,410 --> 00:11:18,250
que se colocó o al elemento donde se presionó la tecla, donde quiera que el elemento que vaya

157
00:11:18,430 --> 00:11:23,100
justo antes del evento sea lo que sea que haya seleccionado se refiere a.

158
00:11:23,140 --> 00:11:30,640
Así que puedo escribir este estilo de punto que el color es igual a púrpura.

159
00:11:31,000 --> 00:11:33,140
Y en realidad eso es algo más obvio.

160
00:11:33,230 --> 00:11:34,150
Es una fuente pequeña.

161
00:11:34,150 --> 00:11:36,670
Así que vamos a hacer rosa así como así.

162
00:11:37,040 --> 00:11:38,500
Presiono enter.

163
00:11:38,500 --> 00:11:46,020
No ocurre nada inmediatamente, pero si hago clic en un aliado, puede ver que cambia a rosa.

164
00:11:47,410 --> 00:11:53,960
Y si sigo haciendo clic en seguir cambiando a rosa, simplemente no puede decir.

165
00:11:54,080 --> 00:12:00,110
Entonces, este patrón de seleccionar un grupo de cosas que se repiten individualmente y agregar un detector de

166
00:12:00,110 --> 00:12:03,670
eventos a cada uno de ellos es realmente muy común.

167
00:12:03,710 --> 00:12:11,170
Lo veremos todo el tiempo en los próximos proyectos que hagamos.

168
00:12:11,270 --> 00:12:16,640
función anónima como hicimos aquí donde escribe la función entre paréntesis y no le da un nombre.

169
00:12:16,630 --> 00:12:20,830
Lo último que mencionaré aquí es que no siempre tiene que usar una

170
00:12:20,990 --> 00:12:22,330
No tienes que hacer eso.

171
00:12:22,370 --> 00:12:25,790
Puede declarar una función nombrada por separado como hice aquí.

172
00:12:26,090 --> 00:12:31,200
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

173
00:12:31,420 --> 00:12:33,890
o hacer clic y luego le damos un cambio de texto.

174
00:12:34,070 --> 00:12:38,830
Tenga en cuenta que no tenemos paréntesis después porque ejecutaría la función de inmediato, que no

175
00:12:38,840 --> 00:12:39,890
es lo que queremos.

176
00:12:40,180 --> 00:12:46,880
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.

177
00:12:47,170 --> 00:12:51,100
Así que solo estamos pasando el valor de esta función, estamos pasando el contenido

178
00:12:51,190 --> 00:12:52,810
Pero no lo ejecutes todavía.

179
00:12:52,820 --> 00:12:55,350
Entonces estos dos funcionarán exactamente igual.

180
00:12:55,370 --> 00:12:57,030
Es solo una cuestión de preferencia.

181
00:12:57,190 --> 00:13:00,830
En su mayor parte, hay algunas diferencias que podemos encontrar más adelante.

182
00:13:00,880 --> 00:13:02,980
Preferiría mucho usar esto.

183
00:13:03,230 --> 00:13:08,240
El único momento en que no usaría una función anónima es si necesitaba usar ese código nuevamente

184
00:13:08,240 --> 00:13:10,160
en otro lugar fuera del reloj.

185
00:13:10,150 --> 00:13:15,100
Entonces, si quisiera ejecutarlo yo mismo de forma individual o si quisiera ejecutarlo en lugar de

186
00:13:15,530 --> 00:13:21,260
otro oyente rápido en lugar de duplicar esta función, le pondría un nombre y luego duplicaría el nombre donde

187
00:13:21,260 --> 00:13:22,600
lo uso dos veces.

188
00:13:23,060 --> 00:13:28,660
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

189
00:13:28,660 --> 00:13:30,650
cosas que hemos aprendido en los últimos videos.