1
00:00:00,380 --> 00:00:05,190
OK, volveremos. La próxima función que quiero abordar es el botón X aquí.

2
00:00:05,190 --> 00:00:11,730
Por lo tanto, cuando hacemos clic en esta X, en realidad debería eliminar todo Para hacerlo, no solo en

3
00:00:11,730 --> 00:00:14,060
gris, sino que debería desvanecerse y eliminarse.

4
00:00:14,190 --> 00:00:16,530
Entonces se ve así en la versión final.

5
00:00:16,710 --> 00:00:22,170
No tenemos el mismo icono para hacer clic en los mismos colores o la animación, pero la funcionalidad

6
00:00:22,170 --> 00:00:24,890
cuando hago clic en algo debe ser la misma.

7
00:00:24,930 --> 00:00:28,100
Entonces digamos que ya terminé con los platos.

8
00:00:28,440 --> 00:00:30,400
Se desvanece y luego desaparece.

9
00:00:30,450 --> 00:00:33,010
Y ya no está aquí, se ha ido por completo.

10
00:00:33,320 --> 00:00:34,250
DE ACUERDO.

11
00:00:34,590 --> 00:00:39,350
Lo primero que queremos hacer es escuchar un clic en cualquiera de estos archivos.

12
00:00:39,660 --> 00:00:45,460
Y en nuestra época Tim recordaré que hicimos cada uno un lapso para que podamos hacer eso fácilmente.

13
00:00:45,690 --> 00:00:51,780
De lo contrario, si solo tuviéramos una X como parte de la mentira, no hay manera de determinar si nuestro clic está en la

14
00:00:51,780 --> 00:00:54,140
X o si está en el resto del camino.

15
00:00:54,150 --> 00:01:00,680
Así que acabamos de estar allí y ahora vamos a ir a un javascript y agreguemos otro comentario.

16
00:01:00,960 --> 00:01:08,330
Haga clic en X para borrar para hacerlo, comenzaremos con el evento click.

17
00:01:08,760 --> 00:01:10,740
Así que signo de dólar.

18
00:01:10,770 --> 00:01:20,880
Seleccione todas las spand Y va a hacer clic de nuevo y luego necesitamos una función de devolución de llamada

19
00:01:20,940 --> 00:01:34,110
y en lugar de nuestra devolución de llamada haremos otro clic en un lapso como ese y volveremos a actualizar, hacemos clic en la mentira, no

20
00:01:34,110 --> 00:01:35,200
ocurre nada.

21
00:01:35,340 --> 00:01:39,840
Tan pronto como hacemos clic en el tramo, obtenemos una alerta que dice que ha hecho clic en este tramo.

22
00:01:39,840 --> 00:01:45,420
Hay un pequeño problema que puede que aún no hayas notado cuando hago clic en el lapso

23
00:01:45,420 --> 00:01:52,690
y luego hago clic en la X. Obtengo la alerta que espero obtener, pero también presto mucha atención al descartar la alerta.

24
00:01:53,190 --> 00:01:57,380
También obtenemos los estilos que provienen del evento click.

25
00:01:57,840 --> 00:02:04,680
Entonces, lo que eso nos dice es que el evento de spam se está disparando y luego el evento de clic

26
00:02:04,680 --> 00:02:05,500
también se activa.

27
00:02:05,730 --> 00:02:11,480
Y eso tiene sentido porque nuestros tramos están dentro de los aliados.

28
00:02:11,730 --> 00:02:17,130
Así que cuando hacemos clic en un tramo cuando hago clic en este tramo, por ejemplo, en el medio, inspeccionémoslo. Estoy

29
00:02:21,990 --> 00:02:25,680
haciendo clic en este tramo, pero ese es el español también dentro del aliado.

30
00:02:25,830 --> 00:02:29,370
Entonces, desde otra perspectiva, estoy haciendo clic en la mentira.

31
00:02:29,620 --> 00:02:36,660
clic en el pozo porque todos estos son en lugar de un UL o en el contenedor de identificación

32
00:02:36,660 --> 00:02:46,320
div o en el cuerpo o en el elemento de equipo que está pasando por un clic en este lapso sabes cinco o seis diferentes capas.

33
00:02:46,350 --> 00:02:48,640
Pero desde otra perspectiva estoy haciendo

34
00:02:48,660 --> 00:02:53,880
Entonces cuando agregamos el detector de eventos al tramo o al aliado o si tenemos un oyente de eventos y

35
00:02:53,880 --> 00:02:55,790
todos los que te mostraré ahora mismo.

36
00:02:55,920 --> 00:03:04,020
Así que agreguemos otro oyente de eventos aquí y este estará en el testamento y nos pondremos en

37
00:03:04,020 --> 00:03:07,990
alerta haciendo clic en UIL y haremos uno más.

38
00:03:08,280 --> 00:03:16,080
Y este estará en el contenedor de identificación de divx y esto dirá click en contenedor div y

39
00:03:16,230 --> 00:03:19,560
en realidad lo hará en el cuerpo también.

40
00:03:19,560 --> 00:03:22,510
Y esto dirá click en el cuerpo.

41
00:03:22,740 --> 00:03:23,410
DE ACUERDO.

42
00:03:23,430 --> 00:03:28,880
Así que hacemos clic en el tramo que es en lugar de un aliado en lugar de un UL en

43
00:03:28,890 --> 00:03:30,510
lugar del contenedor dentro del cuerpo.

44
00:03:30,510 --> 00:03:34,530
Ahora prestemos atención cuando actualizamos al orden en que las cosas se activan.

45
00:03:34,590 --> 00:03:42,570
Así que primero hago clic en el tramo y me dice que hice clic en el tramo y luego no sé si lo has notado, pero

46
00:03:42,600 --> 00:03:47,090
el evento click fire lo hace bien, así es como obtuvimos los estilos allí.

47
00:03:47,340 --> 00:03:53,060
Y luego haga clic en el evento y luego en el contenedor div y luego en el cuerpo finalmente.

48
00:03:53,340 --> 00:03:56,980
Entonces, ese ejemplo ilustra un fenómeno llamado evento burbujeante.

49
00:03:57,030 --> 00:04:02,290
Lo que sucede es que este evento inicialmente se desencadena en el lapso y es allí donde se origina.

50
00:04:02,400 --> 00:04:05,130
Pero luego surge en dos elementos principales.

51
00:04:05,130 --> 00:04:11,490
Por lo tanto, surge en la mentira y desencadenará cualquier evento de clic similar y luego de allí brota

52
00:04:11,490 --> 00:04:17,730
hasta la lata del pozo, lo que desencadenará cualquier evento de clic y así sucesivamente hasta que llegue al

53
00:04:17,880 --> 00:04:20,830
elemento HTL donde se detiene para evitar el mentira.

54
00:04:20,850 --> 00:04:25,840
Haga clic en el controlador para que se dispare cuando haga clic en el lapso que está dentro de Y.

55
00:04:25,860 --> 00:04:31,250
Lo que podemos hacer es decirle al evento dentro del tramo que ya no haga más burbujas.

56
00:04:31,440 --> 00:04:36,920
Solo para detenerse en sus pistas y no desencadenar ningún otro evento en el elemento padre.

57
00:04:37,050 --> 00:04:38,600
Así que te mostraré eso aquí.

58
00:04:38,960 --> 00:04:44,220
Todo lo que tenemos que hacer en lugar de este span escucha rápida que agregamos en el objeto del evento.

59
00:04:44,220 --> 00:04:48,210
Y nuevamente esto se puede llamar E evento T.

60
00:04:48,420 --> 00:04:51,720
Cualquier nombre que desee el más común es evento o e.

61
00:04:51,900 --> 00:04:59,110
Y luego lo que haremos es agregar un método llamado propagación de detención de eventos.

62
00:04:59,790 --> 00:05:04,050
Y este es un método de codificación J que evitará que el evento burbujee.

63
00:05:04,050 --> 00:05:09,960
Por lo tanto, se activará en el intervalo, pero no continuará en el oyente similar o cualquiera de estos que tenemos

64
00:05:09,960 --> 00:05:10,940
para ese asunto.

65
00:05:11,310 --> 00:05:13,620
Entonces si guardamos y refrescamos

66
00:05:14,090 --> 00:05:20,210
Y ahora hago clic en un lapso de tiempo. Todavía obtengo mi clic en el tramo y luego se detiene.

67
00:05:20,250 --> 00:05:25,740
No conseguimos ninguno de esos otros oyentes que habíamos configurado disparando a otro que tenemos el oyente

68
00:05:25,800 --> 00:05:26,970
de span configurado correctamente.

69
00:05:27,060 --> 00:05:29,560
Vamos a completarlo con el código correcto.

70
00:05:29,940 --> 00:05:35,490
Lo que necesitamos hacer es cuando hagamos clic en un lapso. Regresaré al navegador cuando haga clic en uno

71
00:05:35,490 --> 00:05:36,170
de estos.

72
00:05:36,330 --> 00:05:44,460
Queremos eliminar esta mentira para que la mentira que la contiene se actualice.

73
00:05:44,850 --> 00:05:52,140
Hago clic en este lapso para quitar esta mentira y para hacerlo podemos comenzar desde el lapso usando el

74
00:05:52,140 --> 00:05:58,810
signo de dólar y si solo hacemos dólares en este eliminar o desaparecer pero comenzaremos con eliminar.

75
00:05:59,790 --> 00:06:01,780
Y volvemos.

76
00:06:02,190 --> 00:06:05,220
Todo lo que sucede es que el lapso se va.

77
00:06:05,220 --> 00:06:08,020
En este momento estamos eliminando el lapso.

78
00:06:08,130 --> 00:06:14,000
Necesitamos eliminar el elemento que lo rodea y Shakeri nos brinda una manera realmente agradable y fácil de hacerlo.

79
00:06:14,040 --> 00:06:22,680
Todo lo que tenemos que hacer es escribir que los padres eliminen y eso en realidad nos dará el elemento padre como

80
00:06:22,680 --> 00:06:24,120
un elemento de consulta.

81
00:06:24,120 --> 00:06:32,940
Así que este es un lapso en el que hicimos clic en el padre nos da la mentira quitar eliminará a todo el aliado.

82
00:06:33,120 --> 00:06:39,500
Entonces, si actualizo puedes ver que desaparece y refrescar nuevamente.

83
00:06:39,500 --> 00:06:46,110
Pero si hago clic sobre la marcha, simplemente marca la última mejora que podríamos hacer en vez

84
00:06:46,110 --> 00:06:47,500
de eliminarla inmediatamente.

85
00:06:47,750 --> 00:06:48,770
Se desvaneció.

86
00:06:49,140 --> 00:06:59,510
Así que haremos un fundido de puntos y comenzaremos allí. Volvemos a actualizar. Hacemos clic y se desvanece.

87
00:07:00,090 --> 00:07:03,530
Pero recuerda que el hecho de acondicionarlo no lo elimina.

88
00:07:03,570 --> 00:07:09,570
si inspeccionamos en lugar de nuestro bien, todavía tenemos tres que hacer, solo dos de ellos no tienen ninguno.

89
00:07:09,720 --> 00:07:10,810
Todavía está aquí

90
00:07:11,130 --> 00:07:12,660
Y no queremos que eso suceda.

91
00:07:12,660 --> 00:07:15,470
Imagina que teníamos que perder mil que habíamos eliminado.

92
00:07:15,720 --> 00:07:20,240
Bueno, no queremos desacelerar las cosas teniendo miles de elementos ocultos en nuestra página.

93
00:07:20,250 --> 00:07:26,820
Entonces, lo que haremos será usar remove pero recuerde que no funciona solo para hacer esto.

94
00:07:26,820 --> 00:07:30,770
Lo eliminará pero no esperará a que termine el fundido.

95
00:07:30,900 --> 00:07:40,820
que hacemos clic en él comienza a desvanecerse e inmediatamente después de que se elimina si queremos que el fundido finalice, todo lo que

96
00:07:41,620 --> 00:07:49,170
tenemos que hacer es utilizar la devolución de llamada que podemos pasar al desvanecimiento que se ejecutará después.

97
00:07:49,500 --> 00:07:51,580
Si queremos demostrar tan rápidamente

98
00:07:51,690 --> 00:07:56,820
Y vamos a darle una duración, digamos quinientos milisegundos para comenzar.

99
00:07:57,180 --> 00:08:00,680
Y luego, cuando termine, no podemos simplemente llamar a eliminar por sí mismo.

100
00:08:00,720 --> 00:08:06,360
Necesitamos llamarlo en un elemento y el elemento que queremos que llame es el mismo que estamos

101
00:08:06,360 --> 00:08:09,320
rellenando para que podamos usar un signo de dólar.

102
00:08:09,420 --> 00:08:18,940
Esto es importante notar que esto aquí mismo no es el mismo signo de dólar aquí mismo.

103
00:08:19,470 --> 00:08:24,330
Así que veamos que es un poco complicado cuando hacemos clic en un signo de dólar español.

104
00:08:24,330 --> 00:08:30,410
Esto se refiere al elemento que fue rápido en el lapso, pero luego estamos haciendo los padres.

105
00:08:30,600 --> 00:08:37,720
Así que ahora estamos trabajando con la mentira que encierra ese tramo y luego estamos haciendo fadeout sobre la marcha.

106
00:08:37,800 --> 00:08:43,080
Entonces, en lugar de desvanecerse, esto se refiere a la mentira, no al lapso.

107
00:08:43,590 --> 00:08:47,470
De acuerdo, guardaremos y volveremos a actualizar.

108
00:08:47,730 --> 00:08:54,700
Ahora obtenemos un buen desvanecimiento y si inspeccionamos la UL, solo nos queda una vida.

109
00:08:55,110 --> 00:08:57,600
Entonces se desvanece y luego se elimina.

110
00:08:57,810 --> 00:08:59,610
Para resumir todo aquí.

111
00:08:59,610 --> 00:09:05,250
El primer problema con el que tropezamos fue que nuestros eventos, el evento de clics en el tramo,

112
00:09:05,250 --> 00:09:09,610
en realidad disparaban el evento sobre la marcha también después de que se disparaba.

113
00:09:10,110 --> 00:09:15,090
Entonces, para solucionarlo, utilizamos eventos que detienen la propagación, lo que evita que se propague a otros elementos.

114
00:09:15,780 --> 00:09:22,530
Y luego usamos ese padre para recuperar al aliado que está encerrando el lapso en el que se hizo clic

115
00:09:22,530 --> 00:09:23,750
y luego lo desvanecimos.

116
00:09:23,940 --> 00:09:29,430
Y luego, cuando termine el fade out, eliminaremos toda la mentira en el próximo video, vamos a abordar

117
00:09:29,430 --> 00:09:30,970
la funcionalidad nueva para hacer