1
00:00:00,510 --> 00:00:01,810
De acuerdo, bienvenido.

2
00:00:01,860 --> 00:00:07,110
En este video quiero hablar un poco más sobre algunos de los diferentes tipos de eventos hasta ahora que

3
00:00:07,110 --> 00:00:14,070
nos hemos encontrado con el evento click y el evento de cambio que usamos en una entrada de texto o una entrada de número en

4
00:00:14,070 --> 00:00:15,640
la aplicación del marcador de puntaje.

5
00:00:15,780 --> 00:00:18,930
Voy a comenzar presentando el M. SEGUNDO. A. referencia de evento

6
00:00:18,930 --> 00:00:20,720
Esa es la página web en la que estoy aquí.

7
00:00:20,940 --> 00:00:26,790
Y esta página web es una referencia a todos los diferentes eventos reconocidos por DOM API.

8
00:00:26,910 --> 00:00:30,840
Y si nos desplazamos hacia abajo, es posible que se sorprenda de la cantidad que hay.

9
00:00:31,260 --> 00:00:36,570
Y de hecho, voy a pedirte que en el próximo ejercicio escribas un código solo para contar

10
00:00:36,570 --> 00:00:41,040
cuántos hay, es un ejemplo práctico divertido de usar la geometría de los contras. Así que vas a contar cuántos hay pero por ahora solo sé que hay un

11
00:00:41,310 --> 00:00:45,990
montón de ellos y probablemente haya cinco o seis tal vez hasta 10 realmente comunes que

12
00:00:45,990 --> 00:00:53,490
usarán todo el tiempo cosas como arrastrar y soltar para un evento de clic flotante puede hacer doble clic en los eventos de pulsación de

13
00:00:53,520 --> 00:01:00,120
tecla, pero de lo contrario muchos de los más oscuros nunca se usarán o tal vez los usará una vez en un proyecto.

14
00:01:00,120 --> 00:01:04,780
Pero es bueno saber que existe esta página web

15
00:01:05,190 --> 00:01:09,660
que hay tantos eventos que quizás nunca usemos.

16
00:01:09,660 --> 00:01:10,510
elemento con el mouse.

17
00:01:10,740 --> 00:01:15,240
Y este video me voy a centrar en dos eventos en particular que tienen que ver con pasar el mouse sobre un

18
00:01:15,240 --> 00:01:16,980
Y esos se llaman mouse sobre mouse out.

19
00:01:17,100 --> 00:01:20,490
Así que tengo una aplicación simple y voy a hacer que se llame para

20
00:01:20,790 --> 00:01:26,550
que lo haga en mi nuevo archivo y voy a agregar mi repetición normal y esta no será una lista completa de tareas pendientes.

21
00:01:26,580 --> 00:01:31,910
No podremos agregar nuevos o que vamos a hacer es tener un UL con tres o cuatro aliados.

22
00:01:31,920 --> 00:01:37,950
Cosas como lavar gato alimentar gato y vamos a alimentar gato a perro y guardar.

23
00:01:38,070 --> 00:01:51,060
Así que tenemos nuestras tres cosas por hacer y eso es todo lo que necesitamos por ahora.

24
00:01:51,060 --> 00:01:54,340
Y lo que quiero hacer

25
00:01:54,630 --> 00:01:55,530
Voy a abrir esto en el navegador.

26
00:01:55,530 --> 00:01:58,590
Quiero poder hacer clic y eso debería

27
00:01:58,590 --> 00:02:04,380
oscurecer el elemento para hacer y tal vez tacharlo a través de él.

28
00:02:04,380 --> 00:02:05,190
Pero también quiero poder suspender el vuelo y quiero saber con cuál me estoy moviendo.

29
00:02:05,340 --> 00:02:09,250
Así que recibo esta agradable respuesta de los usuarios mientras sobrevivo uno de estos.

30
00:02:09,270 --> 00:02:12,960
Tal vez tengas que cambiar de color o en negrita comenzará simplemente poniéndolo

31
00:02:12,960 --> 00:02:18,210
en verde y hay muchos buenos efectos que puedes hacer por tu usuario usando estos eventos de desplazamiento.

32
00:02:18,210 --> 00:02:21,640
Así que lo mostraré en este momento antes de que podamos escribir cualquier javascript aunque necesitemos hacer nuestro archivo.

33
00:02:21,810 --> 00:02:26,400
Así que voy a guardar un nuevo archivo y lo llamaré a hacer.

34
00:02:26,940 --> 00:02:31,010
Sí.

35
00:02:31,180 --> 00:02:32,200
Y como

36
00:02:32,520 --> 00:02:44,580
siempre tuve mi alerta conectada, guarde la opción volver aquí y agregue nuestro script en la parte inferior y nuestra fuente es igual al punto deuce J. S. y guardaremos o actualizaremos y obtenemos nuestra alerta.

37
00:02:44,580 --> 00:02:51,520
Eso significa que está funcionando.

38
00:02:51,630 --> 00:02:53,190
Vamos en el primer evento

39
00:02:53,850 --> 00:02:58,710
que mencioné y lo primero que tenemos que hacer es seleccionar algo antes de poder manipularlo.

40
00:02:58,770 --> 00:03:00,100
Así que voy a comenzar simplemente haciéndolo a la primera mentira.

41
00:03:00,120 --> 00:03:03,050
Así que voy a usar el documento de

42
00:03:03,180 --> 00:03:12,810
ECOs de primer aliado y haré un selector de consultas ally y recordaré que esto me da la primera mentira porque no hice un selector de

43
00:03:12,810 --> 00:03:18,210
consultas todo y luego voy a agregar mi detector de eventos al primer aliado

44
00:03:18,270 --> 00:03:19,560
Así que fuimos

45
00:03:19,740 --> 00:03:27,750
primero a agregar el detector de eventos y el evento que estamos escuchando no es hacer clic en el mouse.

46
00:03:28,290 --> 00:03:30,060
Y luego le damos nuestra función de devolución de llamada.

47
00:03:30,060 --> 00:03:32,350
Y la forma en que funciona el mouseover se disparará tan pronto como comencemos a pasar sobre algo.

48
00:03:33,300 --> 00:03:38,650
y ahora, y el segundo, y ahora y el primero.

49
00:03:38,790 --> 00:03:46,170
Entonces, si estuviera trabajando con este último aliado, mi mouse se dispararía ahora

50
00:03:46,170 --> 00:03:47,880
Entonces se trata de cuándo comienza el vuelo estacionario.

51
00:03:47,880 --> 00:03:50,760
Primero, agregaría el detector de eventos al

52
00:03:50,910 --> 00:03:57,570
mouseover y simplemente haremos un registro en lugar de un mouse de devolución de llamada y, si

53
00:03:59,130 --> 00:04:05,730
actualizamos la consola, recuerde que solo lo hicimos con el primer aliado y ahí vamos, conseguimos un mouseover.

54
00:04:05,730 --> 00:04:06,950
También es importante notar que no está disparando continuamente cada vez.

55
00:04:07,080 --> 00:04:11,610
Sabes que ya pasamos de esto, es cuando comienza a flotar sobre un elemento.

56
00:04:11,660 --> 00:04:16,050
registro constante o cualquier código que tengamos en la devolución de llamada.

57
00:04:16,080 --> 00:04:20,610
Así que eso es útil para que no estemos constantemente con el

58
00:04:20,610 --> 00:04:21,770
Solo sucede cuando pasamos el mouse al principio.

59
00:04:21,780 --> 00:04:24,530
Entonces, en lugar de cancelar el registro, trabajemos para cambiar el color del aliado.

60
00:04:24,900 --> 00:04:29,660
Vamos a hacerlo verde.

61
00:04:29,670 --> 00:04:30,640
Así que cuando pasas el cursor sobre él se pone verde.

62
00:04:30,720 --> 00:04:32,880
Así que tenemos que hacer primero

63
00:04:32,880 --> 00:04:43,870
el estilo de punto aliado que el color sea igual al verde y guardamos la actualización y ahora miro cómo lo haré un poco más grande y hacer esto

64
00:04:43,880 --> 00:04:49,950
un poco más grande y refrescarme. Cuando empiezo a girar el mouse, se vuelve verde.

65
00:04:49,950 --> 00:04:50,800
Y luego, cuando me voy, se mantiene verde, que no es lo que queremos.

66
00:04:51,240 --> 00:04:55,300
Solo queremos que esto sea un efecto de desplazamiento.

67
00:04:55,410 --> 00:04:57,110
Entonces, cuando cierro sobre el aliado, se vuelve verde.

68
00:04:57,150 --> 00:04:59,460
Pero cuando dejo de volver a ser

69
00:04:59,490 --> 00:05:05,010
negro para hacer eso, realmente necesitamos otro evento y ese evento se disparará cuando termine nuestro vuelo estacionario.

70
00:05:05,010 --> 00:05:07,380
Así que cuando dejamos este elemento y se llama Mouse, vamos a hacer lo mismo primero aliado.

71
00:05:07,410 --> 00:05:13,730
Pero en caso de que Lessner salga del mouse.

72
00:05:14,090 --> 00:05:18,280
Y luego nuestra función de devolución de llamada y nosotros simplemente haremos un primer color de ataque estilo fly y lo estableceremos de nuevo en negro.

73
00:05:19,680 --> 00:05:27,510
Simplemente así, y si actualizamos, puedes ver que se pone verde y

74
00:05:28,080 --> 00:05:37,130
luego el mouse se vuelve negro y el mouse sobre verde, y así sucesivamente.

75
00:05:37,130 --> 00:05:39,590
Así que ahora obtenemos este pequeño efecto

76
00:05:40,020 --> 00:05:45,000
de desplazamiento que nos muestra sobre qué estamos flotando básicamente qué hacer es seleccionado.

77
00:05:45,190 --> 00:05:46,960
Entonces, hagamos que esto funcione para cada mentira.

78
00:05:46,950 --> 00:05:50,130
Solo necesitamos hacer algunos pequeños cambios.

79
00:05:50,160 --> 00:05:52,230
Y el primero de ellos es que debemos seleccionar todos los aliados.

80
00:05:52,260 --> 00:05:55,460
que nos da una lista con los tres aliados.

81
00:05:55,510 --> 00:06:02,940
Van a cambiar muy variables ya que son mentiras de preguntas documentadas que envían cartas a todos los aliados por lo

82
00:06:02,940 --> 00:06:05,070
Y luego, por supuesto, lamentablemente no podemos hacer esto simplemente porque un oyente de eventos no funciona.

83
00:06:05,400 --> 00:06:10,690
Necesitamos hacer un for loop cuatro de nuestro igual a cero.

84
00:06:11,160 --> 00:06:14,860
Yo menos que mentiras ese enlace.

85
00:06:15,090 --> 00:06:18,950
Plus plus.

86
00:06:19,080 --> 00:06:20,710
Y espero que empieces a sentirte

87
00:06:20,870 --> 00:06:25,150
un poco más cómodo haciendo esto agregando eventos o manipulando algo en lugar de un

88
00:06:25,140 --> 00:06:30,100
bucle donde seleccionamos un montón de ellos y luego hacemos un recorrido y hacemos algo individualmente.

89
00:06:30,090 --> 00:06:30,990
Como dije hace

90
00:06:31,180 --> 00:06:35,490
algunos videos, un patrón realmente común es muy importante para que comencemos a sentirnos cómodos con él.

91
00:06:35,500 --> 00:06:36,470
Así que dentro de aquí, en lugar de hacer primero, agregaría el detector de eventos.

92
00:06:36,490 --> 00:06:40,550
Estamos trabajando con los aliados con los ojos de paréntesis, ese es nuestro aliado individual.

93
00:06:40,650 --> 00:06:45,760
Y luego voy a copiar este código y hay un problema con este código.

94
00:06:45,930 --> 00:06:51,950
Quiero decir que funcionará pero no funcionará de la manera que queremos.

95
00:06:51,960 --> 00:06:55,090
Lo que sucederá es que estamos agregando un oyente de eventos a cada aliados aliados.

96
00:06:55,360 --> 00:07:00,450
Pero cuando pasamos el mouse sobre alguno de ellos, solo estamos cambiando el primer estilo de punto aliado de color negro.

97
00:07:00,960 --> 00:07:06,430
Y en realidad no funcionará porque la primera mentira ya no está definida.

98
00:07:06,540 --> 00:07:09,800
Cambiamos el nombre

99
00:07:09,810 --> 00:07:10,860
Pero eso no es lo que queríamos de todos modos.

100
00:07:11,040 --> 00:07:12,740
Queremos que sea el aliado sobre el que ocurrió el evento mouse over.

101
00:07:12,750 --> 00:07:17,220
Entonces podemos cambiar esto a la palabra esto.

102
00:07:17,440 --> 00:07:21,110
Recuerde que la palabra clave this en lugar de un detector

103
00:07:21,270 --> 00:07:26,400
de eventos se refiere al elemento o al elemento sobre el que se desencadenó el evento.

104
00:07:26,400 --> 00:07:28,020
Así que este estilo, pero coloreó la pantalla igual y luego volveremos a duplicar este código.

105
00:07:28,260 --> 00:07:33,210
Pero en lugar de pasar el ratón, haremos un mouse y, en

106
00:07:33,850 --> 00:07:41,940
lugar de ir a Green, volveremos a negro y luego podemos deshacernos de esto y refrescarnos y ahí vamos.

107
00:07:42,630 --> 00:07:48,780
Tenemos nuestro bonito y pequeño efecto de desplazamiento.

108
00:07:48,880 --> 00:07:50,710
Entonces, lo último de lo que hablarán es agregar un oyente de clic solo para hacer esto un poco más completo.

109
00:07:51,060 --> 00:07:55,830
Lo mismo que pensé que tenía un oyente de evento, haga clic en agregar o una función de devolución de llamada.

110
00:07:56,230 --> 00:08:07,150
Y lo que vamos a hacer aquí es usar una clase.

111
00:08:07,480 --> 00:08:10,610
Así que solo voy a agregar la clase primero.

112
00:08:10,830 --> 00:08:12,910
clases de inicio que se alterna.

113
00:08:12,900 --> 00:08:19,520
No existe, pero voy a decir que esto hace la lista de clases y alternará la lista de

114
00:08:19,600 --> 00:08:20,290
Y solo llamaremos a la clase.

115
00:08:20,560 --> 00:08:22,680
Entonces, el punto es que puedo hacer clic en uno de estos y debe salir gris y tener un efecto de tachado.

116
00:08:23,110 --> 00:08:29,930
Y a pesar de que no tengo una clase definida, todavía se agrega para

117
00:08:30,030 --> 00:08:35,920
que pueda mostrarle que abra la consola e inspeccione uno de estos.

118
00:08:35,910 --> 00:08:38,720
Y luego hagamos clic en él y podrá ver o hacer clic

119
00:08:39,070 --> 00:08:44,080
en el primero que puede ver, por cierto, el color verde y el negro que cambian aquí como un vuelo estacionario.

120
00:08:44,080 --> 00:08:48,470
Pero cuando hago clic en este primero, puede ver que agrega clase.

121
00:08:48,490 --> 00:08:52,920
Y luego hago clic nuevamente y desaparece.

122
00:08:52,920 --> 00:08:55,740
Entonces ahora solo necesitamos definir la clase hecha.

123
00:08:55,750 --> 00:08:58,070
Así que hagámoslo ahora.

124
00:08:58,330 --> 00:08:59,290
Iré a sublime

125
00:08:59,380 --> 00:09:07,350
y crearé un nuevo archivo y voy a guardar esto para hacer eso C Ss y lo primero que haremos es definir nuestra clase hecha.

126
00:09:07,360 --> 00:09:10,310
Y voy a darle un efecto de tachado que hacemos

127
00:09:10,950 --> 00:09:16,960
con la decoración de texto y establecemos esa línea y también cambiamos la opacidad para que la opacidad sea 0. 5 y guardar.

128
00:09:16,950 --> 00:09:24,450
ellos como una etiqueta para Due's Gutsiest Us y podemos ahorrar.

129
00:09:24,820 --> 00:09:30,160
Y luego, por supuesto, necesita vincular esto para comenzar a evaluar o añejar el archivo con

130
00:09:30,900 --> 00:09:33,990
Ahora vamos a probarlo.

131
00:09:34,000 --> 00:09:35,440
Usted actualiza la página.

132
00:09:35,660 --> 00:09:36,830
Yo vuelo.

133
00:09:36,850 --> 00:09:37,470
Así que obtén dos eventos que cambian el color negro y verde.

134
00:09:37,500 --> 00:09:41,520
Y ahora puedo hacer clic y obtenemos un efecto de tachado.

135
00:09:41,520 --> 00:09:45,360
Y esta línea también.

136
00:09:45,540 --> 00:09:47,900
en lugar de cambiar el color manualmente aquí.

137
00:09:48,120 --> 00:09:53,550
Hay algunos pequeños cambios que haría. Sin embargo, si volvemos a nuestro archivo javascript, el primero es

138
00:09:53,560 --> 00:09:56,590
Cambiándolo a verde y negro.

139
00:09:56,640 --> 00:09:58,350
Creo que es mejor hacerlo con nuestra propia clase.

140
00:09:58,600 --> 00:10:00,800
Así que voy a hacer una nueva clase

141
00:10:00,850 --> 00:10:07,240
y voy a llamar a esta seleccionada y luego voy a decir cuando el texto seleccionado o el color debe ser verde así como así.

142
00:10:07,240 --> 00:10:12,060
Y luego iremos con el Javascript.

143
00:10:12,310 --> 00:10:13,880
Y cuando pasamos el mouse sobre todo lo que queremos hacer es decir que esta lista de clase agrega seleccionada.

144
00:10:13,990 --> 00:10:21,250
javascript para activar partes de nuestros C Ss y SAS estará a cargo del diseño.

145
00:10:23,160 --> 00:10:29,340
Y esto se debe a esa idea de separación de intereses en

146
00:10:29,350 --> 00:10:36,250
la que no queremos que nuestros javascript manipulen estilos individuales, sino que podemos usar

147
00:10:36,250 --> 00:10:38,170
Así que eso le dará la clase seleccionada cuando

148
00:10:38,460 --> 00:10:44,550
pasemos el mouse y cuando salgamos o cuando nos desordenemos haremos esta lista de clase estúpida remove selected y si guardamos refresh podremos ver que se ve bastante bien.

149
00:10:44,560 --> 00:10:55,040
Hacemos clic en obtener nuestro tachado.

150
00:10:55,530 --> 00:10:59,460
Todo bien.

151
00:11:00,080 --> 00:11:00,590
Hay una pequeña lista de cosas por hacer.

152
00:11:00,610 --> 00:11:02,260
Entonces esta es una forma un poco más agradable de hacerlo.

153
00:11:02,740 --> 00:11:05,000
Funcionalmente se ve igual.

154
00:11:05,050 --> 00:11:06,390
Es una mejor práctica usar clases en lugar de agregar y ajustar estilos de uno en uno.

155
00:11:06,420 --> 00:11:11,720
Entonces, para resumir, vimos dos nuevos eventos mouseover y mouse out.

156
00:11:11,740 --> 00:11:16,270
Y también obtuvimos más práctica configurando eventos en lugar de un bucle donde utilizamos esta palabra clave

157
00:11:16,530 --> 00:11:21,690