Eventi in JavaScript | Spiegato con esempi
JavaScript è noto per dare a una pagina web la capacità di "pensare e agire", il che è tutto possibile a causa di eventi. Gli eventi agiscono come scatenanti che spingono gli script di backend a eseguire azioni. Possono essere facilmente definiti come "cose" Ciò accade su una pagina Web, questi eventi possono essere qualsiasi cosa: caricamento di una pagina Web, facendo clic su un pulsante HTML o in bilico sul mouse su un elemento HTML specifico.
Ci sono gazillioni di eventi che possono attivare JavaScript, abbiamo eventi per attivare una funzione sul clic del mouse o su mouse, ma copriremo di lavorare con eventi e JavaScript.
Di seguito viene visualizzato un semplice esempio di un evento JavaScript che viene eseguito su un pulsante
Gestori di eventi
Gli eventi sono gestiti dai gestori di eventi; HTML fornisce la capacità di aggiungere vari tipi di gestori di eventi sui suoi elementi, questi gestori di eventi consentono al programmatore di eseguire il codice JavaScript eseguendo una funzione.
Esistono 3 tipi di gestori di eventi:
- Dom-on-event ascoltatore
- Ascoltatore in linea-evento
- Metodo addEventListener ()
L'ascoltatore di Dom On-Event
Possiamo utilizzare gli ascoltatori di eventi sulle proprietà DOM, come attivare un evento al momento del caricamento completo della pagina web. Questi ascoltatori di eventi possono essere aggiunti anche agli elementi HTML ma con la restrizione è un ascoltatore di eventi per ogni elemento HTML.
Ad esempio, vogliamo avvisare l'utente sul caricamento completo della pagina Web, possiamo farlo accedendo all'oggetto finestra del DOM:
Dopo aver eseguito il file HTML, vedrai il seguente output:
Come puoi vedere, dopo aver caricato completamente la pagina Web, JavaScript avvisa l'utente che la pagina Web ha caricato.
Nota: L'oggetto finestra viene utilizzato per lavorare su eventi globali.
L'ascoltatore in linea-evento
Uno dei metodi banali quando si lavora con HTML e JavaScript è utilizzare gli ascoltatori di eventi in linea, lo facciamo aggiungendo l'ascoltatore di eventi come attributo dell'elemento all'interno del suo tag.
Ad esempio, nell'esempio sopra, abbiamo aggiunto un "al clic()" Evento all'interno dell'elemento pulsante, quando utilizziamo l'ascoltatore di eventi inline, lo impostiamo uguale a una funzione che verrà invocata quando l'evento viene attivato.
Come potete vedere, btnClicked () è la funzione che verrà eseguita su un clic del pulsante.
Se vogliamo stampare la stringa per console "Hai premuto il pulsante", possiamo farlo scrivendo il btnClicked () Funzione come questa:
Quando si esegue il file HTML si ottiene il seguente output.
Utilizzando addEventListener ()
Il terzo gestore di eventi viene aggiunto utilizzando il metodo AddeventListener (), questo è il modo nuovo e più usato per gestire gli eventi in JavaScript; Per dimostrare questo, creeremo un div in HTML usando le seguenti righe di codice:
Esempio addEventListener ()
Per aggiungere un ascoltatore di eventi su questo div Utilizzerai il seguente frammento di script:
Se guardi da vicino lo snippet della sceneggiatura, noterai che stiamo aggiungendo 3 diversi ascoltatori di eventi in questo div, uno quando il cursore entra nel div, secondo quando il cursore lascia il div e l'ultimo quando il cursore fa clic sul div; Dopo aver scritto tutto questo codice, salvalo, ricarica la pagina e otterrai il seguente output:
Come puoi vedere nella console, i nostri gestori di eventi funzionano e il codice JavaScript viene eseguito.
Questo è tutto per gli eventi in JavaScript
Conclusione
Gli eventi in JavaScript sono il verificarsi di tali istanze che spingono il JavaScript a eseguire alcune manipolazioni sugli elementi HTML o a eseguire funzionalità back-end. L'evento in JavaScript viene utilizzato per dare alla pagina web HTML la capacità di pensare ed eseguire azioni, questi eventi possono essere qualsiasi cosa che fa un utente: facendo clic su un pulsante, premendo un tasto specifico o uno specifico movimento del mouse. Ci sono anche alcuni eventi globali a cui è possibile accedere utilizzando l'oggetto finestra, come la finestra.carico(). Abbiamo appreso vari tipi di gestori di eventi insieme ai loro esempi.