Cosa sono gli eventi in JavaScript e come vengono gestiti?

Gli eventi in JavaScript forniscono un'interfaccia dinamica a una pagina web. Questi eventi sono collegati agli elementi nel DOM (Document Object Model).

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 pulsante

Produzione:



Uscita 1 - eventi in javascript - edureka

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:

  edu-Logo 

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.