1
00:00:00,510 --> 00:00:01,810
Tudo bem, de volta.

2
00:00:01,860 --> 00:00:07,110
Neste vídeo, eu quero falar um pouco mais sobre alguns dos diferentes tipos de eventos até o

3
00:00:07,110 --> 00:00:14,070
momento, encontramos o evento de clique e o evento de mudança que usamos em uma entrada de texto ou uma entrada de

4
00:00:14,070 --> 00:00:15,640
número no aplicativo de pontuação.

5
00:00:15,780 --> 00:00:18,930
Vou começar apresentando o M. B. UMA. referência do evento.

6
00:00:18,930 --> 00:00:20,720
Então, essa é a página da web em que estou aqui.

7
00:00:20,940 --> 00:00:26,790
E esta página web é uma referência para todos os eventos diferentes que são reconhecidos pela API DOM.

8
00:00:26,910 --> 00:00:30,840
E se nos deslocarmos para baixo, você pode se surpreender com quantos existem.

9
00:00:31,260 --> 00:00:36,570
E eu realmente vou ter você no próximo exercício, escreva algum código apenas para contar

10
00:00:36,570 --> 00:00:41,040
quantos há é um divertido exemplo prático de usar a geometria dos contras. Então, você vai contar quantos há, mas por agora só sei que há uma

11
00:00:41,310 --> 00:00:45,990
tonelada deles e provavelmente há cinco ou seis talvez até 10 pessoas realmente comuns que

12
00:00:45,990 --> 00:00:53,490
usarão o tempo todo como arrastar e soltar para um evento que flui para o clique, talvez seja um clique duplo, pressione os eventos

13
00:00:53,520 --> 00:01:00,120
de tecla, mas, de outra forma, muitos mais obscuros nunca usarão ou talvez você os use uma vez em um projeto.

14
00:01:00,120 --> 00:01:04,780
Mas é bom saber que esta página web existe

15
00:01:05,190 --> 00:01:09,660
que há tantos eventos que talvez nunca possamos usar.

16
00:01:09,660 --> 00:01:10,510
elemento com o mouse.

17
00:01:10,740 --> 00:01:15,240
E este vídeo vou me concentrar em dois eventos em particular, que tem a ver com pairar tão pairando sobre um

18
00:01:15,240 --> 00:01:16,980
E esses são chamados de mouse e mouse.

19
00:01:17,100 --> 00:01:20,490
Então eu tenho um aplicativo simples e vou fazer com que ele seja chamado para

20
00:01:20,790 --> 00:01:26,550
fazer essa idade dele no meu novo arquivo e eu só vou adicionar meu boilerplate regular e isso não vai ser uma lista completa de tarefas.

21
00:01:26,580 --> 00:01:31,910
Nós não poderemos adicionar novos ou o que vamos fazer é ter uma UL com três ou quatro aliados.

22
00:01:31,920 --> 00:01:37,950
Coisas como o gato de alimentação do gato da lavagem e nós faremos o gato para o cachorro e salve.

23
00:01:38,070 --> 00:01:51,060
Então nós temos nossos três para fazer e isso é tudo o que precisamos por enquanto.

24
00:01:51,060 --> 00:01:54,340
E o que eu quero fazer.

25
00:01:54,630 --> 00:01:55,530
Eu vou abrir isso no navegador.

26
00:01:55,530 --> 00:01:58,590
Eu quero ser capaz de clicar e isso deve

27
00:01:58,590 --> 00:02:04,380
cinza para fora do item para fazer e talvez tachado ele coloque uma linha através dele.

28
00:02:04,380 --> 00:02:05,190
Mas eu também quero poder pairar e eu quero saber qual eu estou passando.

29
00:02:05,340 --> 00:02:09,250
Então eu recebo esses comentários agradáveis ​​dos usuários enquanto eu passo sobre um desses.

30
00:02:09,270 --> 00:02:12,960
Talvez você tenha mudado de cor ou o negrito começará apenas tornando-o

31
00:02:12,960 --> 00:02:18,210
verde e há tantos efeitos agradáveis ​​que você pode fazer para o seu usuário usando esses eventos hover.

32
00:02:18,210 --> 00:02:21,640
Então, vou mostrar isso agora, antes que possamos realmente escrever qualquer javascript, porém precisamos fazer nosso arquivo.

33
00:02:21,810 --> 00:02:26,400
Então eu vou salvar um novo arquivo e eu chamarei isso para fazer.

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

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

36
00:02:32,520 --> 00:02:44,580
sempre eu tinha o meu alerta conectado salvar, volte aqui e adicione nosso script na parte inferior e nossa fonte é igual ao deuce dot J. S. e vamos economizar ou atualizar e recebemos nosso alerta.

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

38
00:02:51,630 --> 00:02:53,190
Vamos ao primeiro evento que

39
00:02:53,850 --> 00:02:58,710
mencionei e a primeira coisa que precisamos fazer é selecionar algo antes de podermos manipular.

40
00:02:58,770 --> 00:03:00,100
Então, vou começar por fazê-lo até a primeira mentira.

41
00:03:00,120 --> 00:03:03,050
Então, eu vou usar o documento de var

42
00:03:03,180 --> 00:03:12,810
e alo primeiro ECO e eu vou fazer um seletor de consultas e lembrar que isso me dá a primeira mentira porque eu não fiz

43
00:03:12,810 --> 00:03:18,210
um seletor de consulta e depois vou adicionar meu ouvinte de eventos primeiro aliado.

44
00:03:18,270 --> 00:03:19,560
Então, fomos

45
00:03:19,740 --> 00:03:27,750
primeiro ally add event listenener e o evento que estamos ouvindo não é clicar no mouse.

46
00:03:28,290 --> 00:03:30,060
E então nós damos nossa função de retorno de chamada.

47
00:03:30,060 --> 00:03:32,350
E do jeito que o mouseover funciona, ele dispara assim que começarmos a passar por algo.

48
00:03:33,300 --> 00:03:38,650
e agora e o segundo e agora e este primeiro.

49
00:03:38,790 --> 00:03:46,170
Então, se eu estivesse trabalhando com este último aliado, meu mouse passaria fogo agora

50
00:03:46,170 --> 00:03:47,880
Então, é quando o avanço começa.

51
00:03:47,880 --> 00:03:50,760
Então, primeiro, eu adicionaria o wrestler do evento

52
00:03:50,910 --> 00:03:57,570
e simplesmente fazemos um registro em vez de um mouse de retorno de chamada e, se atualizarmos, abra nosso

53
00:03:59,130 --> 00:04:05,730
console, lembre-se de que nós apenas o fizemos para o primeiro aliado e lá nós vamos, nós conseguimos um mouseover.

54
00:04:05,730 --> 00:04:06,950
Também é importante notar que não está disparando continuamente a cada momento.

55
00:04:07,080 --> 00:04:11,610
Você sabe que estamos por cima disso, é quando o nosso passar do mouse sobre um elemento realmente começa.

56
00:04:11,660 --> 00:04:16,050
registro ou seja qual for o código que temos no retorno de chamada.

57
00:04:16,080 --> 00:04:20,610
Então, isso é útil para que não estivésemos constantemente, você conhece constantemente o

58
00:04:20,610 --> 00:04:21,770
Isso só acontece quando nos deslocamos inicialmente.

59
00:04:21,780 --> 00:04:24,530
Então, em vez de simplesmente cancelar esse registro, vamos trabalhar em mudar a cor do aliado.

60
00:04:24,900 --> 00:04:29,660
Vamos torná-lo verde.

61
00:04:29,670 --> 00:04:30,640
Então, quando voce passa, fica verde.

62
00:04:30,720 --> 00:04:32,880
Então, precisamos fazer o primeiro

63
00:04:32,880 --> 00:04:43,870
estilo de ponto aliado que a cor é igual a verde e economizamos a atualização e agora vejo que vou torná-lo um pouco maior e torná-lo

64
00:04:43,880 --> 00:04:49,950
um pouco maior aqui e atualizar quando eu começar o mouse, ele fica verde.

65
00:04:49,950 --> 00:04:50,800
E então, quando eu sair, fica verde o que não é o que queremos.

66
00:04:51,240 --> 00:04:55,300
Nós só queremos que este seja um efeito de deslocamento.

67
00:04:55,410 --> 00:04:57,110
Então, quando eu desliso sobre o aliado, ele fica verde.

68
00:04:57,150 --> 00:04:59,460
Mas quando eu parar, ele volta a ser

69
00:04:59,490 --> 00:05:05,010
preto para fazer isso, nós realmente precisamos de outro evento e esse evento disparará quando o nosso passarinho acabar.

70
00:05:05,010 --> 00:05:07,380
Então, quando deixamos esse elemento e é chamado Mouse, então vamos fazer o mesmo primeiro aliado.

71
00:05:07,410 --> 00:05:13,730
Mas no evento Lessner sair.

72
00:05:14,090 --> 00:05:18,280
E, em seguida, nossa função de retorno de chamada e vamos apenas fazer uma primeira cor de ataque de estilo de mosca e configurá-lo de volta ao preto.

73
00:05:19,680 --> 00:05:27,510
Assim, e se atualizarmos, você pode ver que fica verde e depois

74
00:05:28,080 --> 00:05:37,130
o mouse volta para preto e mouse sobre um verde e assim por diante.

75
00:05:37,130 --> 00:05:39,590
Então, agora conseguimos esse pequeno efeito constante

76
00:05:40,020 --> 00:05:45,000
que nos mostra o que estamos passando, basicamente, o que fazer é selecionado.

77
00:05:45,190 --> 00:05:46,960
Então, vamos fazer com que isso funcione para cada única mentira.

78
00:05:46,950 --> 00:05:50,130
São apenas algumas pequenas mudanças que precisamos fazer.

79
00:05:50,160 --> 00:05:52,230
E o primeiro deles é que precisamos selecionar todos os aliados.

80
00:05:52,260 --> 00:05:55,460
forneça uma lista com os três aliados.

81
00:05:55,510 --> 00:06:02,940
Vão mudar muito variável para ser mentirosos, documentado, consulta todas as alias para que nos

82
00:06:02,940 --> 00:06:05,070
E, claro, infelizmente, não podemos simplesmente fazer isso mentiras que um ouvinte de eventos que não funciona.

83
00:06:05,400 --> 00:06:10,690
Precisamos fazer um loop para quatro de nossos iguais zero.

84
00:06:11,160 --> 00:06:14,860
Eu menos que mentiras que ligam.

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

86
00:06:19,080 --> 00:06:20,710
E espero que você esteja começando

87
00:06:20,870 --> 00:06:25,150
a sentir-se um pouco mais confortável fazendo isso adicionando eventos ou manipulando algo em vez

88
00:06:25,140 --> 00:06:30,100
de um loop onde selecionamos um monte de eles e então seguimos e fazemos algo individualmente.

89
00:06:30,090 --> 00:06:30,990
Como eu disse

90
00:06:31,180 --> 00:06:35,490
alguns vídeos, realmente padrão comum realmente importante que começamos a ficar confortáveis ​​com ele.

91
00:06:35,500 --> 00:06:36,470
Então, dentro daqui, em vez de fazer a primeira coisa, eu adicionaria o ouvinte de eventos.

92
00:06:36,490 --> 00:06:40,550
Estamos trabalhando com aliados de olhos de suporte, de modo que seja nosso aliado individual.

93
00:06:40,650 --> 00:06:45,760
E então eu vou apenas copiar este código e há um problema com este código.

94
00:06:45,930 --> 00:06:51,950
Quero dizer, ele funcionará, mas não vai funcionar da maneira que queremos.

95
00:06:51,960 --> 00:06:55,090
O que acontecerá é que estamos adicionando um ouvinte de eventos a cada aliados aliados.

96
00:06:55,360 --> 00:07:00,450
Mas quando passamos por cima de qualquer um deles, estamos apenas mudando o primeiro estilo de ponto aliado de cor preta.

97
00:07:00,960 --> 00:07:06,430
E na verdade não funcionará porque a primeira mentira já não está definida.

98
00:07:06,540 --> 00:07:09,800
Nós mudamos o nome.

99
00:07:09,810 --> 00:07:10,860
Mas isso não é o que queríamos de qualquer maneira.

100
00:07:11,040 --> 00:07:12,740
Queremos que seja o aliado que esteve sobre o ocorrido no evento do mouse sobre o evento.

101
00:07:12,750 --> 00:07:17,220
Então, podemos mudar isso para a palavra isso.

102
00:07:17,440 --> 00:07:21,110
Lembre-se de que a palavra-chave, em vez de um ouvinte

103
00:07:21,270 --> 00:07:26,400
de eventos, refere-se ao item ou ao elemento em que o evento foi ativado.

104
00:07:26,400 --> 00:07:28,020
Então, esse estilo, mas colorido, igual a tela e então vamos apenas duplicar esse código novamente.

105
00:07:28,260 --> 00:07:33,210
Mas ao invés de passar o mouse sobre nós, faremos um mouse e,

106
00:07:33,850 --> 00:07:41,940
ao invés de ir ao Green, iremos de volta ao preto e então podemos nos livrar disso e atualizar e lá vamos.

107
00:07:42,630 --> 00:07:48,780
Nós temos o nosso pequeno e pequeno efeito.

108
00:07:48,880 --> 00:07:50,710
Então, a última coisa sobre a qual eles falarão é adicionar um ouvinte de cliques apenas para tornar isso um pouco mais completo.

109
00:07:51,060 --> 00:07:55,830
Então, a mesma coisa que eu pensei ter ouvinte de evento clicar em adicionar ou uma função de retorno de chamada.

110
00:07:56,230 --> 00:08:07,150
E o que vamos fazer aqui é usar uma classe.

111
00:08:07,480 --> 00:08:10,610
Então eu vou simplesmente adicionar a classe primeiro.

112
00:08:10,830 --> 00:08:12,910
classe de início que alterna.

113
00:08:12,900 --> 00:08:19,520
Não existe, mas vou dizer que isso faz a lista de aula e vai alternar a lista de

114
00:08:19,600 --> 00:08:20,290
E acabaremos de chamar a classe.

115
00:08:20,560 --> 00:08:22,680
Então, o ponto é que eu posso clicar em um desses e ele deveria ter um efeito Strikehrough.

116
00:08:23,110 --> 00:08:29,930
E mesmo que eu não tenha uma classe definida, ela ainda é adicionada para

117
00:08:30,030 --> 00:08:35,920
que eu possa mostrar que abre o console e inspecionamos um desses.

118
00:08:35,910 --> 00:08:38,720
E, em seguida, vamos clicar nele e você pode ver ou

119
00:08:39,070 --> 00:08:44,080
clicar no primeiro que você pode ver, pelo menos, a cor verde e preta mudando aqui como um hover.

120
00:08:44,080 --> 00:08:48,470
Mas quando eu clicar neste primeiro, você pode ver isso adicionando a classe feita.

121
00:08:48,490 --> 00:08:52,920
E então eu clico novamente e ele vai embora.

122
00:08:52,920 --> 00:08:55,740
Então agora precisamos definir a classe feita.

123
00:08:55,750 --> 00:08:58,070
Então vamos fazer isso agora.

124
00:08:58,330 --> 00:08:59,290
Eu irei para

125
00:08:59,380 --> 00:09:07,350
sublimar e criar um novo arquivo e eu vou salvar isso para fazer isso C Ss e a primeira coisa que fazemos é definir a nossa classe feita.

126
00:09:07,360 --> 00:09:10,310
E eu vou dar um efeito tachado que fazemos com

127
00:09:10,950 --> 00:09:16,960
a decoração de texto e estabelecemos essa linha e também alteramos a opacidade, de modo que a opacidade será 0. 5 e salve.

128
00:09:16,950 --> 00:09:24,450
com eles como tag para Due's gutsiest us e podemos salvar.

129
00:09:24,820 --> 00:09:30,160
E então, é claro, você precisa vincular isso para começar a avaliar ou envelhecer ele arquivo

130
00:09:30,900 --> 00:09:33,990
Agora vamos testá-lo.

131
00:09:34,000 --> 00:09:35,440
Você atualiza a página.

132
00:09:35,660 --> 00:09:36,830
Eu desliso.

133
00:09:36,850 --> 00:09:37,470
Então, são dois eventos que mudam a cor preto e verde.

134
00:09:37,500 --> 00:09:41,520
E agora eu posso clicar e nós conseguimos um efeito tachado.

135
00:09:41,520 --> 00:09:45,360
E esta linha também.

136
00:09:45,540 --> 00:09:47,900
em vez de alterar a cor manualmente aqui.

137
00:09:48,120 --> 00:09:53,550
Existem algumas pequenas mudanças que eu faria. No entanto, se retornarmos ao nosso arquivo javascript, o primeiro é

138
00:09:53,560 --> 00:09:56,590
Mudando para ser verde e preto.

139
00:09:56,640 --> 00:09:58,350
Eu acho ainda melhor fazer isso com a nossa própria classe.

140
00:09:58,600 --> 00:10:00,800
Então eu vou fazer uma nova aula

141
00:10:00,850 --> 00:10:07,240
e vou chamar essa selecionada e depois vou dizer que quando o texto selecionado ou a cor deve ser verde assim.

142
00:10:07,240 --> 00:10:12,060
E então iremos com o Javascript.

143
00:10:12,310 --> 00:10:13,880
E quando passamos o mouse sobre tudo o que queremos fazer é dizer que esta lista de classes adiciona selecionada.

144
00:10:13,990 --> 00:10:21,250
para ativar partes de nossos C Ss e o SAS realmente se encarregará do estilo.

145
00:10:23,160 --> 00:10:29,340
E isso retorna a essa idéia de separação de preocupações em que

146
00:10:29,350 --> 00:10:36,250
não queremos os modelos individuais de manipulação de javascript, mas podemos usar o javascript

147
00:10:36,250 --> 00:10:38,170
Então, isso lhe dará a classe selecionada quando

148
00:10:38,460 --> 00:10:44,550
passarmos o mouse e quando sairmos ou quando bagunçaremos, faremos essa lista de classe burra remover selecionada e, se economizarmos, você pode ver que parece muito bom.

149
00:10:44,560 --> 00:10:55,040
Nós clicamos, nós conseguimos nosso tachado.

150
00:10:55,530 --> 00:10:59,460
Tudo bem.

151
00:11:00,080 --> 00:11:00,590
Há um pouco para fazer a lista.

152
00:11:00,610 --> 00:11:02,260
Então, esta é uma maneira um pouco melhor de fazê-lo.

153
00:11:02,740 --> 00:11:05,000
Funcionalmente parece ser o mesmo.

154
00:11:05,050 --> 00:11:06,390
É apenas uma prática melhor usar classes em vez de adicionar e ajustar estilos um de cada vez.

155
00:11:06,420 --> 00:11:11,720
Então, para resumir, vimos dois novos eventos, mouseover e mouse.

156
00:11:11,740 --> 00:11:16,270
E também obtivemos mais prática ao configurar eventos em vez de um loop em que usamos essa palavra-chave

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