1
00:00:00,210 --> 00:00:01,440
OK, vamos voltar.

2
00:00:01,470 --> 00:00:03,590
Então, temos um método menos que eu quero falar.

3
00:00:03,740 --> 00:00:09,160
Como mencionei no vídeo de introdução aos eventos da J Korea, o método on é o que usaremos.

4
00:00:09,200 --> 00:00:13,980
Noventa e nove por cento do tempo é, de longe, o método de evento Jay-yery mais utilizado.

5
00:00:14,280 --> 00:00:14,490
ESTÁ BEM.

6
00:00:14,490 --> 00:00:18,580
Então, vamos falar sobre como funciona é muito parecido com a baunilha.

7
00:00:18,620 --> 00:00:20,790
Sim, um ouvinte de eventos.

8
00:00:20,790 --> 00:00:22,270
Obviamente, é muito mais curto.

9
00:00:22,290 --> 00:00:28,200
São apenas dois personagens, mas se comporta de forma semelhante, onde damos o nome do

10
00:00:28,200 --> 00:00:29,590
evento que queremos ouvir.

11
00:00:29,760 --> 00:00:37,650
Então, ao contrário do clique ou da tecla, pressione que só disparará em um tipo de clique de evento ou pressionar uma tecla, nos

12
00:00:37,650 --> 00:00:45,780
permite especificar se estamos fazendo um clique, como estamos fazendo aqui, enviar no clique ou se estamos fazendo um duplo clique Como eu tenho aqui

13
00:00:45,780 --> 00:00:53,730
o botão com um clique duplo ou um arrastar para começar ou uma tecla, pressione assim que pode assumir o lugar de todas as

14
00:00:53,730 --> 00:00:58,760
coisas que você já viu com clique e pressione e todos os outros métodos aqui.

15
00:00:58,870 --> 00:01:06,670
Há uma tonelada deles como scroll e enviar e alternar a tecla pressionar a tecla creeky para baixo.

16
00:01:06,780 --> 00:01:10,410
Tudo isso pode ser feito com apenas o método on.

17
00:01:10,410 --> 00:01:15,480
Isso funciona da mesma maneira, porém, onde precisamos selecionar algo com o sinal de dólar primeiro.

18
00:01:15,870 --> 00:01:17,450
Então, vou mostrar um exemplo aqui.

19
00:01:17,730 --> 00:01:23,490
Selecionamos algo neste caso todos os professores dentro do corpo dentro de algo com a idéia

20
00:01:23,490 --> 00:01:28,500
de tabela de dados e então o executamos e depois o tipo do evento.

21
00:01:28,500 --> 00:01:33,740
Portanto, isso é novo em comparação com o clique e pressionar a tecla, que só aceitam uma função de retorno de chamada.

22
00:01:33,840 --> 00:01:36,560
Precisamos especificar o evento para o qual estamos ouvindo.

23
00:01:36,750 --> 00:01:40,810
Então, clique neste caso e, em seguida, coma a função de retorno de chamada.

24
00:01:40,830 --> 00:01:42,550
Queremos ser executados.

25
00:01:42,660 --> 00:01:45,930
Então vamos tentar isso para atualizar minha página.

26
00:01:45,930 --> 00:01:47,100
Meu AJ pediu demonstração.

27
00:01:47,130 --> 00:01:51,390
Portanto, não temos ouvintes de cliques, portanto, não há cliques em que não temos pressionamentos de teclas.

28
00:01:51,390 --> 00:01:53,350
Também não acontece nos nossos botões.

29
00:01:53,760 --> 00:01:57,600
Vamos tentar e adicionar alguns ouvintes rápidos primeiro.

30
00:01:57,630 --> 00:02:00,660
Vamos mudar a cor do H-1 quando clicamos nele.

31
00:02:00,720 --> 00:02:10,230
Portanto, precisamos selecionar cada um e depois vamos fazer no primeiro argumento é o tipo de evento que é rápido e,

32
00:02:10,230 --> 00:02:13,570
em seguida, nossa função de retorno de chamada.

33
00:02:13,950 --> 00:02:20,640
E dentro da função de retorno de chamada se queríamos mudar a cor do H-1, poderíamos fazer

34
00:02:20,640 --> 00:02:30,750
algo como esse, onde simplesmente dizemos o H-1 corajoso para nós, Color Purple, e veja se você consegue pensar por que isso pode ser um

35
00:02:30,750 --> 00:02:31,260
problema.

36
00:02:31,320 --> 00:02:38,880
Então eu vou entrar em Enter e funciona bem, fica roxo, mas vou copiar esse código

37
00:02:38,880 --> 00:02:44,700
e atualizar a página e vou adicionar outro H-1 três deles e salvar.

38
00:02:44,790 --> 00:02:46,340
Agora temos três H-1.

39
00:02:46,770 --> 00:02:55,160
E se eu executar este código novamente, digo qualquer H-1 quando clicarmos sobre isso, altere todos os h para ser roxo.

40
00:02:55,200 --> 00:02:57,060
Então vou tentar isso.

41
00:02:57,090 --> 00:03:02,910
Todos eles mudam para o roxo, que talvez seja um recurso que queremos, mas na maioria das vezes queremos afetar

42
00:03:03,060 --> 00:03:04,670
um item em que clicamos.

43
00:03:04,950 --> 00:03:13,830
Então, para fazer isso tudo atualizado, precisamos usar a palavra-chave e lembrar que precisa ser o wrapper de consulta J

44
00:03:13,980 --> 00:03:14,790
para isso.

45
00:03:14,790 --> 00:03:21,600
Portanto, o dólar marca parênteses, isso e aquele refere-se a um H-1 ou a uma coisa que foi clicada.

46
00:03:22,180 --> 00:03:28,400
E agora, se eu tocar Enter e eu tento clicar apenas nas alterações H-1 corretas para o roxo.

47
00:03:29,040 --> 00:03:31,770
OK, então é assim que podemos usar para fazer um clique.

48
00:03:31,770 --> 00:03:34,150
Agora vamos ver como usá-lo para uma pressão de tecla.

49
00:03:34,290 --> 00:03:35,760
Então, selecionaremos a

50
00:03:38,610 --> 00:03:50,070
nossa entrada como esse ponto e depois adicionaremos a tecla pressionada e o segundo argumento é a função de retorno de chamada e nós faremos um

51
00:03:50,070 --> 00:03:51,740
simples registro de conses.

52
00:03:51,870 --> 00:03:59,170
Então, cancele a tecla Log pressionada assim e vamos entrar.

53
00:03:59,200 --> 00:04:06,540
Agora, se eu digitar uma chave aqui, pego ele pressionar toda vez que eu digitar uma chave.

54
00:04:06,540 --> 00:04:09,740
Vamos tentar mais um tipo de evento aqui, vou atualizar.

55
00:04:10,080 --> 00:04:12,190
Vamos fazer algo quando passamos o mouse sobre um botão.

56
00:04:12,390 --> 00:04:15,770
Vamos mudar a fonte para ser em negrito quando eu passar.

57
00:04:15,840 --> 00:04:21,670
Então, precisamos primeiro selecionar todos os botões assim e depois adicionar o nosso.

58
00:04:21,880 --> 00:04:24,730
E o evento que usaremos é chamado Mouse Enter.

59
00:04:24,930 --> 00:04:25,860
Bem desse jeito.

60
00:04:26,280 --> 00:04:31,280
E começamos com apenas cancelado o log quando o mouse entrar.

61
00:04:31,290 --> 00:04:38,240
Então, vamos fazer um mouse de log criado digitar assim.

62
00:04:38,610 --> 00:04:44,090
E agora, se eu passar por cima, eu entro um mouse assim.

63
00:04:44,340 --> 00:04:46,420
E é só quando entramos pela primeira vez no elemento.

64
00:04:46,680 --> 00:04:50,300
Então, não continua a disparar uma e outra vez até eu sair e voltar.

65
00:04:50,750 --> 00:04:51,060
ESTÁ BEM.

66
00:04:51,060 --> 00:04:55,450
Então, quando entramos no mouse, não vamos querer registrar constantemente.

67
00:04:55,470 --> 00:05:02,880
Nós vamos querer selecionar o J muito wrapper para isso e fazer o SS muito ousado, algo que precisamos para alterar

68
00:05:02,880 --> 00:05:04,140
o peso da fonte.

69
00:05:04,350 --> 00:05:13,020
Então, maneiras divertidas e vamos fazer isso dobrar assim e pressionar Enter.

70
00:05:13,020 --> 00:05:18,310
Agora, se eu forçar, é difícil ver o que ele muda para ser ousado.

71
00:05:18,390 --> 00:05:21,200
Claro que fica corajoso, nunca muda de volta.

72
00:05:21,390 --> 00:05:29,670
fazendo o mesmo com o botão na saída do mouse que é outro evento e, em vez de mudá-lo para o peso da fonte.

73
00:05:30,150 --> 00:05:32,040
Então, podemos adicionar esse recurso

74
00:05:32,040 --> 00:05:32,670
Negrito.

75
00:05:32,670 --> 00:05:36,800
Podemos mudá-lo de volta ao normal assim.

76
00:05:36,810 --> 00:05:40,420
Agora, se eu deixar isso, volta ao normal.

77
00:05:40,830 --> 00:05:43,530
E se eu entrar em negrito, deixo o normal.

78
00:05:43,950 --> 00:05:50,610
Então, é assim que podemos fazer algo com o javascript para fazer um tipo de efeito de seleção de hover.

79
00:05:50,670 --> 00:05:57,000
No entanto, com o CSSA agora podemos fazer isso facilmente sem qualquer javascript com o pseudo seletor.

80
00:05:57,490 --> 00:06:00,510
E eu só queria demonstrar que existem outros eventos lá fora.

81
00:06:00,720 --> 00:06:06,060
Então, todos os eventos que podemos usar com um ouvinte de eventos que podemos usar com o que o

82
00:06:06,060 --> 00:06:06,890
torna realmente útil.

83
00:06:06,990 --> 00:06:09,500
Como mencionei, vamos usá-lo o tempo todo.

84
00:06:09,840 --> 00:06:14,690
Então, há um último ponto sobre o qual eu gostaria de fazer e como exemplo eu vou usar.

85
00:06:14,690 --> 00:06:16,440
Clique e ligue.

86
00:06:16,440 --> 00:06:19,510
Clique e fale sobre como eles são ligeiramente diferentes.

87
00:06:19,800 --> 00:06:22,230
Então, eles, ambos, geralmente trabalharão para você.

88
00:06:22,230 --> 00:06:28,290
que é que o clique só irá adicionar ouvintes de cliques para os elementos que estão na página naquele momento.

89
00:06:28,290 --> 00:06:31,590
Eles vão adicionar um ouvinte rápido, mas há uma pequena diferença,

90
00:06:32,040 --> 00:06:37,790
E o clique clicará nos ouvintes para todos os elementos futuros ou elementos futuros potenciais.

91
00:06:37,980 --> 00:06:40,430
Então, isso terá sentido quando você fizer a lista de tarefas.

92
00:06:40,530 --> 00:06:47,010
Mas, basicamente, precisamos usar o ponto no clique ao invés de clicar porque teremos que fazer que são adicionados à página

93
00:06:47,010 --> 00:06:52,060
que não estão lá quando a página carrega um usuário digita um formulário e entra em cena.

94
00:06:52,260 --> 00:06:57,090
E isso vai fazer um novo para fazer e queremos que os novos façam para ter seus próprios ouvintes de cliques.

95
00:06:57,090 --> 00:07:01,930
Então, precisamos usar novamente, o que fará mais sentido quando realmente começamos a fazer a lista.