Què són els esdeveniments a JavaScript i com es gestionen?



Els esdeveniments en JavaScript proporcionen una interfície dinàmica a una pàgina web. Aquests esdeveniments estan connectats a elements del Document Object Model (DOM).

Els esdeveniments són accions o ocurrències que tenen lloc al sistema. En el món de la programació, els esdeveniments són alguna cosa que els passa als elements HTML. Però quan s’utilitza a les pàgines HTML, pot reaccionar davant d’aquests esdeveniments. En aquest article, veurem quins són els diferents tipus d’esdeveniments a JavaScript i com funcionen, en la següent seqüència:

Què són els esdeveniments a JavaScript?

Javascript té esdeveniments que proporcionen una interfície dinàmica a una pàgina web. Aquests esdeveniments estan connectats a elements del fitxer Model d'objectes de documents (JUDICI).





A més, aquests esdeveniments utilitzen per defecte la propagació de bombolles, és a dir, cap amunt al DOM, des dels fills fins als pares. Podem vincular esdeveniments tant en línia com en un script extern. Amb l'ajuda de JavaScript, podeu detectar quan passen certs esdeveniments i fer que es produeixin coses com a resposta a aquests esdeveniments.

Tipus d'esdeveniments a JavaScript

Hi ha diferents tipus d'esdeveniments a que s’utilitzen per reaccionar als esdeveniments. Aquí tractarem alguns dels esdeveniments més famosos o més utilitzats, com ara:



  • Onclick
  • Onkeyup
  • Onmouseover
  • En càrrega
  • Enfocament

Així que anem a continuar i fem un cop d'ull a aquests esdeveniments a JavaScript amb un exemple.

Esdeveniment Onclick

L'esdeveniment Onclick és un esdeveniment del ratolí i provoca qualsevol lògica definida si l'usuari fa clic a l'element al qual està vinculat. Prenem un exemple i vegem com funciona:

function edu () {alert ('Benvingut a Edureka!')} Feu clic al botó

Sortida:



Sortida 1: esdeveniments a javascript - edureka

Després de fer clic al botó, rebreu el següent missatge d'alerta:

Esdeveniment Onekeyup

Aquest esdeveniment és un esdeveniment de teclat i s’utilitza per executar instruccions cada vegada que es deixa anar una tecla després de prémer. L'exemple següent mostra el funcionament de l'esdeveniment:

com utilitzar el paquet a Java
var a = 0 var b = 0 var c = 0 funció changeBackground () {var x = document.getElementById ('bg') bg.style.backgroundColor = 'rgb (' + a + ',' + b + ',' + c + ')' a + = 1 b + = a + 1 c + = b + 1 si (a> 255) a = a - b si (b> 255) b = a si (c> 255) c = b}

Sortida:

Després d’escriure alguna cosa, es veu així:

Esdeveniment Onmouseover

L'esdeveniment onmouseover a JavaScript correspon a passar el punter del ratolí sobre l'element i els seus fills, als quals està vinculat. A continuació es mostra l'exemple:

function hov () {var e = document.getElementById ('hover') e.style.display = 'none'}

Sortida:

Apareix el quadre de color abans de passar el ratolí. Tan aviat com passeu el ratolí per sobre de la caixa, desapareix.

Esdeveniment Onload

L'esdeveniment de càrrega s'evoca quan un element es carrega completament. Prenem un exemple i vegem com funciona:

  edu-Logotip 

Sortida:

Esdeveniment Onfocus

L'esdeveniment Onfocus té un llistat d'elements que executa instruccions sempre que rep l'enfocament. L'exemple següent mostra com funciona l'esdeveniment onfocus:

funció enfocada () {var e = document.getElementById ('input') if (confirm ('Focus Event')) {e.blur ()}}

Enfocament al quadre d'entrada:

Sortida:

Aquests són alguns dels esdeveniments més utilitzats a JavaScript. Amb això, hem arribat al final del nostre article. Espero que hagueu entès què són els esdeveniments i com s’utilitzen.

Consulteu el nostre que inclou formació en viu dirigida per un instructor i experiència en projectes reals. Aquesta formació us permet dominar les habilitats necessàries per treballar amb tecnologies web front-end i front-end. Inclou formació sobre desenvolupament web, jQuery, Angular, NodeJS, ExpressJS i MongoDB.

Tens alguna pregunta? Si us plau, mencioneu-ho a la secció de comentaris d’aquest bloc i us respondrem.