OK, torneremo.
Finora abbiamo parlato di come possiamo selezionare gli elementi con J Querrey e anche come
possiamo manipolarli.
Ora introdurremo il grande pezzo mancante finale che è un evento nella query J.
Quindi ripensa a vaniglia J. S. Quando abbiamo aggiunto i listener di eventi, abbiamo utilizzato un metodo chiamato listener di eventi.
Bene, si scopre che Jay, dove ha un sacco di metodi che hanno a che fare con gli eventi.
Quindi ho la sezione eventi aperta su Jake, dove può arrivare facendo semplicemente clic sugli eventi qui.
Quindi mentre scorro qui puoi vedere quanti.
Metodi di eventi Coria ci sono chikor ne viene fornito con una tonnellata di loro.
Quindi quello che sto per fare è evidenziare i tre più importanti i tre che è possibile utilizzare.
Novantanove per cento del tempo quei tre metodi sono la pressione dei tasti rapida e continua.
E ho detto che questi tre potresti usare il 99 percento delle volte.
In realtà è più simile a questo qui.
Puoi usare il 99 percento delle volte.
Quindi ti mostrerò prima clic e
tasto, ma il mio obiettivo principale è mostrarti quanto sia fantastico il metodo.
Quindi iniziamo.
Quindi il metodo rapido di
Jay Equery è come possiamo aggiungere rapidamente e facilmente un click listener a un singolo elemento o una raccolta di elementi.
Quindi puoi vedere che ho due esempi in questo caso.
Sto selezionando qualcosa e poi aggiungo un listener di clic con un clic.
Quindi selezioniamo qualcosa con l'idea di inviare che corriamo.
Fare clic su di esso e quindi passiamo in una funzione
di callback e questa funzione di callback verrà eseguita quando si fa clic su qualcosa con l'idea di invio.
E poiché è un ID ce n'è solo uno nella pagina.
Quindi, quando si fa clic su quell'elemento, viene eseguito questo codice.
Se dai un'occhiata qui sotto puoi vedere che
sto selezionando tutti i pulsanti sulla pagina che potrebbero essere uno.
Potrebbe essere 10 pulsanti e sto aggiungendo un click listener a tutti loro.
Quindi ogni volta che un pulsante è veloce, avviserà qualcuno che clicca il pulsante.
Quindi fammelo dimostrare.
Ora ho una semplice pagina HTL con Jay queery inclusa come CDN.
E ho intenzione di aggiungere gli eventi di query di Jay e aggiungerò alcuni pulsanti.
Quindi il primo che dico non mi corregge.
E poi il prossimo dirà seriamente ok me.
E l'ultimo dirà che questo è il tuo ultimo avvertimento.
Quindi salveremo e apriremo questo nel browser e controlleremo sempre che J sia caricato.
OK.
Sembra buono.
Quindi inizieremo qui facilmente aggiungendo un ascoltatore veloce a questo H-1 e ce n'è solo uno nella pagina.
Quindi, dobbiamo solo selezionare prima con il simbolo del dollaro.
Quindi uno che ci dà l'H-1 giusto che solo uno e poi corriamo.
Non fare clic su di esso e quindi dobbiamo passare
una funzione di callback che verrà eseguita ogni volta che clicchiamo su quell'H-1.
Quindi dietro le quinte
il clic sta usando un listener di eventi e aggiunge un click listener su questo H-1 e possiamo fare una
funzione anonima che è molto più comune da vedere, ma un po 'più intimidatoria per i nuovi studenti o potremmo
scrivere una funzione con nome separatamente e quindi passare il nome di quella funzione qui.
Ma come ho detto le funzioni anonime sono molto più comuni.
Quindi, quello che vogliamo fare è solo avvisare
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.
Succede qui qui, ricorda perché il mio H-1 attraversa tutto lo schermo in modo che
il problema CSSA se voglio cambiare la dimensione di uno, ma succede solo quando faccio clic su un elemento.
Ora quello che voglio fare è mostrare come possiamo aggiungere un ascoltatore veloce a una raccolta di elementi.
Quindi selezionerò tutti i pulsanti qui.
funzione anonima come nostro callback.
Quindi un pulsante con il simbolo del dollaro e poi aggiungiamo il nostro clic proprio così e possiamo passare di nuovo in una
E questo verrà eseguito
ogni volta che si fa clic su qualsiasi pulsante e faremo semplicemente clic su un pulsante di avviso in quel modo e premiamo Invio.
E ora, se clicco su uno di quei pulsanti, andiamo a fare clic sul pulsante tasto clic sul pulsante per uscire.
Quindi ripensa a vanilla javascript per aggiungere un listener di eventi a una serie di pulsanti.
Dovrei selezionarli tutti con il selettore di query tutti o ottenere gli elementi in base al nome del
tag e quindi dovrei usare un ciclo for per fare il ciclo di tutti e quindi dovrei
aggiungere singolarmente un listener di eventi che per essere chiari sta accadendo dietro le quinte.
Ma tutto ciò che devo fare è scrivere questa riga e quella cicatrice per me che
aggiungerà gli ascoltatori dell'evento individualmente, il che rende la sua vita davvero facile piuttosto che un semplice pulsante di apprendimento cliccato.
Cosa succede se volevo cambiare lo stile cambiare il colore di sfondo del pulsante su cui è stato fatto clic.
Quindi dovrei aggiungere di nuovo un ascoltatore di clic.
Sono solo alla freccia in su e piuttosto che all'erta.
Quello che faremo è cambiare
il colore di sfondo in modo che diventi qualcosa di quello di C-s e lo cambieremo in rosa.
Quindi il problema è che cosa stiamo chiamando Dotsie CSSA su e indietro con vanilla javascript.
Lo useremmo.
La parola chiave this e that
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.
Questa è sempre un'idea un po 'confusa.
Penso che aiuti a ricordare che quello che fa
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.
Quindi, se vogliamo utilizzare
il punto CSSA, che è un metodo di query J, dobbiamo assicurarci che lo stiamo eseguendo su un oggetto di query J.
Quindi, semplicemente vecchio questo è il normale vanilla javascript questo.
Quindi dobbiamo avvolgerlo e dirgli che questa è la versione della query J.
Quindi proviamolo.
Premi invio qui e ora
facciamo clic sul pulsante per prima cosa abbiamo l'avviso perché non ci siamo mai liberati di questo primo listener di clic.
E poi lo sfondo diventa rosa e puoi vedere che succederà a tutti quelli che clicco.
Potremmo anche fare qualcosa di simile.
Quindi premo la freccia su e aggiorno la pagina piuttosto che cambiarle per diventare rosa.
Potremmo anche fare un annullo che registra e il log di Walcott per adulti registra il testo del pulsante su cui è stato fatto clic.
Quindi sarebbe qualcosa come se avessi fatto clic su più e poi farò una variabile per memorizzare questo testo
così variabile uguale a questo segno e per ottenere quel testo da lì abbiamo solo bisogno di usare il metodo
di testo proprio come quel registro di quel registro ci hai cliccato sul testo che è il nostro nome variabile e inserisci.
E ora se clicco su uno che hai cliccato non clicchi su di me hai cliccato.
Questo è il tuo ultimo avvertimento.
E hai cliccato.
Seriamente non mi clicco.
OK.
Quindi questo è tutto ciò che dimostrerò.
Clic.
Per riassumere, possiamo aggiungere un listener a un elemento alla volta, come abbiamo fatto per l'H-1.
Oppure possiamo farlo in una collezione che è dove diventa davvero utile.
Infine, se vogliamo fare riferimento all'elemento su cui è stato fatto
clic, è necessario utilizzare il simbolo del dollaro, che è il wrapper J-queery J. UN. G. versione di Vanilla.
si Questo