Va bene bentornato.
In questo video voglio parlare un po 'di più su alcuni dei diversi tipi di eventi
fino ad ora abbiamo incontrato l'evento click e l'evento change che abbiamo usato su un input di testo o un numero
inserito nell'app keeper keeper.
Inizierò introducendo il M. B. UN. riferimento all'evento.
Quindi questa è la pagina web su cui sono qui.
E questa pagina web è un riferimento a tutti i diversi eventi riconosciuti dall'API DOM.
E se scorri verso il basso potresti essere sorpreso da quanti ce ne sono.
E in realtà sto per farti scrivere un codice nel prossimo esercizio solo per contare quanti
ce ne sono di un divertente esempio pratico di usare la geometria dei contro. Quindi conterai quanti ce ne sono, ma per ora sai solo che ce ne sono
un sacco e probabilmente ci sono cinque o sei forse fino a 10 molto comuni che
useranno tutto il tempo cose come per trascinare e rilasciare per un evento di click event in bilico può fare doppio clic su eventi di key
press, ma in caso contrario molti di quelli più oscuri non verranno mai utilizzati o forse li userete una volta in un progetto.
Ma è bello sapere che questa pagina web esiste che
ci sono così tanti eventi che potremmo non usare mai.
elemento con il mouse.
E questo video mi concentrerò su due eventi in particolare che hanno a che fare con il passaggio del mouse su un
E quelli sono chiamati mouse e mouse fuori.
Quindi ho una semplice applicazione e farò in modo che sia chiamato
a farlo invecchiare nel mio nuovo file e aggiungerò il mio standard standard e questa non sarà una lista completa.
Non saremo in grado di aggiungere nuovi o quello che faremo è avere una UL con tre o quattro alleati.
Cose come lavare gatto mangimi per gatti e faremo nutrire il gatto con il cane e salvare.
Quindi abbiamo le nostre tre cose da fare e questo è tutto ciò di cui abbiamo bisogno per ora.
E quello che voglio fare.
Lo aprirò nel browser.
Voglio essere in grado di fare clic
e questo dovrebbe oscurare l'elemento da fare e forse barrato da una riga.
Ma voglio anche essere in grado di fluttuare e voglio sapere su quale mi stavo librando.
Quindi ottengo questo bel feedback da parte degli utenti mentre passo il mouse su uno di questi.
Forse cambierai colore o il grassetto inizierà semplicemente rendendolo verde e
ci sono così tanti effetti che puoi fare per il tuo utente usando questi eventi hover.
Quindi lo dimostrerò in questo momento prima di poter scrivere qualsiasi javascript, anche se abbiamo bisogno di creare il nostro file.
Quindi salverò un nuovo file e lo chiamerò per fare.
Sì.
E come
sempre ho avuto il mio avviso connesso salva torna qui e aggiungi il nostro script in basso e la nostra fonte è uguale al punto di deuce J. S. e salveremo o aggiorneremo e riceveremo la nostra attenzione.
Ciò significa che sta funzionando.
Andiamo al primo evento che
ho menzionato e la prima cosa che dobbiamo fare è selezionare qualcosa prima di poterlo manipolare.
Quindi comincio solo a farlo alla prima bugia.
Quindi userò il documento var first allly ECOs
e farò un alleato selettore di query e ricordo che questo mi dà la prima bugia perché non ho fatto un selettore di query tutto
e quindi ho intenzione di aggiungere il mio listener di eventi al primo alleato.
Quindi siamo andati
prima di tutto ad aggiungere listener di eventi e l'evento che stiamo ascoltando non è fare clic con il mouse sopra.
E poi diamo la nostra funzione di callback.
E il modo in cui funziona il mouseover sta per sparare non appena iniziamo a librarsi sopra qualcosa.
e ora e il secondo e proprio ora e questo primo.
Quindi, se stavo lavorando con quest'ultimo alleato, il mio mouse si sarebbe sparato proprio ora
Quindi riguarda quando inizia il passaggio del mouse.
Quindi per prima cosa aggiungerei mouseover di listener
di eventi e faremo semplicemente un log invece di un mouse di callback e, se aggiorniamo la nostra
console, ricordiamo che l'abbiamo fatto solo al primo alleato e che ora andiamo a prendere il mouseover.
Inoltre, è importante notare che non spara continuamente ogni volta.
Sai che siamo sopra questo è quando inizia il nostro passaggio del mouse su un elemento.
che il logging è costante o quale sia il codice che abbiamo nel callback.
Quindi questo è utile in modo che non siamo costantemente in grado di sapere
Succede solo quando si passa il mouse inizialmente.
Quindi piuttosto che cancellare la registrazione, lavoriamo sul cambiamento del colore dell'alleato.
Facciamo verde.
Quindi quando passi il mouse su di esso diventa verde.
Quindi dobbiamo fare lo stile
del primo alleato che il colore è uguale al verde e salviamo il refresh e ora guarderò che lo renderò un po 'più grande e lo renderò
un po' più grande qui e lo aggiornerò quando avanzo il mouse sopra diventa verde.
E poi quando vado via rimane verde che non è quello che vogliamo.
Vogliamo solo che questo sia un effetto hover.
Quindi quando passo il mouse sull'alleato diventa verde.
Ma quando smetto torna ad essere nero per
fare ciò, abbiamo effettivamente bisogno di un altro evento e quell'evento sparerà quando il nostro passaggio al volo sarà finito.
Quindi, quando lasciamo questo elemento e si chiama Mouse out, faremo prima la stessa cosa.
Ma all'evento Lessner.
E poi la nostra funzione di callback e faremo solo un primo attacco di colore stile di volo e riportarlo al nero.
Proprio così e se aggiorniamo puoi vedere che diventa verde e poi
il mouse torna al nero e al mouse su un verde e così via.
Così ora otteniamo questo piccolo effetto di passaggio
del mouse che ci mostra cosa stiamo passando sopra in sostanza, che cosa è selezionato.
Quindi ora facciamo in modo che funzioni per ogni singola bugia.
Sono solo alcuni piccoli cambiamenti che dobbiamo fare.
E il primo di questi è che dobbiamo selezionare tutti gli alleati.
dà una lista con i tre alleati.
Cambierà molto variabili per essere lontane bugie documentate lettera di alleati in modo che ci
E poi, naturalmente, sfortunatamente non possiamo fare solo bugie di un ascoltatore di eventi che non funziona.
Dobbiamo fare un ciclo for quattro dei nostri pari zero.
Io meno di bugie quel collegamento.
Inoltre.
E si spera che tu stia
iniziando a sentirti un po 'più a tuo agio nel fare questo aggiungendo eventi o manipolando qualcosa
invece di un ciclo in cui selezioniamo un gruppo di essi e poi passiamo in loop e facciamo qualcosa individualmente.
Come ho detto
alcuni video fa, uno schema molto comune è davvero importante per iniziare a metterci a nostro agio.
Quindi all'interno di qui invece di fare il primo altro, aggiungerei listener di eventi.
Stiamo lavorando con gli occhi delle parentesi degli alleati, quindi questo è il nostro alleato individuale.
E poi ho intenzione di copiare questo codice e c'è un problema con questo codice.
Voglio dire, funzionerà, ma non funzionerà nel modo in cui lo vogliamo.
Quello che succederà è che stiamo aggiungendo un listener di eventi ad ogni alleato alleato.
Ma quando passiamo sopra a qualcuno di loro, cambiamo solo i primi punti alleati di colore nero.
E in realtà non funzionerà perché la prima bugia non è più definita.
Abbiamo cambiato il nome.
Ma non è quello che volevamo comunque.
Vogliamo che sia l'alleato al di sopra del quale si è verificato l'evento del mouse su.
Quindi possiamo cambiare questo alla parola questo.
Ricorda che la parola chiave al posto di un listener
di eventi fa riferimento all'elemento o all'elemento su cui è stato attivato l'evento.
Quindi questo stile ma colorato a schermo uguale e quindi duplicheremo nuovamente questo codice.
Ma invece del mouse sopra faremo un mouse e invece
di andare a Green torneremo al nero e poi potremo sbarazzarci di questo e rinfrescarci e eccoci.
Abbiamo il nostro bel effetto hover.
Quindi l'ultima cosa di cui parleranno è l'aggiunta di un listener di clic solo per renderlo un po 'più completo.
Quindi la stessa cosa che pensavo avesse un click list di eventi o una funzione di callback.
E quello che faremo qui è usare una classe.
Quindi aggiungerò prima la classe.
classi iniziali che si alternano.
Non esiste ma dirò questo fa l'elenco delle classi e cambierà la lista delle
E chiameremo semplicemente la lezione.
Quindi il punto è che posso fare clic su uno di questi e dovrebbe uscire in grigio e avere un effetto barrato.
E anche se non ho una lezione definita, è ancora aggiunta, quindi
posso mostrarti che apri la console e ispezioniamo uno di questi.
E poi facciamo clic su di esso e puoi vedere o
fare clic sul primo che puoi vedere dal modo in cui il colore verde e nero cambia qui come un hover.
Ma mentre clicco su questo primo si può vedere che aggiunge lezioni fatte.
E poi clicco di nuovo e va via.
Quindi ora abbiamo solo bisogno di definire la lezione fatta.
Quindi facciamolo ora.
Vado oltre a
sublimare e creare un nuovo file e ho intenzione di salvare questo come fare è C Ss e la prima cosa che facciamo è definire la nostra classe fatta.
E ho intenzione di dargli un effetto barrato che facciamo
con la decorazione del testo e abbiamo impostato tale linea e anche modificare l'opacità in modo che l'opacità sarà 0. 5 e salvare.
con loro come tag a Due's gutsiest e possiamo salvare.
E poi ovviamente devi collegare questo per iniziare a valutare o invogliare il file
Ora proviamo.
Aggiorna la pagina.
Mi fermo.
Quindi ottenere sono due eventi cambiando il colore nero e verde.
E ora posso fare clic e otteniamo un effetto barrato.
E anche questa linea.
è piuttosto che cambiare manualmente il colore qui.
Ci sono alcune piccole modifiche che vorrei fare Tuttavia se torniamo al nostro file javascript il primo
Cambiando per essere verde e nero.
Penso che sia ancora meglio farlo con la nostra classe.
Quindi ho intenzione di creare una nuova
classe e chiamerò quella selezionata e poi dirò quando è selezionato il testo o il colore dovrebbe essere verde proprio così.
E poi andremo con il Javascript.
E quando passiamo il mouse sopra tutto ciò che vogliamo fare è dire aggiungere questa lista di classe.
per attivare parti delle nostre C S e SAS sarà effettivamente responsabile dello stile.
E questo torna a quell'idea di separazione delle preoccupazioni in cui non
vogliamo che i nostri javascript manipolino gli stili individuali piuttosto che possiamo usare javascript
In questo modo la classe selezionata verrà selezionata
quando passeremo il mouse sopra e quando partiremo o quando scompariremo, faremo rimuovere questa lista di classi stupide e se salviamo l'aggiornamento, è possibile vederlo abbastanza bene.
Clicchiamo otteniamo il nostro barrato.
Tutto ok.
C'è un piccolo elenco da fare.
Quindi questo è un modo leggermente più bello di farlo.
Funzionalmente sembra uguale.
È solo una pratica migliore utilizzare le classi piuttosto che aggiungere e modificare gli stili uno alla volta.
Quindi, per riassumere qui abbiamo visto due nuovi eventi mouseover e mouse out.
E abbiamo anche avuto un po 'più di pratica nell'impostare eventi invece di un ciclo in cui abbiamo usato questa parola chiave