1
00:00:00,210 --> 00:00:01,440
OK, torneremo.

2
00:00:01,470 --> 00:00:03,590
Quindi abbiamo un metodo in meno di cui voglio parlare.

3
00:00:03,740 --> 00:00:09,160
Come ho menzionato nel video introduttivo agli eventi di J Korea, il metodo on è quello che useremo.

4
00:00:09,200 --> 00:00:13,980
Il novantanove per cento del tempo è di gran lunga il metodo di evento jay di Jay più utilizzato.

5
00:00:14,280 --> 00:00:14,490
OK.

6
00:00:14,490 --> 00:00:18,580
Quindi parliamo di come funziona è molto simile alla vaniglia.

7
00:00:18,620 --> 00:00:20,790
Sì, un ascoltatore di eventi.

8
00:00:20,790 --> 00:00:22,270
Ovviamente è molto più corto.

9
00:00:22,290 --> 00:00:28,200
Sono solo due personaggi ma si comporta in modo simile dove gli diamo il nome

10
00:00:28,200 --> 00:00:29,590
dell'evento che vogliamo ascoltarlo.

11
00:00:29,760 --> 00:00:37,650
Quindi, a differenza del clic o della pressione di un tasto che si attiva solo su un tipo di evento, un clic o una pressione di

12
00:00:37,650 --> 00:00:45,780
un tasto ci consente di specificare se stiamo facendo un clic come stiamo facendo qui invia al clic o se facciamo un doppio clic come se avessi

13
00:00:45,780 --> 00:00:53,730
qui il tasto con un doppio clic o un trascinamento o una pressione di un tasto in modo che possa prendere il posto di tutte le

14
00:00:53,730 --> 00:00:58,760
cose che hai già visto con clic e pressione dei tasti e tutti gli altri metodi qui.

15
00:00:58,870 --> 00:01:06,670
Ce n'è una tonnellata come scorrere e inviare e attivare la pressione dei tasti verso il basso.

16
00:01:06,780 --> 00:01:10,410
Tutto ciò può essere fatto con il solo metodo on.

17
00:01:10,410 --> 00:01:15,480
Funziona più o meno allo stesso modo anche se dovremmo selezionare prima qualcosa con il simbolo del dollaro.

18
00:01:15,870 --> 00:01:17,450
Quindi ti mostrerò un esempio qui.

19
00:01:17,730 --> 00:01:23,490
Selezioniamo qualcosa in questo caso tutti gli insegnanti all'interno del corpo all'interno di qualcosa con l'idea

20
00:01:23,490 --> 00:01:28,500
della tabella dati e poi lo eseguiamo e quindi il tipo di evento.

21
00:01:28,500 --> 00:01:33,740
Quindi questo è nuovo rispetto al clic e alla pressione dei tasti che accettano solo una funzione di callback.

22
00:01:33,840 --> 00:01:36,560
Dobbiamo specificare quale evento stiamo ascoltando.

23
00:01:36,750 --> 00:01:40,810
Quindi, fare clic in questo caso e quindi virgola la funzione di callback.

24
00:01:40,830 --> 00:01:42,550
Vogliamo essere gestiti.

25
00:01:42,660 --> 00:01:45,930
Quindi proviamo questo per aggiornare la mia pagina.

26
00:01:45,930 --> 00:01:47,100
La mia demo di AJ estratta.

27
00:01:47,130 --> 00:01:51,390
Quindi non abbiamo ascoltatori di clic quindi nessun clic non abbiamo pressioni di tasti.

28
00:01:51,390 --> 00:01:53,350
Nulla accade anche sui nostri pulsanti.

29
00:01:53,760 --> 00:01:57,600
Andiamo e prova ad aggiungere prima alcuni ascoltatori veloci.

30
00:01:57,630 --> 00:02:00,660
Cambiamo il colore dell'H-1 quando clicchiamo su di esso.

31
00:02:00,720 --> 00:02:10,230
Quindi dobbiamo selezionarli tutti e poi faremo sul primo argomento è il tipo di evento che è veloce e

32
00:02:10,230 --> 00:02:13,570
quindi la nostra funzione di callback.

33
00:02:13,950 --> 00:02:20,640
E all'interno della funzione di callback, se volessimo cambiare il colore dell'H-1, potremmo fare qualcosa

34
00:02:20,640 --> 00:02:30,750
di simile in cui diciamo semplicemente H-1 gutsiest a Color Purple e vediamo se riesci a pensare perché questo potrebbe essere un

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

36
00:02:31,320 --> 00:02:38,880
Quindi premo invio e funziona bene diventa viola, ma ho intenzione di copiare questo codice e aggiornare la pagina

37
00:02:38,880 --> 00:02:44,700
e ho intenzione di aggiungere in un altro H-1 tre di loro e salvare.

38
00:02:44,790 --> 00:02:46,340
Ora abbiamo tre H-1.

39
00:02:46,770 --> 00:02:55,160
E se eseguo di nuovo questo codice, si dice che qualsiasi H-1 quando si fa clic su di esso cambia tutte le h per essere viola.

40
00:02:55,200 --> 00:02:57,060
Quindi ci proverò.

41
00:02:57,090 --> 00:03:02,910
Cambiano tutti in viola, che forse è una caratteristica che vogliamo ma la maggior parte delle volte vogliamo

42
00:03:03,060 --> 00:03:04,670
influenzare l'elemento su cui clicchiamo.

43
00:03:04,950 --> 00:03:13,830
Quindi, per fare tutto questo, dobbiamo usare la parola chiave this e ricordare che deve essere il wrapper J query

44
00:03:13,980 --> 00:03:14,790
per questo.

45
00:03:14,790 --> 00:03:21,600
Quindi il segno del dollaro parentesi questo e quello si riferisce a quello H-1 o all'unica cosa su cui è stato fatto clic.

46
00:03:22,180 --> 00:03:28,400
E ora, se premo invio, provo a fare clic su solo le modifiche H-1 corrette su viola.

47
00:03:29,040 --> 00:03:31,770
OK, ecco come possiamo usare per fare un clic.

48
00:03:31,770 --> 00:03:34,150
Ora vediamo come usarlo per un tasto stampa.

49
00:03:34,290 --> 00:03:35,760
Quindi selezioneremo il

50
00:03:38,610 --> 00:03:50,070
nostro input come quel punto e poi aggiungeremo key press e il secondo argomento è la funzione di callback e faremo solo un semplice

51
00:03:50,070 --> 00:03:51,740
log di console.

52
00:03:51,870 --> 00:03:59,170
Quindi, cancella il tasto di registro premuto in questo modo e clicchiamo su invio.

53
00:03:59,200 --> 00:04:06,540
Ora se vado a digitare una chiave qui mi preme ogni volta che digito un tasto.

54
00:04:06,540 --> 00:04:09,740
Proviamo un altro tipo di evento qui mi aggiornerò.

55
00:04:10,080 --> 00:04:12,190
Facciamo qualcosa quando passiamo il mouse su un pulsante.

56
00:04:12,390 --> 00:04:15,770
Cambierà il carattere da mettere in grassetto quando passo il mouse.

57
00:04:15,840 --> 00:04:21,670
Quindi dobbiamo prima selezionare tutti i pulsanti proprio così e poi aggiungere il nostro.

58
00:04:21,880 --> 00:04:24,730
E l'evento che useremo si chiama Mouse enter.

59
00:04:24,930 --> 00:04:25,860
Proprio così.

60
00:04:26,280 --> 00:04:31,280
E inizieremo con la registrazione appena cancellata quando il mouse entra.

61
00:04:31,290 --> 00:04:38,240
Quindi faremo un mouse di registro costruito che entra così.

62
00:04:38,610 --> 00:04:44,090
E ora, se passerò il mouse sopra, otterrò un mouse che entra così.

63
00:04:44,340 --> 00:04:46,420
Ed è solo quando entriamo per la prima volta nell'elemento.

64
00:04:46,680 --> 00:04:50,300
Quindi non continua a scatenarsi finché non me ne vado e torno indietro.

65
00:04:50,750 --> 00:04:51,060
OK.

66
00:04:51,060 --> 00:04:55,450
Quindi quando entriamo con il mouse non vogliamo registrare costantemente.

67
00:04:55,470 --> 00:05:02,880
Vogliamo selezionare J wrapper per questo e fare lo stesso SS in grassetto qualcosa che dobbiamo modificare il

68
00:05:02,880 --> 00:05:04,140
peso del font.

69
00:05:04,350 --> 00:05:13,020
Così modi divertenti e faremo quella piega proprio così e premere invio.

70
00:05:13,020 --> 00:05:18,310
Ora, se mi fermo, è difficile vedere che cosa cambia essere audace.

71
00:05:18,390 --> 00:05:21,200
Certo che rimane in grassetto non cambia mai.

72
00:05:21,390 --> 00:05:29,670
facendo la stessa cosa con il pulsante sul mouse che è un altro evento e quindi piuttosto che cambiarlo in peso del font.

73
00:05:30,150 --> 00:05:32,040
Quindi potremmo aggiungere quella caratteristica

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

75
00:05:32,670 --> 00:05:36,800
Possiamo riportarlo alla normalità proprio così.

76
00:05:36,810 --> 00:05:40,420
Ora se lo lascio torna alla normalità.

77
00:05:40,830 --> 00:05:43,530
E se entro in grassetto me ne vado, è normale.

78
00:05:43,950 --> 00:05:50,610
Quindi è così che potremmo fare qualcosa con javascript per fare una sorta di effetto di selezione del hover.

79
00:05:50,670 --> 00:05:57,000
Tuttavia con CSSA ora possiamo farlo facilmente senza alcun javascript con lo pseudo-selettore hover.

80
00:05:57,490 --> 00:06:00,510
E volevo solo dimostrare che ci sono altri eventi là fuori.

81
00:06:00,720 --> 00:06:06,060
Quindi tutti gli eventi che potremmo usare con un listener di eventi con cui possiamo usarlo rende

82
00:06:06,060 --> 00:06:06,890
davvero molto utile.

83
00:06:06,990 --> 00:06:09,500
Come ho detto, lo useremo sempre.

84
00:06:09,840 --> 00:06:14,690
Quindi c'è un ultimo punto su cui mi piacerebbe fare e come un esempio che userò.

85
00:06:14,690 --> 00:06:16,440
Clicca e continua.

86
00:06:16,440 --> 00:06:19,510
Fai clic e parla di come sono leggermente diversi.

87
00:06:19,800 --> 00:06:22,230
Quindi entrambi lavoreranno generalmente per te.

88
00:06:22,230 --> 00:06:28,290
che il clic aggiungerà solo gli ascoltatori di clic per gli elementi che si trovano sulla pagina in quel momento.

89
00:06:28,290 --> 00:06:31,590
Aggiungeranno un listener veloce ma c'è una piccola differenza che è

90
00:06:32,040 --> 00:06:37,790
E il clic in su aggiungerà listener per tutti gli elementi futuri o potenziali elementi futuri.

91
00:06:37,980 --> 00:06:40,430
Quindi questo ha senso quando fai la lista delle cose da fare.

92
00:06:40,530 --> 00:06:47,010
Ma fondamentalmente dobbiamo usare il punto sul clic piuttosto che il clic perché dovremo fare ciò che viene aggiunto alla pagina che

93
00:06:47,010 --> 00:06:52,060
non c'è quando la pagina carica un utente digita in un modulo e fa clic su entra.

94
00:06:52,260 --> 00:06:57,090
E ciò renderà una novità da fare e vogliamo che quelli nuovi facciano i propri ascoltatori di clic.

95
00:06:57,090 --> 00:07:01,930
Quindi abbiamo bisogno di ricominciare da capo che avrà più senso quando abbiamo effettivamente iniziato a fare la lista.