Trascrizione: (click per espandere)

salve a tutti in questo video parlerò
degli eventi di javascript
gli eventi sono un fattore
importantissimo di javascript in quanto
javascript e un linguaggio event driven
che vuol dire guidato dagli eventi cosa
è un evento un evento è qualcosa che
succede che potrebbe essere anche un
interazione dell'utente e che fa
innescare un determinato comportamento a
javascript un evento può essere quando
l'utente clicca con il mouse oppure
quando schiaccia un pulsante della
tastiera e automaticamente
io posso legare a questo determinato
evento una funzione di javascript e
quindi possono dire javascript fai
qualcosa quando l'utente fa questa
questo evento innesca questo evento
abbiamo già visto nei video precedenti
un paio di eventi abbiamo visto l'evento
onclick che era quando l'utente
cliccava col mouse c'era anche l'evento
onload che era quando il browser finiva
di caricare la pagina web
adesso andiamo un po' più a fondo con gli
eventi vi metto in descrizione un link
dove potete trovare tutti gli eventi e
di javascript ce ne sono tantissimi ci
sono eventi per il mouse eventi per la
tastiera eventi per la finestra del
browser eventi per il touch screen
comunque potete darci un'occhiata
e adesso cosa voglio fare io qui voglio
creare una funzione che viene innescata
in inglese si dice trigger quando io
passo col mouse sopra a questo div
quindi quando io passo col mouse sopra
questo div voglio cambiare il contenuto
del mio titolo h1 andiamo a vedere come
si può fare allora function la chiamo
mouse
sta passando e quindi adesso vado a
prendermi il mio elemento
getelementbyid il mio elemento titolo e
ci assegno un nuovo testo che il mouse
sta passando
ecco qui e adesso come faccio ad assegnare
questa funzione è a un evento della mia
pagina web ci sono tre maniere le farò
vedere tutte e tre poi vi dirò i loro
pro e contro
e vediamo la prima allora io posso
andare del mio div e scrivere questo
speciale attributo che è un onmouseover
che vuol dire quando il mouse e sta
passando sopra e gli assegno il nome
della mia funzione mouse sta passando
con le parentesi tonde salviamo ricarico
la pagina ora come vedete quando io
passo
col mouse sopra il mio div
il contenuto del titolo h1 viene
cambiato eccolo quella quando io esco e
il contenuto rimane lo stesso perché non
ho nessun evento che dice quando il
mouse lascia il div
ricambia il testo dell'h1 quindi adesso
io posso creare un nuovo evento function
e scrivo lo chiamo mouse passato e qui
scrivo il mouse è passato e adesso devo
andare ad assegnare questo nuovo evento
sempre al mio div
qui allora io posso scrivere andiamo a
capo di un po più di spazio onmouseout
che vuol dire quando il mouse è uscito
trigger o meglio innesca questo questa
funzione qui è la chiamo mouse
passato abbiamo detto quindi adesso io
torno qui carichiamo la pagina ecco qui
ecco qui come vedete quando io salgo
sopra il mio div il mouse sta passando
quando io esco il mouse è passato
eccolo qui semplicissimi io posso anche
assegnare più di un di un evento o
meglio più di una funzione allo stesso
evento quindi io qui potrei mettere
creare un'altra funzione e per
assegnarla sempre al mouse over
basterebbe che io metta una virgola e
scrivo il nome della seconda funzione
come in questo caso così
quindi io posso assegnare più di una
funzione allo stesso evento e e questo è
come funzionano gli eventi e adesso vi
faccio vedere questo è il primo metodo
anzi questo è il primo metro
siamo così adesso lo commento
ecco allora il primo metodo come avete
visto è usare questi speciali attributi
html per assegnare gli eventi ci sono
diverse scuole di pensiero c'è a chi non
piace inserire il javascript in questa
maniera perché vuole mantenere il file
html completamente libero da javascript
ecco quindi adesso un attimo riscrivo il
mio div id display
eccolo qui
allora ricapitolando questo è il primo
metodo e bisogna mettere direttamente
dentro al codice html i nomi
delle funzioni di javascript c'è a chi non
piace quindi usa un altro metodo diverso
è questo qua secondo metodo e come
funziona secondo che io uso
document.getelementbyid display e gli
assegno direttamente qui come
proprietà il
nome dell'evento quindi onmouseover e
metto il nome della funzione mouse sta
passando in questo caso va inserito il
nome della funzione senza le parentesi
perché io non voglio eseguire la la mia
funzione voglio solo passare il
contenuto della mia funzione
quindi io posso avere questa per il
mouse over e posso avere questa per il
mouse out che mouse passato adesso
andiamo a vedere come funziona se
funziona tutto perfetto
eccolo qua funziona esattamente come
prima
solo che adesso il mio codice html è
normalissimo codice html non c'è nessuna
funzione javascript inserita qui tutto
quello che serve è dentro al tag script
quindi è dentro al javascript e diciamo
il contro di usare questa tecnica qui è
che io non posso inserire dentro allo
stesso evento più di una funzione quindi
onmouseover posso solo contenere una
funzione alla volta perché se prova
inserirmi un'altra la funzione
precedente viene sovrascritto come posso
ovviare a questo problema con il terzo
metodo andiamo a vedere il terzo metodo
allora terzo metodo
sempre document.getelementbyid display
e si usa questo metodo qui che si
chiama addeventlistener che vuol dire
aggiunge un evento pronto ad ascoltare e
questo metodo accetta due argomenti il
primo argomento è il nome dell'evento
solo che in questo caso il nome
dell'evento va senza la parolina on
all'inizio quindi va solo mouse over
quindi se io avessi avuto onclick a
onblur eccetera in questo caso qui va
messa dentro senza le paroline on
all'inizio e come secondo argomento ci
va il nome della funzione che voglio
passare anche questa volta senza le
parentesi come in questo caso qui e
adesso io ecco qui e qui ci
passa mouseout e il secondo funziona
qui ecco qui adesso commento queste due
qui perché non mi servono più
andiamo a vedere scritto ha scritto
sbagliato ovviamente display ok andiamo a
vedere
e come vedete funziona perfettamente
come prima solo che io sto usando un
terzo metodo diverso
qual è il pro di questo mezzo di usare
questa tecnica qui rispetto a questa
tecnica qui che usando l'addeventlistener
possono aggiungere più di una
funzione allo stesso evento quindi come
si poteva fare inserendo qui una virgola
e poi di scrivere il nome della seconda
funzione posso fare qui riscrivo una
riga con getelementbyid e poi
addeventlistener mouseover e ci posso
scrivere un'altra funzione posso anche
eliminare
un event listener e posso scrivere ad
esempio come in questo caso qui e uso
invece di addeventlistener scrivo removeeventlistener
stesso nome dell'evento e
stessa funzione perché se io ho più di una
funzione posso andare a eliminare una
determinata funzione e lasciare le altre
e quindi adesso se io salvo come vedete
da se io cambio il nome ma quando esco
dal div
non succede più nulla perché ho prima lo
aggiunta e poi l'ho rimossa quindi il
mio è il nome del il testo scritto
dentro il mio tag h1 è rimane lo
stesso con questo è tutto guardatevi il
link che vi metto in descrizione perché
appunto ci sono tantissimi tipi di
evento è molto utili per proprio per
rendere interattiva alla pagina web ci
sentiamo la prossima ciao