buongiorno a tutti bentornati episodio numero dodici del corso di javascript quest oggi guardiamo gli eventi allora c'è tanto di cui parlare degli eventi ed è un argomento tosto andiamo a vedere cosa sono gli eventi abbiamo degli eventi handler gli inline event handler andiamo a vedere advent listener ere movement lisser vediamo che cos'è la gente i vent presente di fault parleremo delle 20 bab lingen capturing che è importante da capire cos'è la stop propagation e poi vi dirò semplicemente che esiste eventi delegation ma questa non è la lezione per parlarne perché è un argomento difficile se
cominciate già sta roba finale non è semplice questa parte qua vi dico che esiste nella documentazione c'è un rimando a un blog e poi però non è il momento dunque cominciamo cosa sono gli eventi gli eventi sono quelle cose che possono succedere durante una pagina abbiamo già visto il click abbiamo già visto in questo caso vedete c'è un submit c'è un form potrebbe esserci un double click potrebbe esserci un focus sull'input anzi facciamolo vedere subito possiamo fare nome punto un focus uguale function diciamo così invece sufficiente un console log ok console punto log e mandiamo
semplicemente a schermo sono in focus ok ve lo faccio vedere velocemente bam sono in focus qua non c'è domanda perché non l'abbiamo settato come potete vedere questi sono gli eventi potremmo cliccare potremmo potremmo fare un po di cose che hai questi sono gli eventi sono cose che succedono su una pagina perché l'utente fa determinate cose quindi l'evento che occorre è l'utente ha schiacciato questa cosa l'utente è passato col mouse qui l'utente ha schiacciato questo bottone sì quello è un evento che occorre e di conseguenza noi andiamo a fare determinate cose ok sono cosa che bene
o male abbiamo già visto ma queste sono spiegate allora le vent under ok quali ad esempio di un bar un click l'abbiamo già visto tante volte ok al 20 visto veramente tante volte così allora questo è landler praticamente quando noi mettiamo il l'elemento che ci interessa lo prendiamo dal document.getelementbyid i quali selector quello che volete e mattia mettiamo punto un focus piuttosto che nome punto o ne vedete che c'è un kobe hong kong decs menu home cat doubleclick drag potremmo andare avanti ci sono tanti drag drop come te ci sono tanti tanti tanti eventi hongqi
da un key press ap quindi possiamo fare veramente molte cose questo e per quanto riguarda il mouse questi per quanto riguarda i video quindi non vi annoio con queste cose qua come potete vedere ci sono tanti eventi semplicemente un attimo click boom questo è un evento handler ovvero che facciamo una determinata funzione è semplicemente facciamo function facciamo così facciamo così e ne venete facciamo console punto log abbiamo detto ciao oppure quindi fatemi rivedere vedete possiamo fare solo in focus oppure ciao sufficiente cliccando o stanno in focus benissimo questa cosa qua la possiamo fare però anche
in line ok quindi noi potremmo avere il nostro elemento eccolo qua e potremmo fare un coso in line un evento un handler scusatemi quindi vedete un focus mettiamo una funzione che è saluta facciamo così non facciamo nient'altro andiamo qua togliamo questo e facciamo function saluta apri qui andiamo facciamo le parentesi console punto log ci apriamo sempre con luca quindi ciao luca salviamo andiamo vedete ciao luca semplicemente andando in focus quindi quello che possiamo fare è il focus come l'abbiamo visto prima quindi ripeto no un focus un focus con qua la funzione oppure possiamo fare l'evento
handler in in line e da qua a richiamarla funzione sconsigliatissimo fare questa cosa perché è meglio non intaccare la html direttamente col javascript anche perché poi avete andarlo a cercare eccetera meglio avere tutto qua quindi sappiate che potete farlo in line meglio averlo gestito qui ok è una cosa importante che potete fare altrimenti come mai visto mi deve visto fare negli episodi precedenti è la evento listener che preferisco quindi potremo fare punto ad eventi listener facciamo o non debba essere focus focus apriamo la nostra funzione andiamo qua e facciamo console log punto sono in focus
dal listener diciamo così salviamo bam sono in focus dalli stand e quindi abbiamo visto tre modi in lay event handler normali event handler in line che vi sconsiglio e poi a the mentalist io preferisco questi ok perché ci dà ci danno più controllo in generale sappiate che potete fare anche così con la funzione anonima proseguiamo e guardiamo per che cosa succede quando noi facciamo un evento generiamo un oggetto evento quindi questo evento non essere una cosa random che succede viene registrata e viene registrata come evento ora io che ho usato scusatemi un altro tipo di
sintassi meglio far così pance normale e poi noi andiamo qui e mettiamo è in realtà questo parametro per di chiamarlo come volete lo trovate spesso chiamato i 28 mar lo anche pippo se volete io vi consiglio e oppure i venti salviamo anzi vi mando schermo e quindi nome o un focus vedete che ci arriva un oggetto qua ed è un focus eventi con bubble forse se ne può vedere c'è un po di roba c'è un target soprattutto il target è quello che ci interessa spesso anche sul sul click ok ci sono tante cose c'è il
time stamp il tipo che il focus su cell e men's punto il target lo useremo spesso il target ci permette di capire qual è l'oggetto che abbiamo preso in considerazione in questo caso facciamo il punto target i target lo userete spesso andiamo a vedere ma gira input pdf name che sarebbe il nome e nella movida effettivamente questo input ed è esattamente la stessa cosa vedete non cambia niente quindi target lo userete tanto tanto e questo è l'oggetto diventa l'oggetto evento e contiene un po di cose potremmo tranquillamente prendere il value che in realtà adesso non
avrebbe senso perché non c'è scritto niente vedete ci dà niente ma se noi scriviamo e torniamo qua avete che ci dà il valore perché dovremmo fare cosa del genere in questo momento non si sa però vedete che lo possiamo fare è semplicemente con oggetto evento selezioniamo il target per chiamo il value abbiamo preso un valore importante che ci potrebbe interessare allora che cos'è questo i presenti di fault ci sono degli elementi che si comporta in un certo modo ok ci sono dei medi che si comportano in un certo modo vi faccio vedere l'esempio andando a
commentare questo poi ve lo spiego andiamo qua abbiamo il nostro abbiamo il nostro forum che sia completo o meno mettiamo solo il cognome io faccio in via vedete che si è caricato velocemente e ci ha aggiunto quel punto di domanda se ne avessimo collegato un qualcosa per gestire questo form il forum sarebbe stato mandato infatti vedete che ci ha letteralmente cancellato tutti i dati vedete guardate quindi il forum è stato processato non c'è niente attaccato per processarlo non c'è php e non c'e ajax non c'è niente quindi sarebbe restato in html malforme stato inviato quindi
form è stato sabotato forma appunto summit che cosa abbiamo fatto noi ne abbiamo detto guarda form on submit quindi riconosce che questo è un submit vedete input di submit se vi ricordate da html quindi types submit che cosa fa il summit si trova dentro un form in via il format ok è il default è il comportamento di default del summit un summit dentro a un form in via il form che cosa mai detto però no perché noi vogliamo controllare se una persona vediamo qua non voglio incontrare se una persona ha compilato o meno i campi
come facciamo dobbiamo mettere un evento così come potevamo farle 20 listener guardiamo questo stiamo dicendo form che non è altro che quelli selector forma come abbiamo già visto un summit quindi quando il form viene inviato mi fai questa funzione mi controlli che il nome quindi il nome il cognome sto andando a prendere questi campi ok mi controlli che il nome e cognome non siano empty ovvero il nome value è vuoto o cognome value è vuoto quindi uno dei due campi non è stato compilato mi previeni il default quindi eviti che il form venga inviato e
cosa mi fai c'è qua sotto un paragrafo e mi mandi a schermo della roba ovvero il nyt figlio di un boss names quindi devi completare entrambi i campi andiamo a vedere tac tac non ho salvato taq taq taq perfetto quindi vedete che ha evitato che non è stata 20 che non è stato cancellato ha evitato il summit del del forum e ci ha mandato a schermo questa cosa che avremmo potuto gestire solo con presenze di fault altrimenti non bisogna fare tutto quello che vogliamo ma vedete che è comparso ma è stato mandato via direttamente quindi
non abbiamo il controllo sulle vento e questo è quindi questo è presente di fault andiamo a prevenire ildefonso alcuni eventi quindi se per caso voi avete un evento e non vi funziona per qualche strano motivo andata a prevenire se per caso non capite fate una prova e prevenire l'evento in moto in modo da poter debba gare e vedere se quello potrebbe essere il problema parliamo di eventi bab lingen capturing e stop propagation questa è una roba abbastanza teorica perciò ci spostiamo sulla documentazione che la spiega molto bene in italiano non c'è perciò va lager o
inglese e vi dovete fidare del sottoscritto allora i venti public and caption in capturing quindi sono due tipi di eventi che possono succedere vi spiego la situazione allora lo abbiamo un display video ok se faccio così abbiamo il display video che cosa succede che per nascondere questo video noi dobbiamo cliccare sul div ok qual è il fatto che questo qua grigio held in questo qua il video ma noi per far partire il video dobbiamo cliccare sul video quindi signori manda schermo vede che il video effettivamente è partito il video è partito ma ogni volta che
io clicco sul video mi nasconde perché in realtà sto cliccando anche sul sul div senza volerlo ok avete capito quindi io faccio partire il video ma in contemporanea sto cliccando sul div e i div se noi diamo prenderlo vedete che videobox è il div ci mette idem quindi va a nascondere tutto noi vogliamo cliccare sul video per farlo partire perché c'è qua video un click video play devo devo fare così scusatemi quindi noi devo fare video on clip video player è quello che abbiamo fatto perfetto il problema è che nello stesso tempo videobox che sarebbe
questo qua grigio sul click va a mettere la classe nascosta che andrà a mettere display non oppure visibility idem insomma l'ipo e ripete dal css che hanno messo andremo a spiegare quindi che cos'è il ba bling e il car sharing nel momento in cui noi andiamo a premere in quella posizione per il video appaiono due tipi di eventi allora abbiamo il car sharing il car sharing parte dall html vede cosa ci sono i colori quindi questa html body eccetera quando il nostro div che è il videobox ecco avevano il nostro video che cosa succede parte
da parte da ian sectors quindi dai vari nonni eccetera va a vedere se ci sono dei dei click handlers e non c'è niente poi arriva il divo che va a vedere se c'è ed effettivamente c'è perché come abbiamo visto abbiamo questo video box o un click attribute iden dopo di che arriva sul video lo trova e fa partire anche il secondo evento handler quindi il motivo per cui noi siamo in grado di far partire il video e nasconderlo è perché partono uno dopo l'altro ma parte 1a div e poi il video qual è il fatto
invece quindi questo è il car sharing che parte da che parte da lontano e va a catturare l'evento mano mano mentre invece il ba bling è un'altra cosa il ba bling pensate quando voi tirato un sasso nell'acqua che si espande ok quello è l'effetto bab l'ing che cosa succede che noi abbiamo premuto effettivamente sul video ok abbiamo premuto sul video quasi premiamo qui vedete che non parte il video ma se ne prima ho qua il video parte però poi lo prende prende anche il resto qual è il fatto che noi siamo partiti qui guarda l'evento
l'ha trovato la fatto partire dopodiché si è espanso sul di vela fatto partire è poi andato sugli altri anne sexton e non ha trovato niente quindi come possiamo quindi immaginatevi questa cosa come una propagazione si parte dalla si parte dal dall'esterno si va all interno oppure si parte dall interno e si va all'esterno per evitare questo genere di problemi noi usiamo i ovvero il nostro la nostra e che lo sapete ed è stato lo dico così i stop propagation quindi devo fare andiamo a stoppare la propagazione dell'evento questo evento ha delle ripercussioni esattamente come tirare
un sasso poniamo il caso che io ho tirato il sasso nello stagno e dovete l'evento l'evento è tirato il sasso nello stagno si ma questo sasso nello stagno genera altri eventi potrebbe innanzitutto elba bling e il bar bling genera i pesci che se ne vanno la rana che salta altrove o altre cose mamma mia che bella metafora come potete capire il mio evento scusatemi il mio evento di tirare il sasso ok in realtà genera altri eventi potrebbe generare altri eventi per evitare questa cosa ne usiamo stop propagation quindi se avete dei problemi di qualche genere
come in questo caso ritorniamo su qua voi dovreste mettere stop propagation andando a far così il video parte equa non succede niente perché noi abbiamo cliccato sul video sono cliccatissimi qua ovviamente lo andrebbe a nascondere ma questo è un altro paio di maniche ora e questo era public and capturing vi consiglio di riguardarlo non non ci capire non ci capite rete su molto son cose molto rare queste ma è importante saperlo innanzitutto dovete capirlo in primis in secondo luogo non solo dovete capirlo ma una volta che l'avete capito se ci finite contro potete gestirlo ok
più che altro una volta che sapete che esiste questa cosa la potete prendere in considerazione tornate sulla documentazione o sul video e valutate come gestirlo vi dicevo di eventi delegation qua c'è un link a un bellissimo blog ok di bubi che lo spiega bene ma già avete la testa piena con propagation presenze di fault bab lingen capturing io vi lascio perdere even delegation che è veramente complesso se proprio proprio lo volete sapere più avanti durante il corso lo potremo fare come bonus o guardatelo voi cercate di impararlo ok altrimenti però la lasciatelo perdere sicuramente le
20 delegation lo prenderemo in considerazione quando più avanti forse un altro corso andremo a gestire delle cose che possiamo fare con javascript quindi script comuni che potrebbero servirci e quando andremo a generare select dinamicamente e altri campi del form che vogliamo generale a dinamicamente useremo i venti delegation ve lo posso garantire ho avuto molti problemi nei miei primi mesi di sviluppo con javascript soprattutto dinamico e quindi lo vedremo per forza ii ma se avete già sviluppatori java script lanciati con una base importante e vi ringrazio per essere ma sti con me noi ci vediamo nel
prossimo video non so esattamente cosa andremo a fare è già tutto segnato ma ha memoria perdonatemi oggi non mi ricordo vi ricordo di descrizione per supportare il canale abbonamenti vetrina amazon e poi ci sono i gruppo telegram il canale the grand prestar sempre aggiornati o parlare con le altre persone della community ancora un abbraccio e alla prossima ciao ciao
