OK, torneremo.
Nell'introduzione a javascript ho detto che uno dei motivi importanti per imparare javascript è che
possiamo usarlo per rendere le nostre pagine interattive.
È come possiamo eseguire il codice quando un utente fa clic su un pulsante o digita qualcosa o preme il tasto
freccia o qualunque cosa faccia.
Possiamo avere un codice corrispondente che viene eseguito in un dato momento e non appena
eseguito proprio all'inizio della pagina.
Quindi per farlo dobbiamo parlare degli eventi di Dom.
Quindi questo video sarà un'introduzione agli eventi Dom.
Concettualmente il processo per impostarli e quindi anche la sintassi.
Quindi, come ho detto, gli eventi sono ovunque.
Pensa a quando interagisci con la pagina web le diverse cose che accadono puoi cliccare su cose
come un pulsante che puoi passare con il mouse su un link e qualcosa potrebbe apparire.
È possibile trascinare e rilasciare elementi su determinate pagine.
Si potrebbe desiderare di avere un codice che viene eseguito da doppio clic dell'utente o in realtà questa
pagina web ha alcuni esempi.
Questo diapositiva è un sito Web e sto premendo i tasti freccia sinistra e destra per cambiare le diapositive.
Quindi un po 'di codice viene eseguito quando premo il tasto freccia sinistra o il tasto freccia destra o
quando clicco qui.
Questo è anche un evento e sta facendo qualcosa che sta eseguendo del codice che sta cambiando la diapositiva corrente.
Quindi il punto è che gli eventi sono dappertutto e sono davvero eccitanti.
È uno dei miei argomenti preferiti da insegnare perché ora possiamo rendere le nostre pagine Web
interattive che possiamo prendere le cose di manipolazione che abbiamo imparato a cambiare i colori cambiando
il testo e quindi possiamo farlo realmente quando accade qualcosa in particolare.
Quindi questo sblocca davvero il potenziale di manipolare il dormitorio.
È così che faremo i giochi è come formeremo i validatori di form tic
tac che realizzeremo un gioco di selezione dei colori davvero interessante e che tutto deriva da questi eventi.
Quindi il modo in cui funzionano questi eventi è che li colleghiamo effettivamente a elementi specifici, quindi selezioniamo
un elemento come il primo pulsante o il secondo H-1 o l'input in cui un tipo è uguale al testo e quindi associamo
un listener di eventi a tale elemento selezionato.
potremmo essere in ascolto di un clic su un pulsante che potremmo ascoltare per un evento hover su un H1 che potremmo ascoltare
per l'evento key press in un input di testo e parleremo più delle differenze tra questi eventi.
Quindi, ad esempio,
Ci sono così tanti diversi tipi di eventi in javascript, ma l'importante è che
dobbiamo avere un evento che viene ascoltato su un dato elemento.
Quindi, proprio come prima, quando parlerei di selezionare e quindi di manipolare ciò vale ancora.
Dobbiamo selezionare qualcosa e quindi la manipolazione che avviene è aggiungere un listener di eventi
a quella cosa che abbiamo selezionato.
C'è un metodo in particolare che useremo tutto il tempo che si chiama aggiungere listener di eventi.
di input, perché la password e abbiamo qualcosa selezionato, quindi chiamiamo add example listener su di esso e diamo due argomenti.
Quindi al listener di eventi è quello che usiamo una volta che selezioniamo un elemento come il primo pulsante
o il tipo
Il primo è il tipo di evento che vogliamo ascoltare.
E il secondo argomento è il codice che vogliamo eseguire quando si verifica quell'evento.
Quindi ecco un esempio.
Sto selezionando il primo pulsante in una pagina non importa dove sia il pulsante o come
appare o qualsiasi cosa solo un pulsante qualsiasi.
il pulsante al click listener dell'evento e quindi il secondo argomento è una funzione che arriva fino a qui.
E poi chiamo
E questo codice non viene eseguito immediatamente.
Ricorda che questo è chiamato callback.
Questo codice non viene eseguito immediatamente.
Funziona solo una volta che l'evento è stato attivato.
Quindi, una volta cliccato sul pulsante javascript, viene richiamato.
Questa funzione dice hey è il tuo momento di brillare e tornare qui pronto, eseguiamoci.
E poi quel codice viene eseguito e ci viene consigliato non registrare qualcuno fare clic sul pulsante.
Quindi questa funzione verrà eseguita ogni volta che un pulsante è veloce da eseguire con
il pulsante specifico che abbiamo selezionato come cliccato.
Quindi ecco un altro esempio.
In questo caso ho il mark up qui un pulsante e un paragrafo e ho selezionato entrambi con il selettore di Kery e li
ho salvati entrambi in variabili e quindi tutto ciò che facciamo è aggiungere un listener di clic in modo
che il pulsante aggiunga click list e poi il il secondo argomento è la funzione di callback.
clic su quel pulsante cambia il contenuto del testo dei paragrafi in modo che qualcuno faccia clic sul pulsante
e puoi vedere quando faccio clic su quel pulsante che cambia da nessuno mi viene fatto clic e qualcuno deve fare clic sul pulsante.
E quello che faremo ogni volta che si fa
Quindi ora farò una rapida dimostrazione usando la nostra pagina demo Dom iniziamo facendo questo H-1 proprio
qui.
Cambia colore quando un utente fa clic su di esso.
Quindi per farlo dobbiamo iniziare sempre selezionando l'H-1.
Quindi abbiamo un sacco di opzioni lì.
Userò semplicemente il documento di selezione di queery che interroga il selettore H-1 per assicurarci di averlo.
Tutto ok.
Quindi scriviamo semplicemente H-1 che aggiunge listener di eventi.
Ricorda che ci sono due argomenti.
Il primo è l'evento che stiamo ascoltando.
E passeremo ancora un po 'di tempo a parlare dei diversi eventi delle diverse opzioni.
Per ora stiamo facendo solo clic e il secondo è il codice che vogliamo eseguire quando l'utente fa clic.
Quindi, la funzione e basta avviare davvero semplice e basta fare un avviso quando l'utente fa clic.
Quindi faremo un avviso su cui è stato fatto clic su ognuno di essi in questo modo.
E ora colpiamo invio.
Niente cambia subito.
Ma ora se clicco su quello quindi chiuderò questo.
Se clicco ovunque nella pagina.
A parte l'H-1 non succede nulla.
Non appena clicco l'H-1 sebbene mi dica che H-1 è corretto.
Quindi è importante
ciò significa che posso andare qui e fare clic perché, se lo ispeziono, l'H-1 passa attraverso lo
schermo.
Si applica solo all'H-1, ma
Quindi, solo qualcosa da tenere a mente va bene per noi in questo caso, ma saltar fuori
saltuariamente dove le cose si comportano in modo un po 'diverso da come potresti volerlo e
devi usarle CSSA magari per accorciare la fase uno o cambiare la tua ascoltatore comunque.
Quindi piuttosto che solo avvisare Proviamo a fare qualcos'altro.
E se premo la freccia su un clicker di un evento di aggiunta clicco
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.
quello che succede, la prima cosa che succede è che in un avviso si dice ancora che è stato fatto clic su H-1.
Di nuovo nulla cambia subito ma quando faccio clic presta attenzione a
E poi quando chiudo che poi diventa arancione.
Quindi la morale qui è che possiamo avere più di un ascoltatore su un dato elemento.
Quando clicchiamo su quell'H-1, il primo listener che abbiamo aggiunto stava ascoltando un clic e ha lanciato un avviso e successivamente
abbiamo aggiunto un altro listener che ha anche ascoltato un clic, ma ha cambiato il colore
di sfondo.
Quindi quando clicco su entrambi corrono.
suo aspetto è arancione, ovviamente non lo vedi perché era già arancione ma devi fidarti di me.
E questo succederà sempre per ora se clicco di nuovo ricevo l'avviso e il
Continua a cambiarlo in arancione ancora e ancora e ancora.
OK I ho intenzione di aggiornare e sbarazzarsi di tutto ciò.
Voglio anche fare una rapida dimostrazione aggiungendo un ascoltatore all'UL.
Quindi facciamo un selettore di query di dump di documenti UL e ricordiamo che abbiamo tre alleati invece di un solo ul.
Quindi ti mostrerò cosa succede quando lo impostiamo su un elemento genitore come quello.
Bene e non userò una variabile solo per farlo qui.
Ascoltatore Adamant.
Clic.
Quindi questo è il primo argomento.
Il secondo è la funzione che vogliamo eseguire
proprio come questo.
E ho intenzione di iniziare.
Facciamo solo una console che registra bene erano i clic e tu sai cosa.
Quella è la voce passiva.
Cattiva idea.
Facciamo.
Hai fatto clic su UL molto meglio.
OK.
Quindi teniamo aperta la console e facciamo clic su UL.
Ma come potremmo fare clic sull'olio.
Perché il pozzo ha tre alleati al suo interno.
L'UL è tutta questa cosa proprio qui.
Quindi qualsiasi rapido non importa quale alleato io sia da qualche parte nel pozzo.
Puoi vedere il numero che aumenta qui.
Qualsiasi rapido sul pozzo eseguirà questo diario della console.
Ricapitoliamo ancora una volta e questa volta diciamo che voglio cambiare l'alleato stesso.
Quando clicco su un singolo alleato, voglio che succeda qualcosa.
Ci sono alcuni modi per farlo.
E inizieremo solo con quello più semplice che collega un ascoltatore ad ogni alleato come un testa a
testa.
Quello che faremo alla fine è collegare un ascoltatore all'UL e poi all'interno dell'ascoltatore.
Verificheremo quale bugia in particolare all'interno dell'UL è stata cliccata su tutti con un Lessner.
Per ora però aggiungeremo un ascoltatore separato a ogni
bugia, quindi dobbiamo iniziare selezionando gli alleati in modo che i nostri alleati siano uguali a tutti gli alleati.
Va bene allora dobbiamo fare un ciclo for.
Quindi per var I uguale a zero.
Ricorda che ho detto che lo faremmo sempre.
Quindi, meno degli alleati di quella lunghezza, più plus
proprio così.
E poi all'interno di qui aggiungeremo effettivamente un ascoltatore ad ogni singolo alleato.
Così sembra.
Elyse I in modo tale da darci l'alleato specifico
e la funzione click listener dell'evento proprio così e fatto un po 'di cose.
E poi il codice che vogliamo eseguire.
Cambiamo il colore dell'alleato su cui è stato fatto clic e cambiamo solo per essere viola.
Quindi abbiamo alcune opzioni diverse.
Quello che devo fare è fare riferimento all'alleato su cui è stato fatto clic.
Quindi potrei fare questo alleato anche se questa non è davvero una grande soluzione perché c'è un modo
molto più semplice di fare ciò che è usare questa parola chiave.
Quindi all'interno di un ascoltatore la parola chiave che fa riferimento all'elemento su cui è stato fatto clic o all'elemento su
cui è stato posizionato il mouse o all'elemento su cui è stato premuto il tasto ovunque l'elemento che
va prima dell'evento, qualunque cosa sia selezionata, è ciò che questo si riferisce a.
Quindi posso scrivere questo stile punto che il colore è uguale al viola.
E in realtà è qualcosa di più ovvio.
È un font piccolo.
Quindi facciamo il rosa proprio così.
Ho colpito invio.
Nulla accade immediatamente ma se clicco su un alleato puoi vedere che diventa rosa.
E se continuo a fare clic continui a cambiare in rosa Non puoi dirlo.
Quindi questo schema qui di selezionare un gruppo di cose che li circolano singolarmente e aggiungere un listener
di eventi a ciascuno di essi è davvero molto comune.
Lo vedremo sempre nei prossimi progetti che realizzeremo.
come quella che abbiamo fatto qui dove scrivi la funzione con parentesi e non le dai un nome.
L'ultima cosa che menzionerò qui è che non devi sempre usare una funzione anonima
Non devi farlo.
Puoi dichiarare una funzione con nome separatamente come ho fatto qui.
La funzione cambia il testo e quindi tutto ciò che dobbiamo fare è pronunciare il pulsante che aggiunge il listener di eventi
o clicca e poi gli diamo il cambio di testo.
Si noti che non abbiamo parentesi in seguito perché eseguirò immediatamente la funzione che non è
ciò che vogliamo.
a questo ascoltatore veloce e stiamo dicendo che questa è la funzione che voglio che venga eseguita quando l'utente fa clic su questo pulsante.
Quindi stiamo solo passando il valore di questa funzione, stiamo passando fondamentalmente il contenuto
Ma non eseguirlo ancora.
Quindi questi due funzioneranno esattamente allo stesso modo.
È solo una questione di preferenza.
Per la maggior parte ci sono alcune differenze che potremmo incontrare in seguito.
Preferirei di gran lunga usare questo.
L'unica volta in cui non utilizzerei una funzione anonima è se avessi bisogno di usare di nuovo quel codice da
qualche altra parte al di fuori dell'orologio.
Quindi, se volessi eseguirlo da solo o se volessi eseguirlo invece di un altro listener
veloce piuttosto che duplicare questa funzione, gli darei un nome e quindi duplicare solo il nome in cui
lo uso due volte.
OK, così da vicino avremo la possibilità di fare alcuni esercizi veloci usando Wisner e alcune delle cose
che abbiamo imparato negli ultimi video.