1
00:00:00,380 --> 00:00:05,190
OK, vamos voltar o próximo recurso que quero abordar é o botão X aqui.

2
00:00:05,190 --> 00:00:11,730
Então, quando clicamos neste X, ele realmente deve remover o todo Para fazer isso, não apenas acinzentado,

3
00:00:11,730 --> 00:00:14,060
mas deve realmente desaparecer e excluir.

4
00:00:14,190 --> 00:00:16,530
Então, parece assim na versão final.

5
00:00:16,710 --> 00:00:22,170
Nós não temos o mesmo ícone para clicar nas mesmas cores ou na animação, mas a funcionalidade

6
00:00:22,170 --> 00:00:24,890
quando eu clicar em algo deve ser a mesma.

7
00:00:24,930 --> 00:00:28,100
Então, digamos que terminei com pratos.

8
00:00:28,440 --> 00:00:30,400
Desaparece e depois desaparece.

9
00:00:30,450 --> 00:00:33,010
E não está mais aqui, ele desapareceu completamente.

10
00:00:33,320 --> 00:00:34,250
ESTÁ BEM.

11
00:00:34,590 --> 00:00:39,350
A primeira coisa que queremos fazer é ouvir um clique em qualquer um desses exes.

12
00:00:39,660 --> 00:00:45,460
E na nossa época, Tim lembrarei que fizemos cada uma uma extensão para que possamos facilmente fazer isso.

13
00:00:45,690 --> 00:00:51,780
Caso contrário, se tivéssemos apenas um X como parte da mentira, não há como determinar se o nosso clique está no

14
00:00:51,780 --> 00:00:54,140
X ou se está no resto do caminho.

15
00:00:54,150 --> 00:01:00,680
Então, acabamos de estar lá e agora iremos para um javascript e vamos adicionar outro comentário.

16
00:01:00,960 --> 00:01:08,330
Clique em X para excluir para fazer, então vamos começar com o evento de clique.

17
00:01:08,760 --> 00:01:10,740
Então sinal de dólar.

18
00:01:10,770 --> 00:01:20,880
Selecione tudo spand E você clicará novamente e então precisamos de uma função de retorno de chamada

19
00:01:20,940 --> 00:01:34,110
e, em vez de nossa devolução de chamada, vamos fazer outro clique em um espaço assim e vamos voltar atualizar, clicamos na mentira,

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

21
00:01:35,340 --> 00:01:39,840
Assim que clicamos no intervalo, recebemos um alerta que diz que você clicou nesta extensão.

22
00:01:39,840 --> 00:01:45,420
Há um pequeno problema que talvez você ainda não tenha notado quando eu clicar no intervalo e

23
00:01:45,420 --> 00:01:52,690
depois clicar no X. Recebo o alerta que eu espero obter, mas também preste muita atenção à medida que descartei o alerta.

24
00:01:53,190 --> 00:01:57,380
Também obtemos os estilos que vêm do evento de clique.

25
00:01:57,840 --> 00:02:04,680
Então, o que isso nos diz é que o evento de spam está disparando e, depois, o evento do clique está

26
00:02:04,680 --> 00:02:05,500
disparando também.

27
00:02:05,730 --> 00:02:11,480
E isso faz sentido porque nossos limites estão dentro dos aliados.

28
00:02:11,730 --> 00:02:17,130
Então, quando clicamos em um intervalo quando eu clicar neste período, por exemplo, no meio, inspecionei-o, estou

29
00:02:21,990 --> 00:02:25,680
clicando neste período, mas isso também é espanhol dentro do aliado.

30
00:02:25,830 --> 00:02:29,370
Então, de outra perspectiva, estou clicando na mentira.

31
00:02:29,620 --> 00:02:36,660
clicando no poço, porque todos estes são em vez de um UL ou no contêiner de identificação

32
00:02:36,660 --> 00:02:46,320
div ou no corpo ou no elemento da equipe que um clique nesse período está passando você conhece cinco ou seis diferentes camadas.

33
00:02:46,350 --> 00:02:48,640
Mas, de outra perspectiva, estou

34
00:02:48,660 --> 00:02:53,880
Então, quando adicionamos o ouvinte de eventos ao span ou ao aliado ou se tivemos um ouvinte de eventos

35
00:02:53,880 --> 00:02:55,790
e todos eles que vou mostrar agora.

36
00:02:55,920 --> 00:03:04,020
Então, vamos adicionar outro ouvinte de eventos aqui e este estará na vontade e nós apenas

37
00:03:04,020 --> 00:03:07,990
alertaremos sobre o UIL e faremos um outro.

38
00:03:08,280 --> 00:03:16,080
E este será no contêiner de identificação divx e isso dirá clicar em div de contêineres e,

39
00:03:16,230 --> 00:03:19,560
de fato, o fará no corpo também.

40
00:03:19,560 --> 00:03:22,510
E isso vai dizer clique no corpo.

41
00:03:22,740 --> 00:03:23,410
ESTÁ BEM.

42
00:03:23,430 --> 00:03:28,880
Então, clicamos no intervalo que é em vez de um aliado em vez de uma UL em vez

43
00:03:28,890 --> 00:03:30,510
do recipiente dentro do corpo.

44
00:03:30,510 --> 00:03:34,530
Agora vamos prestar atenção quando atualizamos a ordem em que as coisas disparam.

45
00:03:34,590 --> 00:03:42,570
Então, primeiro, eu clico no intervalo e me diz que clicou no intervalo e então eu não sei se você notou, mas o evento

46
00:03:42,600 --> 00:03:47,090
do evento do clique faz bem, é assim que conseguimos os estilos lá.

47
00:03:47,340 --> 00:03:53,060
E, em seguida, o bem clique evento, em seguida, o recipiente div e, em seguida, o corpo finalmente.

48
00:03:53,340 --> 00:03:56,980
Então esse exemplo ilustra um fenômeno chamado borbulhamento de eventos.

49
00:03:57,030 --> 00:04:02,290
O que acontece é que este evento inicialmente é desencadeado no intervalo e é aí que ele se origina.

50
00:04:02,400 --> 00:04:05,130
Mas, em seguida, borbulha em dois elementos parentes.

51
00:04:05,130 --> 00:04:11,490
Então, ele se espalha na mentira e ele irá desencadear qualquer tipo de eventos de clique e, a partir daí, ele borbulha

52
00:04:11,490 --> 00:04:17,730
até a lata para o poço, que irá desencadear qualquer evento de clique bem e assim por diante até que ele atinja

53
00:04:17,880 --> 00:04:20,830
o elemento HTL onde ele pára para evitar o mentira.

54
00:04:20,850 --> 00:04:25,840
Clique no manipulador de disparar quando clicamos no intervalo que está dentro do Y.

55
00:04:25,860 --> 00:04:31,250
O que podemos fazer é realmente dizer ao evento dentro do espaço para não mais borbulhar.

56
00:04:31,440 --> 00:04:36,920
Apenas para parar em suas pistas e não desencadear outros eventos no elemento pai.

57
00:04:37,050 --> 00:04:38,600
Então vou mostrar-te aqui.

58
00:04:38,960 --> 00:04:44,220
Tudo o que precisamos fazer em vez deste ouvinte rápida de alcance que adicionamos no objeto de evento.

59
00:04:44,220 --> 00:04:48,210
E, novamente, isso pode ser chamado E event T.

60
00:04:48,420 --> 00:04:51,720
Qualquer nome que você deseja que o mais comum seja evento ou e.

61
00:04:51,900 --> 00:04:59,110
E então, o que faremos é adicionar um método chamado propagação de parada de eventos.

62
00:04:59,790 --> 00:05:04,050
E este é um método de codificação J que irá parar o evento de borbulhar.

63
00:05:04,050 --> 00:05:09,960
Então, ele disparará no espaço, mas não continuará com o ouvinte ou qualquer um desses que temos

64
00:05:09,960 --> 00:05:10,940
para esse assunto.

65
00:05:11,310 --> 00:05:13,620
Então, se nós salvar e atualizar.

66
00:05:14,090 --> 00:05:20,210
E agora eu clico em um intervalo, eu ainda consigo clicar no span e então ele pára.

67
00:05:20,250 --> 00:05:25,740
Nós não recebemos nenhum dos outros ouvintes que nós tínhamos configurado para disparar outro, nós temos o ouvinte

68
00:05:25,800 --> 00:05:26,970
do alcance configurado corretamente.

69
00:05:27,060 --> 00:05:29,560
Vamos preenchê-lo com o código correto.

70
00:05:29,940 --> 00:05:35,490
O que precisávamos fazer é quando clicamos em um intervalo, voltarei ao navegador quando clicarmos em

71
00:05:35,490 --> 00:05:36,170
um desses.

72
00:05:36,330 --> 00:05:44,460
Queremos remover essa mentira para que a mentira que a contém possa atualizar.

73
00:05:44,850 --> 00:05:52,140
Eu clico nesta extensão que precisa remover essa mentira e, para fazer isso, podemos começar a partir do período, usando

74
00:05:52,140 --> 00:05:58,810
o sinal de dólar, e se nós apenas fizermos dólares com isso, remova ou desapareça, mas começamos a remover.

75
00:05:59,790 --> 00:06:01,780
E voltamos.

76
00:06:02,190 --> 00:06:05,220
Tudo o que acontece é que a extensão desaparece.

77
00:06:05,220 --> 00:06:08,020
Nós agora estamos removendo a extensão.

78
00:06:08,130 --> 00:06:14,000
Precisamos remover o elemento envolvente e Shakeri nos dá uma maneira muito agradável e fácil de fazer isso.

79
00:06:14,040 --> 00:06:22,680
Tudo o que temos a fazer é escrever este pais remover e isso realmente nos dará o elemento pai como um

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

81
00:06:24,120 --> 00:06:32,940
Então, este é um período em que clicamos no pai nos dá a mentira remover removerá todo o aliado.

82
00:06:33,120 --> 00:06:39,500
Então, agora, se eu atualizar, você pode ver isso desaparecer e atualizar novamente.

83
00:06:39,500 --> 00:06:46,110
Mas se eu clicar sobre a marcha, ele apenas verifica a última melhoria que podemos fazer é, em

84
00:06:46,110 --> 00:06:47,500
vez de removê-lo imediatamente.

85
00:06:47,750 --> 00:06:48,770
Está desaparecido.

86
00:06:49,140 --> 00:06:59,510
Então, vamos fazer um ponto desaparecer e começar lá, volte a atualizar, clicamos e desaparece.

87
00:07:00,090 --> 00:07:03,530
Mas lembre-se de apenas montá-lo não o remove.

88
00:07:03,570 --> 00:07:09,570
inspecionamos em vez de nosso bem, nós ainda temos três para fazer é que apenas dois deles não exibem nenhum.

89
00:07:09,720 --> 00:07:10,810
Ainda está aqui se

90
00:07:11,130 --> 00:07:12,660
E não queremos que isso aconteça.

91
00:07:12,660 --> 00:07:15,470
Imagine que tivemos mil para perder que tivemos excluído.

92
00:07:15,720 --> 00:07:20,240
Bem, não queremos atrasar as coisas ao ter mil elementos escondidos em nossa página.

93
00:07:20,250 --> 00:07:26,820
Então, o que faremos em vez disso é usar remover, mas lembre-se que não funciona apenas para fazer isso.

94
00:07:26,820 --> 00:07:30,770
Isso irá removê-lo, mas não aguardará o desvanecimento para terminar.

95
00:07:30,900 --> 00:07:40,820
que clicamos, ele começa a desaparecer e, logo depois, ele remove se queremos que o desvanecimento para terminar tudo o que precisamos fazer

96
00:07:41,620 --> 00:07:49,170
é fazer uso do retorno de chamada que podemos passar para o fadeout que será executado depois.

97
00:07:49,500 --> 00:07:51,580
Se quisermos demonstrar tão rapidamente

98
00:07:51,690 --> 00:07:56,820
E vamos dar uma duração, digamos quinze milésimos de segundo para começar.

99
00:07:57,180 --> 00:08:00,680
E então, quando terminar, não podemos simplesmente chamar de remoção por conta própria.

100
00:08:00,720 --> 00:08:06,360
Precisamos ligar para um elemento e o elemento que queremos chamar é o mesmo que estamos

101
00:08:06,360 --> 00:08:09,320
preenchendo para que possamos usar um sinal de dólar.

102
00:08:09,420 --> 00:08:18,940
É importante notar que este aqui não é o mesmo sinal de dólar, aqui mesmo.

103
00:08:19,470 --> 00:08:24,330
Então, vamos passar por isso, é um pouco complicado quando clicamos em um sinal de dólar espanhol.

104
00:08:24,330 --> 00:08:30,410
Isso se refere ao elemento que foi rápido no período, mas depois estamos fazendo o pai.

105
00:08:30,600 --> 00:08:37,720
Então, agora estamos trabalhando com a mentira que encerra esse período e então estamos fazendo fadeout on the fly.

106
00:08:37,800 --> 00:08:43,080
Então, em vez de desaparecer, isso se refere à mentira não ao intervalo.

107
00:08:43,590 --> 00:08:47,470
OK, então vamos poupar e voltar a atualizar.

108
00:08:47,730 --> 00:08:54,700
Agora, temos um bom desvanecimento e se inspecionamos a UL, só temos uma vida.

109
00:08:55,110 --> 00:08:57,600
Então, desaparece e depois remove.

110
00:08:57,810 --> 00:08:59,610
Para resumir tudo aqui.

111
00:08:59,610 --> 00:09:05,250
O primeiro problema que encontramos foi que nossos eventos o evento de clique na extensão foi realmente atirando o

112
00:09:05,250 --> 00:09:09,610
evento sobre a marcha, bem como depois que ele disparou a extensão do mesmo.

113
00:09:10,110 --> 00:09:15,090
Então, para corrigir que usamos o evento que interrompe a propagação, o que o impede de borbulhar até outros elementos.

114
00:09:15,780 --> 00:09:22,530
E então usamos esse pai para recuperar o aliado que está encerrando a extensão que foi clicada

115
00:09:22,530 --> 00:09:23,750
e depois desaparecemos.

116
00:09:23,940 --> 00:09:29,430
E então, quando o desvanecimento é feito, removemos toda a mentira no próximo vídeo, vamos abordar o

117
00:09:29,430 --> 00:09:30,970
novo para fazer a funcionalidade