Gli eventi sono azioni o eventi che si verificano nel sistema. Nel mondo della programmazione, gli eventi sono qualcosa che accade agli elementi HTML. Ma quando viene utilizzato nelle pagine HTML, può reagire a questi eventi. In questo articolo vedremo quali sono i diversi tipi di eventi in JavaScript e come funzionano, nella seguente sequenza:
Cosa sono gli eventi in JavaScript?
Javascript ha eventi che forniscono un'interfaccia dinamica a una pagina web. Questi eventi sono collegati a elementi in Document Object Model (GIUDIZIO).
Inoltre, questi eventi utilizzano per impostazione predefinita la propagazione del bubbling, ovvero verso l'alto nel DOM da figli a genitore. Possiamo associare gli eventi come inline o in uno script esterno. Con l'aiuto di JavaScript, puoi rilevare quando si verificano determinati eventi e causare il verificarsi di cose in risposta a tali eventi.
Tipi di eventi in JavaScript
Esistono diversi tipi di eventi in che vengono utilizzati per reagire agli eventi. Qui discuteremo alcuni degli eventi famosi o più comunemente usati come:
- Al clic
- Onkeyup
- Onmouseover
- Onload
- Onfocus
Quindi andiamo avanti e diamo un'occhiata a questi eventi in JavaScript con l'esempio.
Evento al clic
L'evento Onclick è un evento del mouse e provoca qualsiasi logica definita se l'utente fa clic sull'elemento a cui è associato. Facciamo un esempio e vediamo come funziona:
function edu () {alert ('Welcome to Edureka!')} Fare clic sul pulsanteProduzione:
Dopo aver fatto clic sul pulsante, viene visualizzato il seguente messaggio di avviso:
Evento Onekeyup
Questo evento è un evento della tastiera e viene utilizzato per eseguire le istruzioni ogni volta che un tasto viene rilasciato dopo averlo premuto. L'esempio seguente mostra il funzionamento dell'evento:
var a = 0 var b = 0 var c = 0 funzione changeBackground () {var x = document.getElementById ('bg') bg.style.backgroundColor = 'rgb (' + a + ',' + b + ',' + c + ')' a + = 1 b + = a + 1 c + = b + 1 se (a> 255) a = a - b se (b> 255) b = a se (c> 255) c = b}Produzione:
Dopo aver scritto qualcosa, assomiglia a questo:
Evento Onmouseover
L'evento onmouseover in JavaScript corrisponde al passaggio del puntatore del mouse sull'elemento e sui suoi figli, a cui è associato. L'esempio è mostrato di seguito:
function hov () {var e = document.getElementById ('hover') e.style.display = 'none'}Produzione:
La casella colorata appare prima di posizionare il mouse. Non appena si passa il mouse sulla casella, scompare.
cosa sono gli spazi dei nomi in c ++
Evento di caricamento
L'evento onload viene evocato quando un elemento viene caricato completamente. Facciamo un esempio e vediamo come funziona:
Produzione:
Evento Onfocus
L'evento Onfocus ha un elenco di elementi che esegue le istruzioni ogni volta che riceve il focus. L'esempio seguente mostra come funziona l'evento onfocus:
funzione focalizzata () {var e = document.getElementById ('input') if (confirm ('Focus Event')) {e.blur ()}}Focus nella casella di input:
Produzione:
Questi sono alcuni degli eventi utilizzati più di frequente in JavaScript. Con questo, siamo giunti alla fine del nostro articolo. Spero tu abbia capito cosa sono gli eventi e come vengono utilizzati.
Dai un'occhiata al nostro che viene fornito con formazione dal vivo con istruttore e esperienza di progetto nella vita reale. Questa formazione ti consente di acquisire competenze per lavorare con tecnologie web back-end e front-end. Include formazione su sviluppo Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.
Hai domande per noi? Per favore menzionalo nella sezione commenti di questo blog e ti risponderemo.