Gebeurtenissen zijn acties of gebeurtenissen die plaatsvinden in het systeem. In de wereld van programmeren, gebeurtenissen zijn iets dat gebeurt met de HTML-elementen. Maar wanneer wordt gebruikt in HTML-pagina's, kan het op deze gebeurtenissen reageren. In dit artikel zullen we zien wat de verschillende soorten gebeurtenissen in JavaScript zijn en hoe ze werken, in de volgende volgorde:
Wat zijn gebeurtenissen in JavaScript?
Javascript heeft gebeurtenissen die een dynamische interface naar een webpagina bieden. Deze evenementen zijn verbonden met elementen in de Document Object Model (ARREST).
Ook gebruiken deze gebeurtenissen standaard de bubbling-propagatie, d.w.z. omhoog in de DOM van kinderen naar ouder. We kunnen gebeurtenissen binden als inline of in een extern script. Met behulp van JavaScript kunt u detecteren wanneer bepaalde gebeurtenissen plaatsvinden, en ervoor zorgen dat er dingen gebeuren als reactie op die gebeurtenissen.
Soorten evenementen in JavaScript
Er zijn verschillende soorten evenementen in die worden gebruikt om te reageren op gebeurtenissen. Hier zullen we enkele van de beroemde of meest gebruikte evenementen bespreken, zoals:
- Bij klikken
- Onkeyup
- Onmuisover
- Onload
- Onfocus
Laten we dus verder gaan en deze gebeurtenissen met een voorbeeld in JavaScript bekijken.
Klik op Evenement
De Onclick-gebeurtenis is een muisgebeurtenis en lokt elke gedefinieerde logica uit als de gebruiker klikt op het element waaraan het is gebonden. Laten we een voorbeeld nemen en kijken hoe het werkt:
function edu () {alert ('Welkom bij Edureka!')} Klik op de knopUitgang:
Nadat u op de knop hebt geklikt, krijgt u het volgende waarschuwingsbericht:
hoe je een set maakt
Onekeyup-evenement
Deze gebeurtenis is een toetsenbordgebeurtenis en wordt gebruikt om instructies uit te voeren wanneer een toets wordt losgelaten na het indrukken. Het volgende voorbeeld toont de werking van het evenement:
var a = 0 var b = 0 var c = 0 functie changeBackground () {var x = document.getElementById ('bg') bg.style.backgroundColor = 'rgb (' + a + ',' + b + ',' + c + ')' a + = 1 b + = a + 1 c + = b + 1 if (a> 255) a = a - b if (b> 255) b = a if (c> 255) c = b}Uitgang:
Nadat je iets hebt geschreven, ziet het er als volgt uit:
Onmouseover-evenement
De gebeurtenis onmouseover in JavaScript komt overeen met het bewegen van de muisaanwijzer over het element en de onderliggende elementen waaraan het is gebonden. Het voorbeeld is hieronder weergegeven:
functie hov () {var e = document.getElementById ('hover') e.style.display = 'none'}Uitgang:
Het gekleurde vak verschijnt voordat de muis beweegt. Zodra je de muis over het vak beweegt, verdwijnt deze.
Onload-gebeurtenis
De onload-gebeurtenis wordt opgeroepen wanneer een element volledig wordt geladen. Laten we een voorbeeld nemen en kijken hoe het werkt:
Uitgang:
Onfocus-evenement
De Onfocus-gebeurtenis heeft een elementlijst die instructies uitvoert wanneer deze focus ontvangt. Het volgende voorbeeld laat zien hoe de onfocus-gebeurtenis werkt:
functie gericht () {var e = document.getElementById ('input') if (confirm ('Focus Event')) {e.blur ()}}Focus in het invoervak:
Uitgang:
Dit zijn enkele van de meest gebruikte gebeurtenissen in JavaScript. Hiermee zijn we aan het einde van ons artikel gekomen. Ik hoop dat je hebt begrepen wat evenementen zijn en hoe ze worden gebruikt.
Bekijk onze die wordt geleverd met live training onder leiding van een instructeur en real-life projectervaring. Deze training maakt je bedreven in vaardigheden om te werken met back-end en front-end webtechnologieën. Het omvat training over webontwikkeling, jQuery, Angular, NodeJS, ExpressJS en MongoDB.
Heeft u een vraag voor ons? Vermeld het in het opmerkingengedeelte van deze blog en we nemen zo snel mogelijk contact met je op.