Quali sono gli eventi JavaScript
Stai guidando in macchina e arriva un segnale, è rosso, ti fermi. Quando il segnale diventa verde, ricomincia a guidare. Le tue azioni erano basate su un segnale fornito. Lo stesso vale per gli eventi. Quando stai programmando, si desidera eseguire alcune azioni facendo clic su un pulsante o premendo un tasto. Il clic del pulsante o la pressione di un tasto genera un evento. Sulla base di questo evento, vengono eseguite alcune azioni. Ad esempio, c'è un articolo e un pulsante che recita "mostra di più". Quando fai clic su quel pulsante, l'intero articolo diventa visibile
In questo post, discuteremo di tutto sugli eventi con esempi.
Cos'è un evento
Per dirla semplicemente, un evento è un'azione eseguita da un utente o avviata dal browser. JavaScript risponde/reagisce a tale azione; Questo reagente/risposta all'evento si chiama gestione degli eventi. La gestione degli eventi è solo un pezzo di codice scritto dallo sviluppatore. Questo pezzo di codice funziona quando l'evento viene attivato. I gestori di eventi sono anche chiamati ascoltatori di eventi. Gli eventi vengono sparati all'interno della finestra del browser e sono correlati o collegati a un singolo o una serie di elementi. Gli eventi sono di molti tipi diversi. Alcuni di loro sono:
- L'utente preme un tasto sulla tastiera
- L'utente si libra su un elemento
- L'utente fa clic su un elemento tramite il mouse
- L'utente chiude il browser
- L'utente ridimensiona il browser
- La pagina Web sta caricando o ha finito di caricare
- Quando si verifica un errore
- L'utente presenta un modulo
Eventi JavaScript
JavaScript ci fornisce un sacco di eventi. Elencarli tutti e spiegare tutti in un solo articolo è impossibile. Qui elencherò solo quelli più comuni:
Eventi di input
- Blur
- modifica
- messa a fuoco
- keyup/keydown
- chiave di chiave
Eventi del mouse
- Mouseover
- Mouseout
- Mousedown/Mouseup
Fai clic su Eventi
- clic
- DblClick
Carica eventi
- carico
- scaricare
- errore
- Ridimensionare
Ora che abbiamo discusso della teoria, andiamo alla praticità e discutiamo alcuni esempi di vita reale di eventi JavaScript. Supponiamo di avere un pulsante e quando faccio clic su quel pulsante, voglio che un avviso venga mostrato all'utente. Il clic del pulsante innesca l'evento e quindi un blocco di codice gestirà l'evento e reagirà mostrando un avviso.
Questo è un pulsante semplice in un file HTML. Ora otterremo il pulsante tramite il nome della classe e quindi gestiremo l'evento I-E Click.
const btn = documento.QuerySelector (".cliccami");btn.addEventListener ('click', function ()
avviso ("hai fatto clic sul pulsante");
);
Metti questo codice in un tag di script o crea un altro file con JS Extension e mettilo lì.
Ora quando facciamo clic sul pulsante, verrà visualizzato un avviso:
Ci sono anche altri modi in cui possiamo implementarlo, ad esempio:
const btn = documento.QuerySelector (".cliccami");btn.onClick = function ()
avviso ("hai fatto clic sul pulsante");
;
O:
const btn = documento.QuerySelector (".cliccami");funzione clickmedme ()
avviso ("hai fatto clic sul pulsante");
;
btn.OnClick = ClickedMe;
Il file HTML i-e il pulsante rimane lo stesso.
Nota: Puoi inserire il tuo codice JavaScript in un tag di script e quindi eseguire il tuo file HTML nel browser utilizzando Live Server o creare un file diverso con JS Extension e fare riferimento all'interno dell'intestazione del file HTML.
Ora diamo un'occhiata a un altro esempio: supponiamo di avere un modulo di registrazione. Nel modulo abbiamo due campi di input e vogliamo mettere la convalida. Se l'utente presenta il modulo, vogliamo verificare se l'utente ha riempito sia gli ingressi o lasciato vuoto. Se entrambi o uno di loro è vuoto, mostriamo un avviso che il campo è vuoto. Altrimenti, mostriamo un avviso che dice che l'utente ha registrato:
Quando abbiamo lasciato vuoto il campo della password e abbiamo fatto clic sul registro, un evento ha attivato I-E Invia. Ma in base al nostro gestore il campo di input "Parola d'ordine"Era vuoto quindi un messaggio"Si prega di riempire i campi richiesti" è mostrato.
Quando abbiamo riempito entrambi i campi e fatto clic sul pulsante Registro, "Registrato" E 'stato mostrato.
Conclusione
Gli eventi e la gestione degli eventi sono concetti davvero importanti di JavaScript. Quando un utente interagisce con una pagina Web viene attivato un evento. JavaScript fornisce gestori di eventi per rispondere a questi eventi e rendere le pagine Web più interattive, fornendo al contempo un'esperienza utente coinvolgente. In quei gestori di eventi possiamo mettere il nostro codice e la nostra logica e fare qualcosa di bello.
In questo post, abbiamo discusso brevemente quali sono gli eventi JavaScript e come possiamo gestirli; Quindi siamo passati ai tipi di eventi e ai gestori di eventi e alle loro applicazioni di vita reale.