1 00:00:00,260 --> 00:00:01,440 OK, torneremo. 2 00:00:01,440 --> 00:00:06,330 Finora abbiamo parlato di come possiamo selezionare gli elementi con J Querrey e anche come 3 00:00:06,330 --> 00:00:06,810 possiamo manipolarli. 4 00:00:06,990 --> 00:00:11,790 Ora introdurremo il grande pezzo mancante finale che è un evento nella query J. 5 00:00:11,850 --> 00:00:13,700 Quindi ripensa a vaniglia J. S. Quando abbiamo aggiunto i listener di eventi, abbiamo utilizzato un metodo chiamato listener di eventi. 6 00:00:13,740 --> 00:00:17,780 Bene, si scopre che Jay, dove ha un sacco di metodi che hanno a che fare con gli eventi. 7 00:00:18,150 --> 00:00:22,230 Quindi ho la sezione eventi aperta su Jake, dove può arrivare facendo semplicemente clic sugli eventi qui. 8 00:00:22,350 --> 00:00:28,190 Quindi mentre scorro qui puoi vedere quanti. 9 00:00:28,260 --> 00:00:32,720 Metodi di eventi Coria ci sono chikor ne viene fornito con una tonnellata di loro. 10 00:00:32,810 --> 00:00:37,210 Quindi quello che sto per fare è evidenziare i tre più importanti i tre che è possibile utilizzare. 11 00:00:37,230 --> 00:00:41,820 Novantanove per cento del tempo quei tre metodi sono la pressione dei tasti rapida e continua. 12 00:00:41,830 --> 00:00:49,190 E ho detto che questi tre potresti usare il 99 percento delle volte. 13 00:00:49,650 --> 00:00:53,010 In realtà è più simile a questo qui. 14 00:00:53,160 --> 00:00:55,950 Puoi usare il 99 percento delle volte. 15 00:00:55,950 --> 00:00:58,050 Quindi ti mostrerò prima clic e 16 00:00:58,110 --> 00:01:03,000 tasto, ma il mio obiettivo principale è mostrarti quanto sia fantastico il metodo. 17 00:01:03,030 --> 00:01:04,600 Quindi iniziamo. 18 00:01:05,130 --> 00:01:06,450 Quindi il metodo rapido di 19 00:01:06,450 --> 00:01:12,030 Jay Equery è come possiamo aggiungere rapidamente e facilmente un click listener a un singolo elemento o una raccolta di elementi. 20 00:01:12,030 --> 00:01:14,620 Quindi puoi vedere che ho due esempi in questo caso. 21 00:01:14,730 --> 00:01:18,210 Sto selezionando qualcosa e poi aggiungo un listener di clic con un clic. 22 00:01:18,210 --> 00:01:22,070 Quindi selezioniamo qualcosa con l'idea di inviare che corriamo. 23 00:01:22,290 --> 00:01:26,070 Fare clic su di esso e quindi passiamo in una funzione 24 00:01:26,100 --> 00:01:32,490 di callback e questa funzione di callback verrà eseguita quando si fa clic su qualcosa con l'idea di invio. 25 00:01:32,490 --> 00:01:34,470 E poiché è un ID ce n'è solo uno nella pagina. 26 00:01:34,680 --> 00:01:37,400 Quindi, quando si fa clic su quell'elemento, viene eseguito questo codice. 27 00:01:37,530 --> 00:01:40,920 Se dai un'occhiata qui sotto puoi vedere che 28 00:01:41,340 --> 00:01:46,290 sto selezionando tutti i pulsanti sulla pagina che potrebbero essere uno. 29 00:01:46,290 --> 00:01:46,650 Potrebbe essere 10 pulsanti e sto aggiungendo un click listener a tutti loro. 30 00:01:46,650 --> 00:01:51,080 Quindi ogni volta che un pulsante è veloce, avviserà qualcuno che clicca il pulsante. 31 00:01:51,120 --> 00:01:55,800 Quindi fammelo dimostrare. 32 00:01:55,830 --> 00:01:56,760 Ora ho una semplice pagina HTL con Jay queery inclusa come CDN. 33 00:01:56,750 --> 00:02:03,480 E ho intenzione di aggiungere gli eventi di query di Jay e aggiungerò alcuni pulsanti. 34 00:02:03,750 --> 00:02:10,730 Quindi il primo che dico non mi corregge. 35 00:02:11,370 --> 00:02:15,240 E poi il prossimo dirà seriamente ok me. 36 00:02:16,020 --> 00:02:21,230 E l'ultimo dirà che questo è il tuo ultimo avvertimento. 37 00:02:21,390 --> 00:02:27,690 Quindi salveremo e apriremo questo nel browser e controlleremo sempre che J sia caricato. 38 00:02:28,080 --> 00:02:36,300 OK. 39 00:02:38,320 --> 00:02:38,780 Sembra buono. 40 00:02:38,850 --> 00:02:40,040 Quindi inizieremo qui facilmente aggiungendo un ascoltatore veloce a questo H-1 e ce n'è solo uno nella pagina. 41 00:02:40,650 --> 00:02:46,110 Quindi, dobbiamo solo selezionare prima con il simbolo del dollaro. 42 00:02:46,110 --> 00:02:50,170 Quindi uno che ci dà l'H-1 giusto che solo uno e poi corriamo. 43 00:02:50,680 --> 00:02:55,610 Non fare clic su di esso e quindi dobbiamo passare 44 00:02:55,640 --> 00:03:02,220 una funzione di callback che verrà eseguita ogni volta che clicchiamo su quell'H-1. 45 00:03:02,220 --> 00:03:03,670 Quindi dietro le quinte 46 00:03:03,690 --> 00:03:11,010 il clic sta usando un listener di eventi e aggiunge un click listener su questo H-1 e possiamo fare una 47 00:03:11,010 --> 00:03:18,540 funzione anonima che è molto più comune da vedere, ma un po 'più intimidatoria per i nuovi studenti o potremmo 48 00:03:18,600 --> 00:03:24,120 scrivere una funzione con nome separatamente e quindi passare il nome di quella funzione qui. 49 00:03:24,120 --> 00:03:24,940 Ma come ho detto le funzioni anonime sono molto più comuni. 50 00:03:25,260 --> 00:03:27,900 Quindi, quello che vogliamo fare è solo avvisare 51 00:03:28,200 --> 00:03:37,080 ognuno corretto e io premo invio qui e ora se clicco su questo H-1 vedrai che ottengo l'H-1 e questo non accade su nessun altro elemento. 52 00:03:37,130 --> 00:03:42,380 Succede qui qui, ricorda perché il mio H-1 attraversa tutto lo schermo in modo che 53 00:03:42,630 --> 00:03:48,990 il problema CSSA se voglio cambiare la dimensione di uno, ma succede solo quando faccio clic su un elemento. 54 00:03:48,990 --> 00:03:54,990 Ora quello che voglio fare è mostrare come possiamo aggiungere un ascoltatore veloce a una raccolta di elementi. 55 00:03:54,990 --> 00:04:00,020 Quindi selezionerò tutti i pulsanti qui. 56 00:04:00,150 --> 00:04:02,530 funzione anonima come nostro callback. 57 00:04:02,640 --> 00:04:12,630 Quindi un pulsante con il simbolo del dollaro e poi aggiungiamo il nostro clic proprio così e possiamo passare di nuovo in una 58 00:04:12,630 --> 00:04:14,050 E questo verrà eseguito 59 00:04:14,580 --> 00:04:24,420 ogni volta che si fa clic su qualsiasi pulsante e faremo semplicemente clic su un pulsante di avviso in quel modo e premiamo Invio. 60 00:04:24,420 --> 00:04:27,130 E ora, se clicco su uno di quei pulsanti, andiamo a fare clic sul pulsante tasto clic sul pulsante per uscire. 61 00:04:27,630 --> 00:04:35,470 Quindi ripensa a vanilla javascript per aggiungere un listener di eventi a una serie di pulsanti. 62 00:04:35,490 --> 00:04:41,150 Dovrei selezionarli tutti con il selettore di query tutti o ottenere gli elementi in base al nome del 63 00:04:41,190 --> 00:04:46,380 tag e quindi dovrei usare un ciclo for per fare il ciclo di tutti e quindi dovrei 64 00:04:46,380 --> 00:04:51,240 aggiungere singolarmente un listener di eventi che per essere chiari sta accadendo dietro le quinte. 65 00:04:51,240 --> 00:04:54,780 Ma tutto ciò che devo fare è scrivere questa riga e quella cicatrice per me che 66 00:04:54,870 --> 00:04:59,700 aggiungerà gli ascoltatori dell'evento individualmente, il che rende la sua vita davvero facile piuttosto che un semplice pulsante di apprendimento cliccato. 67 00:04:59,730 --> 00:05:05,660 Cosa succede se volevo cambiare lo stile cambiare il colore di sfondo del pulsante su cui è stato fatto clic. 68 00:05:05,820 --> 00:05:10,940 Quindi dovrei aggiungere di nuovo un ascoltatore di clic. 69 00:05:11,430 --> 00:05:13,970 Sono solo alla freccia in su e piuttosto che all'erta. 70 00:05:13,970 --> 00:05:16,780 Quello che faremo è cambiare 71 00:05:17,040 --> 00:05:26,730 il colore di sfondo in modo che diventi qualcosa di quello di C-s e lo cambieremo in rosa. 72 00:05:26,730 --> 00:05:30,290 Quindi il problema è che cosa stiamo chiamando Dotsie CSSA su e indietro con vanilla javascript. 73 00:05:30,450 --> 00:05:36,090 Lo useremmo. 74 00:05:36,090 --> 00:05:37,360 La parola chiave this e that 75 00:05:37,380 --> 00:05:43,530 fa riferimento all'elemento su cui è stato fatto clic, ma la query NJ che non funzionerà del tutto è quello che dobbiamo fare con la versione di J Querrey. 76 00:05:43,530 --> 00:05:49,720 Questa è sempre un'idea un po 'confusa. 77 00:05:49,950 --> 00:05:53,010 Penso che aiuti a ricordare che quello che fa 78 00:05:53,010 --> 00:05:58,830 Shakeri è prendere la semplice vaniglia Sì e lo avvolge nella query di Jay ed è grande J. UN. G. abbraccio e gli dà alcune proprietà e metodi speciali. 79 00:05:58,830 --> 00:06:03,830 Quindi, se vogliamo utilizzare 80 00:06:03,840 --> 00:06:10,680 il punto CSSA, che è un metodo di query J, dobbiamo assicurarci che lo stiamo eseguendo su un oggetto di query J. 81 00:06:10,950 --> 00:06:12,660 Quindi, semplicemente vecchio questo è il normale vanilla javascript questo. 82 00:06:12,660 --> 00:06:17,560 Quindi dobbiamo avvolgerlo e dirgli che questa è la versione della query J. 83 00:06:17,670 --> 00:06:21,440 Quindi proviamolo. 84 00:06:21,660 --> 00:06:23,190 Premi invio qui e ora 85 00:06:23,370 --> 00:06:30,630 facciamo clic sul pulsante per prima cosa abbiamo l'avviso perché non ci siamo mai liberati di questo primo listener di clic. 86 00:06:30,630 --> 00:06:32,460 E poi lo sfondo diventa rosa e puoi vedere che succederà a tutti quelli che clicco. 87 00:06:32,880 --> 00:06:40,280 Potremmo anche fare qualcosa di simile. 88 00:06:40,440 --> 00:06:42,010 Quindi premo la freccia su e aggiorno la pagina piuttosto che cambiarle per diventare rosa. 89 00:06:42,030 --> 00:06:47,610 Potremmo anche fare un annullo che registra e il log di Walcott per adulti registra il testo del pulsante su cui è stato fatto clic. 90 00:06:47,670 --> 00:06:55,540 Quindi sarebbe qualcosa come se avessi fatto clic su più e poi farò una variabile per memorizzare questo testo 91 00:06:55,650 --> 00:07:03,870 così variabile uguale a questo segno e per ottenere quel testo da lì abbiamo solo bisogno di usare il metodo 92 00:07:04,560 --> 00:07:14,040 di testo proprio come quel registro di quel registro ci hai cliccato sul testo che è il nostro nome variabile e inserisci. 93 00:07:14,460 --> 00:07:22,430 E ora se clicco su uno che hai cliccato non clicchi su di me hai cliccato. 94 00:07:22,920 --> 00:07:27,510 Questo è il tuo ultimo avvertimento. 95 00:07:27,540 --> 00:07:28,890 E hai cliccato. 96 00:07:29,460 --> 00:07:30,360 Seriamente non mi clicco. 97 00:07:30,420 --> 00:07:31,830 OK. 98 00:07:32,190 --> 00:07:32,640 Quindi questo è tutto ciò che dimostrerò. 99 00:07:32,670 --> 00:07:33,930 Clic. 100 00:07:33,930 --> 00:07:34,650 Per riassumere, possiamo aggiungere un listener a un elemento alla volta, come abbiamo fatto per l'H-1. 101 00:07:34,650 --> 00:07:39,520 Oppure possiamo farlo in una collezione che è dove diventa davvero utile. 102 00:07:39,780 --> 00:07:43,870 Infine, se vogliamo fare riferimento all'elemento su cui è stato fatto 103 00:07:43,890 --> 00:07:49,320 clic, è necessario utilizzare il simbolo del dollaro, che è il wrapper J-queery J. UN. G. versione di Vanilla. 104 00:07:49,680 --> 00:07:53,670 si Questo 105 00:07:53,690 --> 00:07:54,480