1
00:00:00,510 --> 00:00:01,810
Va bene bentornato.

2
00:00:01,860 --> 00:00:07,110
In questo video voglio parlare un po 'di più su alcuni dei diversi tipi di eventi

3
00:00:07,110 --> 00:00:14,070
fino ad ora abbiamo incontrato l'evento click e l'evento change che abbiamo usato su un input di testo o un numero

4
00:00:14,070 --> 00:00:15,640
inserito nell'app keeper keeper.

5
00:00:15,780 --> 00:00:18,930
Inizierò introducendo il M. B. UN. riferimento all'evento.

6
00:00:18,930 --> 00:00:20,720
Quindi questa è la pagina web su cui sono qui.

7
00:00:20,940 --> 00:00:26,790
E questa pagina web è un riferimento a tutti i diversi eventi riconosciuti dall'API DOM.

8
00:00:26,910 --> 00:00:30,840
E se scorri verso il basso potresti essere sorpreso da quanti ce ne sono.

9
00:00:31,260 --> 00:00:36,570
E in realtà sto per farti scrivere un codice nel prossimo esercizio solo per contare quanti

10
00:00:36,570 --> 00:00:41,040
ce ne sono di un divertente esempio pratico di usare la geometria dei contro. Quindi conterai quanti ce ne sono, ma per ora sai solo che ce ne sono

11
00:00:41,310 --> 00:00:45,990
un sacco e probabilmente ci sono cinque o sei forse fino a 10 molto comuni che

12
00:00:45,990 --> 00:00:53,490
useranno tutto il tempo cose come per trascinare e rilasciare per un evento di click event in bilico può fare doppio clic su eventi di key

13
00:00:53,520 --> 00:01:00,120
press, ma in caso contrario molti di quelli più oscuri non verranno mai utilizzati o forse li userete una volta in un progetto.

14
00:01:00,120 --> 00:01:04,780
Ma è bello sapere che questa pagina web esiste che

15
00:01:05,190 --> 00:01:09,660
ci sono così tanti eventi che potremmo non usare mai.

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

17
00:01:10,740 --> 00:01:15,240
E questo video mi concentrerò su due eventi in particolare che hanno a che fare con il passaggio del mouse su un

18
00:01:15,240 --> 00:01:16,980
E quelli sono chiamati mouse e mouse fuori.

19
00:01:17,100 --> 00:01:20,490
Quindi ho una semplice applicazione e farò in modo che sia chiamato

20
00:01:20,790 --> 00:01:26,550
a farlo invecchiare nel mio nuovo file e aggiungerò il mio standard standard e questa non sarà una lista completa.

21
00:01:26,580 --> 00:01:31,910
Non saremo in grado di aggiungere nuovi o quello che faremo è avere una UL con tre o quattro alleati.

22
00:01:31,920 --> 00:01:37,950
Cose come lavare gatto mangimi per gatti e faremo nutrire il gatto con il cane e salvare.

23
00:01:38,070 --> 00:01:51,060
Quindi abbiamo le nostre tre cose da fare e questo è tutto ciò di cui abbiamo bisogno per ora.

24
00:01:51,060 --> 00:01:54,340
E quello che voglio fare.

25
00:01:54,630 --> 00:01:55,530
Lo aprirò nel browser.

26
00:01:55,530 --> 00:01:58,590
Voglio essere in grado di fare clic

27
00:01:58,590 --> 00:02:04,380
e questo dovrebbe oscurare l'elemento da fare e forse barrato da una riga.

28
00:02:04,380 --> 00:02:05,190
Ma voglio anche essere in grado di fluttuare e voglio sapere su quale mi stavo librando.

29
00:02:05,340 --> 00:02:09,250
Quindi ottengo questo bel feedback da parte degli utenti mentre passo il mouse su uno di questi.

30
00:02:09,270 --> 00:02:12,960
Forse cambierai colore o il grassetto inizierà semplicemente rendendolo verde e

31
00:02:12,960 --> 00:02:18,210
ci sono così tanti effetti che puoi fare per il tuo utente usando questi eventi hover.

32
00:02:18,210 --> 00:02:21,640
Quindi lo dimostrerò in questo momento prima di poter scrivere qualsiasi javascript, anche se abbiamo bisogno di creare il nostro file.

33
00:02:21,810 --> 00:02:26,400
Quindi salverò un nuovo file e lo chiamerò per fare.

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

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

36
00:02:32,520 --> 00:02:44,580
sempre ho avuto il mio avviso connesso salva torna qui e aggiungi il nostro script in basso e la nostra fonte è uguale al punto di deuce J. S. e salveremo o aggiorneremo e riceveremo la nostra attenzione.

37
00:02:44,580 --> 00:02:51,520
Ciò significa che sta funzionando.

38
00:02:51,630 --> 00:02:53,190
Andiamo al primo evento che

39
00:02:53,850 --> 00:02:58,710
ho menzionato e la prima cosa che dobbiamo fare è selezionare qualcosa prima di poterlo manipolare.

40
00:02:58,770 --> 00:03:00,100
Quindi comincio solo a farlo alla prima bugia.

41
00:03:00,120 --> 00:03:03,050
Quindi userò il documento var first allly ECOs

42
00:03:03,180 --> 00:03:12,810
e farò un alleato selettore di query e ricordo che questo mi dà la prima bugia perché non ho fatto un selettore di query tutto

43
00:03:12,810 --> 00:03:18,210
e quindi ho intenzione di aggiungere il mio listener di eventi al primo alleato.

44
00:03:18,270 --> 00:03:19,560
Quindi siamo andati

45
00:03:19,740 --> 00:03:27,750
prima di tutto ad aggiungere listener di eventi e l'evento che stiamo ascoltando non è fare clic con il mouse sopra.

46
00:03:28,290 --> 00:03:30,060
E poi diamo la nostra funzione di callback.

47
00:03:30,060 --> 00:03:32,350
E il modo in cui funziona il mouseover sta per sparare non appena iniziamo a librarsi sopra qualcosa.

48
00:03:33,300 --> 00:03:38,650
e ora e il secondo e proprio ora e questo primo.

49
00:03:38,790 --> 00:03:46,170
Quindi, se stavo lavorando con quest'ultimo alleato, il mio mouse si sarebbe sparato proprio ora

50
00:03:46,170 --> 00:03:47,880
Quindi riguarda quando inizia il passaggio del mouse.

51
00:03:47,880 --> 00:03:50,760
Quindi per prima cosa aggiungerei mouseover di listener

52
00:03:50,910 --> 00:03:57,570
di eventi e faremo semplicemente un log invece di un mouse di callback e, se aggiorniamo la nostra

53
00:03:59,130 --> 00:04:05,730
console, ricordiamo che l'abbiamo fatto solo al primo alleato e che ora andiamo a prendere il mouseover.

54
00:04:05,730 --> 00:04:06,950
Inoltre, è importante notare che non spara continuamente ogni volta.

55
00:04:07,080 --> 00:04:11,610
Sai che siamo sopra questo è quando inizia il nostro passaggio del mouse su un elemento.

56
00:04:11,660 --> 00:04:16,050
che il logging è costante o quale sia il codice che abbiamo nel callback.

57
00:04:16,080 --> 00:04:20,610
Quindi questo è utile in modo che non siamo costantemente in grado di sapere

58
00:04:20,610 --> 00:04:21,770
Succede solo quando si passa il mouse inizialmente.

59
00:04:21,780 --> 00:04:24,530
Quindi piuttosto che cancellare la registrazione, lavoriamo sul cambiamento del colore dell'alleato.

60
00:04:24,900 --> 00:04:29,660
Facciamo verde.

61
00:04:29,670 --> 00:04:30,640
Quindi quando passi il mouse su di esso diventa verde.

62
00:04:30,720 --> 00:04:32,880
Quindi dobbiamo fare lo stile

63
00:04:32,880 --> 00:04:43,870
del primo alleato che il colore è uguale al verde e salviamo il refresh e ora guarderò che lo renderò un po 'più grande e lo renderò

64
00:04:43,880 --> 00:04:49,950
un po' più grande qui e lo aggiornerò quando avanzo il mouse sopra diventa verde.

65
00:04:49,950 --> 00:04:50,800
E poi quando vado via rimane verde che non è quello che vogliamo.

66
00:04:51,240 --> 00:04:55,300
Vogliamo solo che questo sia un effetto hover.

67
00:04:55,410 --> 00:04:57,110
Quindi quando passo il mouse sull'alleato diventa verde.

68
00:04:57,150 --> 00:04:59,460
Ma quando smetto torna ad essere nero per

69
00:04:59,490 --> 00:05:05,010
fare ciò, abbiamo effettivamente bisogno di un altro evento e quell'evento sparerà quando il nostro passaggio al volo sarà finito.

70
00:05:05,010 --> 00:05:07,380
Quindi, quando lasciamo questo elemento e si chiama Mouse out, faremo prima la stessa cosa.

71
00:05:07,410 --> 00:05:13,730
Ma all'evento Lessner.

72
00:05:14,090 --> 00:05:18,280
E poi la nostra funzione di callback e faremo solo un primo attacco di colore stile di volo e riportarlo al nero.

73
00:05:19,680 --> 00:05:27,510
Proprio così e se aggiorniamo puoi vedere che diventa verde e poi

74
00:05:28,080 --> 00:05:37,130
il mouse torna al nero e al mouse su un verde e così via.

75
00:05:37,130 --> 00:05:39,590
Così ora otteniamo questo piccolo effetto di passaggio

76
00:05:40,020 --> 00:05:45,000
del mouse che ci mostra cosa stiamo passando sopra in sostanza, che cosa è selezionato.

77
00:05:45,190 --> 00:05:46,960
Quindi ora facciamo in modo che funzioni per ogni singola bugia.

78
00:05:46,950 --> 00:05:50,130
Sono solo alcuni piccoli cambiamenti che dobbiamo fare.

79
00:05:50,160 --> 00:05:52,230
E il primo di questi è che dobbiamo selezionare tutti gli alleati.

80
00:05:52,260 --> 00:05:55,460
dà una lista con i tre alleati.

81
00:05:55,510 --> 00:06:02,940
Cambierà molto variabili per essere lontane bugie documentate lettera di alleati in modo che ci

82
00:06:02,940 --> 00:06:05,070
E poi, naturalmente, sfortunatamente non possiamo fare solo bugie di un ascoltatore di eventi che non funziona.

83
00:06:05,400 --> 00:06:10,690
Dobbiamo fare un ciclo for quattro dei nostri pari zero.

84
00:06:11,160 --> 00:06:14,860
Io meno di bugie quel collegamento.

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

86
00:06:19,080 --> 00:06:20,710
E si spera che tu stia

87
00:06:20,870 --> 00:06:25,150
iniziando a sentirti un po 'più a tuo agio nel fare questo aggiungendo eventi o manipolando qualcosa

88
00:06:25,140 --> 00:06:30,100
invece di un ciclo in cui selezioniamo un gruppo di essi e poi passiamo in loop e facciamo qualcosa individualmente.

89
00:06:30,090 --> 00:06:30,990
Come ho detto

90
00:06:31,180 --> 00:06:35,490
alcuni video fa, uno schema molto comune è davvero importante per iniziare a metterci a nostro agio.

91
00:06:35,500 --> 00:06:36,470
Quindi all'interno di qui invece di fare il primo altro, aggiungerei listener di eventi.

92
00:06:36,490 --> 00:06:40,550
Stiamo lavorando con gli occhi delle parentesi degli alleati, quindi questo è il nostro alleato individuale.

93
00:06:40,650 --> 00:06:45,760
E poi ho intenzione di copiare questo codice e c'è un problema con questo codice.

94
00:06:45,930 --> 00:06:51,950
Voglio dire, funzionerà, ma non funzionerà nel modo in cui lo vogliamo.

95
00:06:51,960 --> 00:06:55,090
Quello che succederà è che stiamo aggiungendo un listener di eventi ad ogni alleato alleato.

96
00:06:55,360 --> 00:07:00,450
Ma quando passiamo sopra a qualcuno di loro, cambiamo solo i primi punti alleati di colore nero.

97
00:07:00,960 --> 00:07:06,430
E in realtà non funzionerà perché la prima bugia non è più definita.

98
00:07:06,540 --> 00:07:09,800
Abbiamo cambiato il nome.

99
00:07:09,810 --> 00:07:10,860
Ma non è quello che volevamo comunque.

100
00:07:11,040 --> 00:07:12,740
Vogliamo che sia l'alleato al di sopra del quale si è verificato l'evento del mouse su.

101
00:07:12,750 --> 00:07:17,220
Quindi possiamo cambiare questo alla parola questo.

102
00:07:17,440 --> 00:07:21,110
Ricorda che la parola chiave al posto di un listener

103
00:07:21,270 --> 00:07:26,400
di eventi fa riferimento all'elemento o all'elemento su cui è stato attivato l'evento.

104
00:07:26,400 --> 00:07:28,020
Quindi questo stile ma colorato a schermo uguale e quindi duplicheremo nuovamente questo codice.

105
00:07:28,260 --> 00:07:33,210
Ma invece del mouse sopra faremo un mouse e invece

106
00:07:33,850 --> 00:07:41,940
di andare a Green torneremo al nero e poi potremo sbarazzarci di questo e rinfrescarci e eccoci.

107
00:07:42,630 --> 00:07:48,780
Abbiamo il nostro bel effetto hover.

108
00:07:48,880 --> 00:07:50,710
Quindi l'ultima cosa di cui parleranno è l'aggiunta di un listener di clic solo per renderlo un po 'più completo.

109
00:07:51,060 --> 00:07:55,830
Quindi la stessa cosa che pensavo avesse un click list di eventi o una funzione di callback.

110
00:07:56,230 --> 00:08:07,150
E quello che faremo qui è usare una classe.

111
00:08:07,480 --> 00:08:10,610
Quindi aggiungerò prima la classe.

112
00:08:10,830 --> 00:08:12,910
classi iniziali che si alternano.

113
00:08:12,900 --> 00:08:19,520
Non esiste ma dirò questo fa l'elenco delle classi e cambierà la lista delle

114
00:08:19,600 --> 00:08:20,290
E chiameremo semplicemente la lezione.

115
00:08:20,560 --> 00:08:22,680
Quindi il punto è che posso fare clic su uno di questi e dovrebbe uscire in grigio e avere un effetto barrato.

116
00:08:23,110 --> 00:08:29,930
E anche se non ho una lezione definita, è ancora aggiunta, quindi

117
00:08:30,030 --> 00:08:35,920
posso mostrarti che apri la console e ispezioniamo uno di questi.

118
00:08:35,910 --> 00:08:38,720
E poi facciamo clic su di esso e puoi vedere o

119
00:08:39,070 --> 00:08:44,080
fare clic sul primo che puoi vedere dal modo in cui il colore verde e nero cambia qui come un hover.

120
00:08:44,080 --> 00:08:48,470
Ma mentre clicco su questo primo si può vedere che aggiunge lezioni fatte.

121
00:08:48,490 --> 00:08:52,920
E poi clicco di nuovo e va via.

122
00:08:52,920 --> 00:08:55,740
Quindi ora abbiamo solo bisogno di definire la lezione fatta.

123
00:08:55,750 --> 00:08:58,070
Quindi facciamolo ora.

124
00:08:58,330 --> 00:08:59,290
Vado oltre a

125
00:08:59,380 --> 00:09:07,350
sublimare e creare un nuovo file e ho intenzione di salvare questo come fare è C Ss e la prima cosa che facciamo è definire la nostra classe fatta.

126
00:09:07,360 --> 00:09:10,310
E ho intenzione di dargli un effetto barrato che facciamo

127
00:09:10,950 --> 00:09:16,960
con la decorazione del testo e abbiamo impostato tale linea e anche modificare l'opacità in modo che l'opacità sarà 0. 5 e salvare.

128
00:09:16,950 --> 00:09:24,450
con loro come tag a Due's gutsiest e possiamo salvare.

129
00:09:24,820 --> 00:09:30,160
E poi ovviamente devi collegare questo per iniziare a valutare o invogliare il file

130
00:09:30,900 --> 00:09:33,990
Ora proviamo.

131
00:09:34,000 --> 00:09:35,440
Aggiorna la pagina.

132
00:09:35,660 --> 00:09:36,830
Mi fermo.

133
00:09:36,850 --> 00:09:37,470
Quindi ottenere sono due eventi cambiando il colore nero e verde.

134
00:09:37,500 --> 00:09:41,520
E ora posso fare clic e otteniamo un effetto barrato.

135
00:09:41,520 --> 00:09:45,360
E anche questa linea.

136
00:09:45,540 --> 00:09:47,900
è piuttosto che cambiare manualmente il colore qui.

137
00:09:48,120 --> 00:09:53,550
Ci sono alcune piccole modifiche che vorrei fare Tuttavia se torniamo al nostro file javascript il primo

138
00:09:53,560 --> 00:09:56,590
Cambiando per essere verde e nero.

139
00:09:56,640 --> 00:09:58,350
Penso che sia ancora meglio farlo con la nostra classe.

140
00:09:58,600 --> 00:10:00,800
Quindi ho intenzione di creare una nuova

141
00:10:00,850 --> 00:10:07,240
classe e chiamerò quella selezionata e poi dirò quando è selezionato il testo o il colore dovrebbe essere verde proprio così.

142
00:10:07,240 --> 00:10:12,060
E poi andremo con il Javascript.

143
00:10:12,310 --> 00:10:13,880
E quando passiamo il mouse sopra tutto ciò che vogliamo fare è dire aggiungere questa lista di classe.

144
00:10:13,990 --> 00:10:21,250
per attivare parti delle nostre C S e SAS sarà effettivamente responsabile dello stile.

145
00:10:23,160 --> 00:10:29,340
E questo torna a quell'idea di separazione delle preoccupazioni in cui non

146
00:10:29,350 --> 00:10:36,250
vogliamo che i nostri javascript manipolino gli stili individuali piuttosto che possiamo usare javascript

147
00:10:36,250 --> 00:10:38,170
In questo modo la classe selezionata verrà selezionata

148
00:10:38,460 --> 00:10:44,550
quando passeremo il mouse sopra e quando partiremo o quando scompariremo, faremo rimuovere questa lista di classi stupide e se salviamo l'aggiornamento, è possibile vederlo abbastanza bene.

149
00:10:44,560 --> 00:10:55,040
Clicchiamo otteniamo il nostro barrato.

150
00:10:55,530 --> 00:10:59,460
Tutto ok.

151
00:11:00,080 --> 00:11:00,590
C'è un piccolo elenco da fare.

152
00:11:00,610 --> 00:11:02,260
Quindi questo è un modo leggermente più bello di farlo.

153
00:11:02,740 --> 00:11:05,000
Funzionalmente sembra uguale.

154
00:11:05,050 --> 00:11:06,390
È solo una pratica migliore utilizzare le classi piuttosto che aggiungere e modificare gli stili uno alla volta.

155
00:11:06,420 --> 00:11:11,720
Quindi, per riassumere qui abbiamo visto due nuovi eventi mouseover e mouse out.

156
00:11:11,740 --> 00:11:16,270
E abbiamo anche avuto un po 'più di pratica nell'impostare eventi invece di un ciclo in cui abbiamo usato questa parola chiave

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