Gestenti di eventi JavaScript
In JavaScript, un evento è un'azione che si verifica su una pagina web all'interno del browser. Questa azione può digitare in un campo, fare clic su un pulsante o caricare una pagina. Le azioni possono essere avviate dal browser o dall'utente; Quando si verifica un'azione su una pagina Web, il browser notifica al sistema che si è verificato un evento. Gli sviluppatori possono quindi rispondere a questi eventi scrivendo funzioni note come gestori di eventi.I gestori di eventi sono funzioni che ascoltano un tipo specifico di evento e quando si verifica quell'evento eseguono un blocco di codice.
Cosa sta gestendo gli eventi
Un evento viene attivato ogni volta che un utente interagisce con una pagina Web. Questo evento può essere qualsiasi cosa da un utente che fa clic da qualche parte nella pagina per caricare una pagina Web.
Ogni volta che si verifica un evento su una pagina Web, il browser notifica il sistema; Le funzioni specifiche per gestori di eventi ascoltano i rispettivi eventi e quando quegli eventi vengono attivati eseguono il blocco di codice scritto al loro interno. Il codice scritto all'interno della funzione contiene tutte le azioni che devono essere eseguite in risposta all'evento che viene licenziato.
In questo post, avremo una discussione dettagliata su diversi tipi di eventi in JavaScript e su come gestire questi eventi.
Nota: Userò la console per dimostrare gli esempi presenti in questo post.
Quali sono i diversi tipi di eventi?
Alcuni degli eventi più comuni che si verificano in JavaScript sono:
Eventi del mouse:
- al clic
- mouseown
- topo
- mousemove
Eventi della tastiera:
- keydown
- keyup
Forma eventi:
- onfocus
- sfocato
Eventi della finestra:
- Onload
- Onerror
L'elenco di tutti gli eventi che si verificano in JavaScript è enorme; Discuteremo solo gli eventi più comuni e ampiamente usati.
Come utilizzare l'evento Click in JavaScript
IL al clic() Il gestore di eventi viene utilizzato per ascoltare gli eventi clicca su una pagina web. Ogni volta che l'utente fa clic su un elemento HTML su una pagina Web, è rispettivo al clic() Il gestore di eventi è attivato.
Ora diamo un'occhiata a un esempio per avere una chiara comprensione del gestore dell'evento click:
Abbiamo una pagina web con due pulsanti i.e. Pulsante 1 e pulsante 2:
Se facciamo clic su uno di questi pulsanti, il loro rispettivo al clic() Viene attivato il gestore di eventi che stampa un messaggio sulla console.
Come utilizzare l'evento Focus in JavaScript
IL onfocus () L'evento viene attivato quando un elemento ottiene o perde la concentrazione:
Ad esempio, nel frammento di codice indicato di seguito, il "Focusvent ()" Il metodo è chiamato sul file onfocus () evento nel ingresso etichetta:
Html
Digita qualcosa qui
JavaScript
functionfocusevent ()documento.getElementById ("input1").stile.background = "verde";
Come utilizzare l'evento keydown in javascript
IL onkeydown () L'evento viene attivato quando un tasto viene premuto dall'utente:
Ad esempio, nel seguente codice, il "KeyDoWorEvent ()" La funzione è chiamata sul file "Onkeydown" evento e il messaggio di avviso è mostrato nella definizione della funzione:
Html
Digita qualcosa qui
JavaScript
funzione keyDoDeEvent ()documento.getElementById ("input1");
avviso ("premuto un tasto");
Come utilizzare l'evento di caricamento in javascript
IL onload () L'evento viene attivato subito dopo il caricamento della pagina web correttamente.
Ad esempio, nel frammento di codice indicato di seguito, viene visualizzato un semplice messaggio di avviso sul onload () evento nel corpo etichetta:
Eventi JavaScript
Conclusione
Gli eventi sono molto importanti per rendere interattivo e reattivo qualsiasi pagina web. Un evento può essere avviato dal browser o dall'utente. Quando un utente interagisce con gli elementi HTML di una pagina Web, viene attivato un evento. JavaScript ci dà un'opzione per rispondere a questi trigger utilizzando i gestori di eventi. In questa guida pratica, abbiamo imparato a utilizzare i gestori di eventi per rispondere agli eventi e rendere le pagine Web più reattive.