Händelser är åtgärder eller händelser som händer i systemet. I programmeringsvärlden, händelser är något som händer med HTML-elementen. Men när används på HTML-sidor kan den reagera på dessa händelser. I den här artikeln kommer vi att se vilka olika typer av händelser i JavaScript och hur de fungerar, i följande ordning:
Vad är händelser i JavaScript?
Javascript har händelser som ger ett dynamiskt gränssnitt till en webbsida. Dessa händelser är kopplade till element i Dokumentobjektmodell (DOM).
Dessa händelser använder också som standard den bubblande spridningen, dvs uppåt i DOM från barn till förälder. Vi kan binda händelser antingen som inline eller i ett externt skript. Med hjälp av JavaScript kan du upptäcka när vissa händelser inträffar och få saker att inträffa som svar på dessa händelser.
Typer av händelser i JavaScript
Det finns olika typer av händelser i som används för att reagera på händelser. Här kommer vi att diskutera några av de berömda eller mest använda evenemangen som:
- Onclick
- Onkeyup
- Onmouseover
- Onload
- Onfocus
Så låt oss gå vidare och titta på dessa händelser i JavaScript med exempel.
Onclick-händelse
Onclick-händelsen är en mushändelse och framkallar all logik som definierats om användaren klickar på det element som den är bunden till. Låt oss ta ett exempel och se hur det fungerar:
function edu () {alert ('Välkommen till Edureka!')} Klicka på knappenProduktion:
Efter att ha klickat på knappen får du följande varningsmeddelande:
Onekeyup Event
Denna händelse är en tangentbordshändelse och används för att utföra instruktioner när en tangent släpps efter att ha tryckt. Följande exempel visar hur händelsen fungerar:
var a = 0 var b = 0 var c = 0 funktionsändringBackground () {var x = document.getElementById ('bg') bg.style.backgroundColor = 'rgb (' + a + ',' + b + ',' + c + ')' a + = 1 b + = a + 1 c + = b + 1 om (a> 255) a = a - b if (b> 255) b = a if (c> 255) c = b}Produktion:
När du har skrivit något ser det ut så här:
Onmouseover-händelse
Onmouseover-händelsen i JavaScript motsvarar att du håller muspekaren över elementet och dess barn, som det är bundet till. Exemplet visas nedan:
funktion hov () {var e = document.getElementById ('sväva') e.style.display = 'none'}Produktion:
Den färgade rutan visas innan musen svävar. Så snart du håller musen över rutan försvinner den.
Onload-händelse
Onload-händelsen framkallas när ett element laddas helt. Låt oss ta ett exempel och se hur det fungerar:
Produktion:
Onfocus-händelse
Onfocus-händelsen har en elementlista som utför instruktioner närhelst den får fokus. Följande exempel visar hur onfocus-händelsen fungerar:
funktion fokuserad () {var e = document.getElementById ('input') if (bekräfta ('Focus Event')) {e.blur ()}}Fokus i inmatningsrutan:
Produktion:
Dessa är några av de mest använda evenemangen i JavaScript. Med detta har vi kommit till slutet av vår artikel. Jag hoppas att du förstod vad som är händelser och hur de används.
hur man hittar datatyp i python
Kolla in vår som kommer med instruktörsledad liveutbildning och verklig projektupplevelse. Denna utbildning gör dig skicklig för att arbeta med back-end och front-end webbteknik. Det inkluderar utbildning om webbutveckling, jQuery, Angular, NodeJS, ExpressJS och MongoDB.
Har du en fråga till oss? Vänligen nämna det i kommentarsektionen på den här bloggen så återkommer vi till dig.