1
00:00:00,210 --> 00:00:02,150
OK, torneremo.

2
00:00:02,400 --> 00:00:07,620
Nell'introduzione a javascript ho detto che uno dei motivi importanti per imparare javascript è che

3
00:00:07,680 --> 00:00:10,520
possiamo usarlo per rendere le nostre pagine interattive.

4
00:00:10,680 --> 00:00:16,590
È come possiamo eseguire il codice quando un utente fa clic su un pulsante o digita qualcosa o preme il tasto

5
00:00:16,590 --> 00:00:17,920
freccia o qualunque cosa faccia.

6
00:00:18,090 --> 00:00:23,310
Possiamo avere un codice corrispondente che viene eseguito in un dato momento e non appena

7
00:00:23,310 --> 00:00:24,880
eseguito proprio all'inizio della pagina.

8
00:00:25,410 --> 00:00:28,290
Quindi per farlo dobbiamo parlare degli eventi di Dom.

9
00:00:28,320 --> 00:00:31,250
Quindi questo video sarà un'introduzione agli eventi Dom.

10
00:00:31,260 --> 00:00:36,300
Concettualmente il processo per impostarli e quindi anche la sintassi.

11
00:00:36,300 --> 00:00:38,660
Quindi, come ho detto, gli eventi sono ovunque.

12
00:00:38,670 --> 00:00:43,170
Pensa a quando interagisci con la pagina web le diverse cose che accadono puoi cliccare su cose

13
00:00:43,170 --> 00:00:47,330
come un pulsante che puoi passare con il mouse su un link e qualcosa potrebbe apparire.

14
00:00:47,370 --> 00:00:50,320
È possibile trascinare e rilasciare elementi su determinate pagine.

15
00:00:50,550 --> 00:00:55,440
Si potrebbe desiderare di avere un codice che viene eseguito da doppio clic dell'utente o in realtà questa

16
00:00:55,440 --> 00:00:56,650
pagina web ha alcuni esempi.

17
00:00:56,670 --> 00:01:03,550
Questo diapositiva è un sito Web e sto premendo i tasti freccia sinistra e destra per cambiare le diapositive.

18
00:01:03,690 --> 00:01:09,300
Quindi un po 'di codice viene eseguito quando premo il tasto freccia sinistra o il tasto freccia destra o

19
00:01:09,300 --> 00:01:10,050
quando clicco qui.

20
00:01:10,590 --> 00:01:15,780
Questo è anche un evento e sta facendo qualcosa che sta eseguendo del codice che sta cambiando la diapositiva corrente.

21
00:01:16,950 --> 00:01:20,930
Quindi il punto è che gli eventi sono dappertutto e sono davvero eccitanti.

22
00:01:20,920 --> 00:01:26,070
È uno dei miei argomenti preferiti da insegnare perché ora possiamo rendere le nostre pagine Web

23
00:01:26,070 --> 00:01:31,230
interattive che possiamo prendere le cose di manipolazione che abbiamo imparato a cambiare i colori cambiando

24
00:01:31,230 --> 00:01:35,070
il testo e quindi possiamo farlo realmente quando accade qualcosa in particolare.

25
00:01:35,070 --> 00:01:38,340
Quindi questo sblocca davvero il potenziale di manipolare il dormitorio.

26
00:01:38,370 --> 00:01:43,170
È così che faremo i giochi è come formeremo i validatori di form tic

27
00:01:43,170 --> 00:01:49,050
tac che realizzeremo un gioco di selezione dei colori davvero interessante e che tutto deriva da questi eventi.

28
00:01:49,050 --> 00:01:55,890
Quindi il modo in cui funzionano questi eventi è che li colleghiamo effettivamente a elementi specifici, quindi selezioniamo

29
00:01:55,890 --> 00:02:04,440
un elemento come il primo pulsante o il secondo H-1 o l'input in cui un tipo è uguale al testo e quindi associamo

30
00:02:04,440 --> 00:02:07,590
un listener di eventi a tale elemento selezionato.

31
00:02:07,920 --> 00:02:15,540
potremmo essere in ascolto di un clic su un pulsante che potremmo ascoltare per un evento hover su un H1 che potremmo ascoltare

32
00:02:15,540 --> 00:02:20,880
per l'evento key press in un input di testo e parleremo più delle differenze tra questi eventi.

33
00:02:20,880 --> 00:02:21,990
Quindi, ad esempio,

34
00:02:21,990 --> 00:02:26,490
Ci sono così tanti diversi tipi di eventi in javascript, ma l'importante è che

35
00:02:26,490 --> 00:02:30,170
dobbiamo avere un evento che viene ascoltato su un dato elemento.

36
00:02:30,180 --> 00:02:34,890
Quindi, proprio come prima, quando parlerei di selezionare e quindi di manipolare ciò vale ancora.

37
00:02:34,920 --> 00:02:41,190
Dobbiamo selezionare qualcosa e quindi la manipolazione che avviene è aggiungere un listener di eventi

38
00:02:41,190 --> 00:02:43,740
a quella cosa che abbiamo selezionato.

39
00:02:43,740 --> 00:02:48,930
C'è un metodo in particolare che useremo tutto il tempo che si chiama aggiungere listener di eventi.

40
00:02:49,650 --> 00:02:56,200
di input, perché la password e abbiamo qualcosa selezionato, quindi chiamiamo add example listener su di esso e diamo due argomenti.

41
00:02:56,200 --> 00:03:02,160
Quindi al listener di eventi è quello che usiamo una volta che selezioniamo un elemento come il primo pulsante

42
00:03:02,160 --> 00:03:03,070
o il tipo

43
00:03:03,330 --> 00:03:06,950
Il primo è il tipo di evento che vogliamo ascoltare.

44
00:03:07,350 --> 00:03:12,790
E il secondo argomento è il codice che vogliamo eseguire quando si verifica quell'evento.

45
00:03:13,260 --> 00:03:14,330
Quindi ecco un esempio.

46
00:03:14,400 --> 00:03:19,590
Sto selezionando il primo pulsante in una pagina non importa dove sia il pulsante o come

47
00:03:19,590 --> 00:03:22,060
appare o qualsiasi cosa solo un pulsante qualsiasi.

48
00:03:22,350 --> 00:03:29,430
il pulsante al click listener dell'evento e quindi il secondo argomento è una funzione che arriva fino a qui.

49
00:03:29,430 --> 00:03:30,540
E poi chiamo

50
00:03:30,750 --> 00:03:33,690
E questo codice non viene eseguito immediatamente.

51
00:03:33,690 --> 00:03:35,910
Ricorda che questo è chiamato callback.

52
00:03:35,910 --> 00:03:38,140
Questo codice non viene eseguito immediatamente.

53
00:03:38,430 --> 00:03:42,000
Funziona solo una volta che l'evento è stato attivato.

54
00:03:42,000 --> 00:03:46,390
Quindi, una volta cliccato sul pulsante javascript, viene richiamato.

55
00:03:46,440 --> 00:03:51,630
Questa funzione dice hey è il tuo momento di brillare e tornare qui pronto, eseguiamoci.

56
00:03:51,630 --> 00:03:56,040
E poi quel codice viene eseguito e ci viene consigliato non registrare qualcuno fare clic sul pulsante.

57
00:03:56,250 --> 00:04:02,130
Quindi questa funzione verrà eseguita ogni volta che un pulsante è veloce da eseguire con

58
00:04:02,130 --> 00:04:05,290
il pulsante specifico che abbiamo selezionato come cliccato.

59
00:04:05,910 --> 00:04:07,540
Quindi ecco un altro esempio.

60
00:04:07,830 --> 00:04:15,060
In questo caso ho il mark up qui un pulsante e un paragrafo e ho selezionato entrambi con il selettore di Kery e li

61
00:04:15,750 --> 00:04:21,630
ho salvati entrambi in variabili e quindi tutto ciò che facciamo è aggiungere un listener di clic in modo

62
00:04:21,630 --> 00:04:26,910
che il pulsante aggiunga click list e poi il il secondo argomento è la funzione di callback.

63
00:04:26,910 --> 00:04:32,610
clic su quel pulsante cambia il contenuto del testo dei paragrafi in modo che qualcuno faccia clic sul pulsante

64
00:04:32,610 --> 00:04:39,660
e puoi vedere quando faccio clic su quel pulsante che cambia da nessuno mi viene fatto clic e qualcuno deve fare clic sul pulsante.

65
00:04:39,660 --> 00:04:42,260
E quello che faremo ogni volta che si fa

66
00:04:42,930 --> 00:04:50,180
Quindi ora farò una rapida dimostrazione usando la nostra pagina demo Dom iniziamo facendo questo H-1 proprio

67
00:04:50,180 --> 00:04:50,790
qui.

68
00:04:50,810 --> 00:04:53,700
Cambia colore quando un utente fa clic su di esso.

69
00:04:53,780 --> 00:04:58,310
Quindi per farlo dobbiamo iniziare sempre selezionando l'H-1.

70
00:04:58,810 --> 00:05:00,510
Quindi abbiamo un sacco di opzioni lì.

71
00:05:00,530 --> 00:05:09,070
Userò semplicemente il documento di selezione di queery che interroga il selettore H-1 per assicurarci di averlo.

72
00:05:09,310 --> 00:05:10,460
Tutto ok.

73
00:05:10,460 --> 00:05:14,920
Quindi scriviamo semplicemente H-1 che aggiunge listener di eventi.

74
00:05:15,010 --> 00:05:16,790
Ricorda che ci sono due argomenti.

75
00:05:16,940 --> 00:05:19,910
Il primo è l'evento che stiamo ascoltando.

76
00:05:20,060 --> 00:05:24,050
E passeremo ancora un po 'di tempo a parlare dei diversi eventi delle diverse opzioni.

77
00:05:24,050 --> 00:05:30,050
Per ora stiamo facendo solo clic e il secondo è il codice che vogliamo eseguire quando l'utente fa clic.

78
00:05:30,310 --> 00:05:37,060
Quindi, la funzione e basta avviare davvero semplice e basta fare un avviso quando l'utente fa clic.

79
00:05:37,160 --> 00:05:44,330
Quindi faremo un avviso su cui è stato fatto clic su ognuno di essi in questo modo.

80
00:05:44,750 --> 00:05:46,990
E ora colpiamo invio.

81
00:05:47,120 --> 00:05:48,700
Niente cambia subito.

82
00:05:49,190 --> 00:05:52,910
Ma ora se clicco su quello quindi chiuderò questo.

83
00:05:52,910 --> 00:05:54,570
Se clicco ovunque nella pagina.

84
00:05:54,590 --> 00:05:56,400
A parte l'H-1 non succede nulla.

85
00:05:56,620 --> 00:06:01,150
Non appena clicco l'H-1 sebbene mi dica che H-1 è corretto.

86
00:06:01,430 --> 00:06:02,510
Quindi è importante

87
00:06:02,500 --> 00:06:09,730
ciò significa che posso andare qui e fare clic perché, se lo ispeziono, l'H-1 passa attraverso lo

88
00:06:09,740 --> 00:06:10,130
schermo.

89
00:06:12,980 --> 00:06:15,290
Si applica solo all'H-1, ma

90
00:06:15,500 --> 00:06:20,720
Quindi, solo qualcosa da tenere a mente va bene per noi in questo caso, ma saltar fuori

91
00:06:20,720 --> 00:06:25,680
saltuariamente dove le cose si comportano in modo un po 'diverso da come potresti volerlo e

92
00:06:25,700 --> 00:06:30,190
devi usarle CSSA magari per accorciare la fase uno o cambiare la tua ascoltatore comunque.

93
00:06:30,640 --> 00:06:35,130
Quindi piuttosto che solo avvisare Proviamo a fare qualcos'altro.

94
00:06:35,330 --> 00:06:42,140
E se premo la freccia su un clicker di un evento di aggiunta clicco

95
00:06:42,130 --> 00:06:54,260
e cambio qui il codice e faccio qualcosa come H-1 che lo sfondo di stile è uguale a quello di arancio arancione e premo invio.

96
00:06:54,250 --> 00:07:01,870
quello che succede, la prima cosa che succede è che in un avviso si dice ancora che è stato fatto clic su H-1.

97
00:07:01,880 --> 00:07:06,030
Di nuovo nulla cambia subito ma quando faccio clic presta attenzione a

98
00:07:06,170 --> 00:07:10,360
E poi quando chiudo che poi diventa arancione.

99
00:07:10,730 --> 00:07:14,840
Quindi la morale qui è che possiamo avere più di un ascoltatore su un dato elemento.

100
00:07:14,840 --> 00:07:22,090
Quando clicchiamo su quell'H-1, il primo listener che abbiamo aggiunto stava ascoltando un clic e ha lanciato un avviso e successivamente

101
00:07:22,610 --> 00:07:28,280
abbiamo aggiunto un altro listener che ha anche ascoltato un clic, ma ha cambiato il colore

102
00:07:28,270 --> 00:07:28,890
di sfondo.

103
00:07:28,910 --> 00:07:31,200
Quindi quando clicco su entrambi corrono.

104
00:07:31,390 --> 00:07:37,190
suo aspetto è arancione, ovviamente non lo vedi perché era già arancione ma devi fidarti di me.

105
00:07:37,320 --> 00:07:42,190
E questo succederà sempre per ora se clicco di nuovo ricevo l'avviso e il

106
00:07:42,290 --> 00:07:45,000
Continua a cambiarlo in arancione ancora e ancora e ancora.

107
00:07:45,670 --> 00:07:48,560
OK I ho intenzione di aggiornare e sbarazzarsi di tutto ciò.

108
00:07:48,590 --> 00:07:52,720
Voglio anche fare una rapida dimostrazione aggiungendo un ascoltatore all'UL.

109
00:07:52,880 --> 00:08:03,320
Quindi facciamo un selettore di query di dump di documenti UL e ricordiamo che abbiamo tre alleati invece di un solo ul.

110
00:08:04,490 --> 00:08:08,500
Quindi ti mostrerò cosa succede quando lo impostiamo su un elemento genitore come quello.

111
00:08:08,510 --> 00:08:11,850
Bene e non userò una variabile solo per farlo qui.

112
00:08:12,130 --> 00:08:14,640
Ascoltatore Adamant.

113
00:08:15,250 --> 00:08:16,140
Clic.

114
00:08:16,550 --> 00:08:17,930
Quindi questo è il primo argomento.

115
00:08:17,930 --> 00:08:20,330
Il secondo è la funzione che vogliamo eseguire

116
00:08:24,610 --> 00:08:25,560
proprio come questo.

117
00:08:25,880 --> 00:08:27,410
E ho intenzione di iniziare.

118
00:08:27,680 --> 00:08:35,720
Facciamo solo una console che registra bene erano i clic e tu sai cosa.

119
00:08:35,810 --> 00:08:37,210
Quella è la voce passiva.

120
00:08:37,250 --> 00:08:38,050
Cattiva idea.

121
00:08:38,300 --> 00:08:39,270
Facciamo.

122
00:08:39,460 --> 00:08:43,550
Hai fatto clic su UL molto meglio.

123
00:08:43,880 --> 00:08:44,520
OK.

124
00:08:44,720 --> 00:08:48,430
Quindi teniamo aperta la console e facciamo clic su UL.

125
00:08:48,980 --> 00:08:50,420
Ma come potremmo fare clic sull'olio.

126
00:08:50,450 --> 00:08:53,090
Perché il pozzo ha tre alleati al suo interno.

127
00:08:53,120 --> 00:08:55,290
L'UL è tutta questa cosa proprio qui.

128
00:08:55,320 --> 00:09:00,890
Quindi qualsiasi rapido non importa quale alleato io sia da qualche parte nel pozzo.

129
00:09:01,040 --> 00:09:02,820
Puoi vedere il numero che aumenta qui.

130
00:09:02,930 --> 00:09:07,150
Qualsiasi rapido sul pozzo eseguirà questo diario della console.

131
00:09:08,120 --> 00:09:14,290
Ricapitoliamo ancora una volta e questa volta diciamo che voglio cambiare l'alleato stesso.

132
00:09:14,300 --> 00:09:17,540
Quando clicco su un singolo alleato, voglio che succeda qualcosa.

133
00:09:17,960 --> 00:09:19,400
Ci sono alcuni modi per farlo.

134
00:09:19,420 --> 00:09:25,840
E inizieremo solo con quello più semplice che collega un ascoltatore ad ogni alleato come un testa a

135
00:09:25,850 --> 00:09:26,360
testa.

136
00:09:26,360 --> 00:09:32,880
Quello che faremo alla fine è collegare un ascoltatore all'UL e poi all'interno dell'ascoltatore.

137
00:09:32,990 --> 00:09:39,250
Verificheremo quale bugia in particolare all'interno dell'UL è stata cliccata su tutti con un Lessner.

138
00:09:39,250 --> 00:09:44,230
Per ora però aggiungeremo un ascoltatore separato a ogni

139
00:09:44,240 --> 00:09:55,570
bugia, quindi dobbiamo iniziare selezionando gli alleati in modo che i nostri alleati siano uguali a tutti gli alleati.

140
00:09:55,570 --> 00:09:59,040
Va bene allora dobbiamo fare un ciclo for.

141
00:09:59,210 --> 00:10:02,190
Quindi per var I uguale a zero.

142
00:10:02,410 --> 00:10:04,880
Ricorda che ho detto che lo faremmo sempre.

143
00:10:04,880 --> 00:10:09,670
Quindi, meno degli alleati di quella lunghezza, più plus

144
00:10:13,730 --> 00:10:14,740
proprio così.

145
00:10:15,050 --> 00:10:20,600
E poi all'interno di qui aggiungeremo effettivamente un ascoltatore ad ogni singolo alleato.

146
00:10:20,840 --> 00:10:21,940
Così sembra.

147
00:10:21,960 --> 00:10:27,350
Elyse I in modo tale da darci l'alleato specifico

148
00:10:30,080 --> 00:10:39,220
e la funzione click listener dell'evento proprio così e fatto un po 'di cose.

149
00:10:39,770 --> 00:10:41,920
E poi il codice che vogliamo eseguire.

150
00:10:42,320 --> 00:10:49,250
Cambiamo il colore dell'alleato su cui è stato fatto clic e cambiamo solo per essere viola.

151
00:10:49,250 --> 00:10:51,250
Quindi abbiamo alcune opzioni diverse.

152
00:10:51,290 --> 00:10:54,600
Quello che devo fare è fare riferimento all'alleato su cui è stato fatto clic.

153
00:10:54,800 --> 00:11:00,980
Quindi potrei fare questo alleato anche se questa non è davvero una grande soluzione perché c'è un modo

154
00:11:01,000 --> 00:11:05,320
molto più semplice di fare ciò che è usare questa parola chiave.

155
00:11:05,680 --> 00:11:12,410
Quindi all'interno di un ascoltatore la parola chiave che fa riferimento all'elemento su cui è stato fatto clic o all'elemento su

156
00:11:12,410 --> 00:11:18,250
cui è stato posizionato il mouse o all'elemento su cui è stato premuto il tasto ovunque l'elemento che

157
00:11:18,430 --> 00:11:23,100
va prima dell'evento, qualunque cosa sia selezionata, è ciò che questo si riferisce a.

158
00:11:23,140 --> 00:11:30,640
Quindi posso scrivere questo stile punto che il colore è uguale al viola.

159
00:11:31,000 --> 00:11:33,140
E in realtà è qualcosa di più ovvio.

160
00:11:33,230 --> 00:11:34,150
È un font piccolo.

161
00:11:34,150 --> 00:11:36,670
Quindi facciamo il rosa proprio così.

162
00:11:37,040 --> 00:11:38,500
Ho colpito invio.

163
00:11:38,500 --> 00:11:46,020
Nulla accade immediatamente ma se clicco su un alleato puoi vedere che diventa rosa.

164
00:11:47,410 --> 00:11:53,960
E se continuo a fare clic continui a cambiare in rosa Non puoi dirlo.

165
00:11:54,080 --> 00:12:00,110
Quindi questo schema qui di selezionare un gruppo di cose che li circolano singolarmente e aggiungere un listener

166
00:12:00,110 --> 00:12:03,670
di eventi a ciascuno di essi è davvero molto comune.

167
00:12:03,710 --> 00:12:11,170
Lo vedremo sempre nei prossimi progetti che realizzeremo.

168
00:12:11,270 --> 00:12:16,640
come quella che abbiamo fatto qui dove scrivi la funzione con parentesi e non le dai un nome.

169
00:12:16,630 --> 00:12:20,830
L'ultima cosa che menzionerò qui è che non devi sempre usare una funzione anonima

170
00:12:20,990 --> 00:12:22,330
Non devi farlo.

171
00:12:22,370 --> 00:12:25,790
Puoi dichiarare una funzione con nome separatamente come ho fatto qui.

172
00:12:26,090 --> 00:12:31,200
La funzione cambia il testo e quindi tutto ciò che dobbiamo fare è pronunciare il pulsante che aggiunge il listener di eventi

173
00:12:31,420 --> 00:12:33,890
o clicca e poi gli diamo il cambio di testo.

174
00:12:34,070 --> 00:12:38,830
Si noti che non abbiamo parentesi in seguito perché eseguirò immediatamente la funzione che non è

175
00:12:38,840 --> 00:12:39,890
ciò che vogliamo.

176
00:12:40,180 --> 00:12:46,880
a questo ascoltatore veloce e stiamo dicendo che questa è la funzione che voglio che venga eseguita quando l'utente fa clic su questo pulsante.

177
00:12:47,170 --> 00:12:51,100
Quindi stiamo solo passando il valore di questa funzione, stiamo passando fondamentalmente il contenuto

178
00:12:51,190 --> 00:12:52,810
Ma non eseguirlo ancora.

179
00:12:52,820 --> 00:12:55,350
Quindi questi due funzioneranno esattamente allo stesso modo.

180
00:12:55,370 --> 00:12:57,030
È solo una questione di preferenza.

181
00:12:57,190 --> 00:13:00,830
Per la maggior parte ci sono alcune differenze che potremmo incontrare in seguito.

182
00:13:00,880 --> 00:13:02,980
Preferirei di gran lunga usare questo.

183
00:13:03,230 --> 00:13:08,240
L'unica volta in cui non utilizzerei una funzione anonima è se avessi bisogno di usare di nuovo quel codice da

184
00:13:08,240 --> 00:13:10,160
qualche altra parte al di fuori dell'orologio.

185
00:13:10,150 --> 00:13:15,100
Quindi, se volessi eseguirlo da solo o se volessi eseguirlo invece di un altro listener

186
00:13:15,530 --> 00:13:21,260
veloce piuttosto che duplicare questa funzione, gli darei un nome e quindi duplicare solo il nome in cui

187
00:13:21,260 --> 00:13:22,600
lo uso due volte.

188
00:13:23,060 --> 00:13:28,660
OK, così da vicino avremo la possibilità di fare alcuni esercizi veloci usando Wisner e alcune delle cose

189
00:13:28,660 --> 00:13:30,650
che abbiamo imparato negli ultimi video.