Change language
Python.Engineering Wiki Javascript-gebeurtenisluisteraar

Javascript-gebeurtenisluisteraar

__main__ Python module | ast Python module | code Python module | COM PHP module | dis Python module | Ev PHP module | Event PHP module | exp | html Python module | http Python module | iat | io Python module | JavaScript | os Python module | PS PHP module | Python functions | re Python module | site Python module | SPL PHP module | StackOverflow | stat Python module | struct Python module | test Python module | time Python module | types Python module | UI PHP module
Michael Zippo Michael Zippo

Het toevoegen van interactieve functies aan een website is waar JavaScript uitblinkt. Hoewel HTML en CSS respectievelijk worden gebruikt om de structuur en stijlen van een webpagina te definiëren, kunt u JavaScript gebruiken om uw site dynamischer te maken.

In JavaScript worden gebeurtenissen gebruikt om een interactieve site te maken . In deze handleiding zullen we het hebben over JavaScript-gebeurtenissen. We zullen onderzoeken waar evenementen kunnen worden gebruikt, hoe een evenement kan worden gedefinieerd en hoe een evenement kan worden opgeroepen. Daar gaan we!

Wat is een JavaScript-gebeurtenis?

Gebeurtenissen kunnen worden geactiveerd door de browser of door de gebruiker en kunnen de status van de webpagina wijzigen. Wanneer u op een knop op een webpagina klikt, wordt een JavaScript-gebeurtenis gemaakt. Wanneer u op een uitvouwend vervolgkeuzemenu klikt, wordt een JavaScript-gebeurtenis gebruikt.

JavaScript-gebeurtenissen hebben een breed scala aan toepassingen, waaronder:

  • Controleren of een formulier is ingevuld
  • Een gebruiker naar een andere pagina verplaatsen na het invullen van een formulier
  • Vervolgkeuzemenu`s interactief maken
  • Een gebruiker toestaan om in- en uitzoomen op afbeeldingen

Als u met gebeurtenissen in JavaScript wilt werken, moet u twee concepten kennen: gebeurtenishandlers en gebeurtenislisteners.

Een gebeurtenishandler is een functie die wordt uitgevoerd wanneer een gebeurtenis op een webpagina wordt geactiveerd. Event-listeners koppelen een event-functie aan een HTML-element, dus wanneer die functie wordt uitgevoerd, wordt het webelement gewijzigd.

Event-handlers kunnen op drie manieren worden gedefinieerd: met behulp van een inline event-handler, een gebeurtenis, of een gebeurtenislistener.

Online gebeurtenishandlers

De gemakkelijkste manier om met gebeurtenissen in JavaScript aan de slag te gaan, is door een online gebeurtenishandler te gebruiken. Dit betekent dat je je event definieert in je HTML-bestand.

Stel voor dit voorbeeld dat we het ontwerpen van een website voor een bakkerij genaamd JJ Smith`s Bakery. We willen dat een gebruiker wordt gevraagd om de tekst "Reactie ontvangen ‚" in te voeren bij het indienen van een formulier.

Houd rekening met de volgende code:

Deze code geeft een webpagina weer die er als volgt uitziet:

YhBM86zXeUH6CVstZ3cqjSfPpNHrDi1FRgWXFZMeCKNiTylMsE3TAEvgnvBLnl1zf30hlI6DcqWpXeFiL8YiojTKYJQeJ7 ESoQz4KhfCYhqlT9JmsxZZXRVj0EKBL9jbEaCs4Oe

Tot nu toe, niet veel -.. iets dat gebeurt Onze web pagina bevat een knop die iets moet doen wanneer onze knop wordt geklikt Wanneer we op onze knop, gebeurt er niets. Dit komt omdat we onze gebeurtenishandler nog moeten schrijven.

Plak de volgende code in het main.js-bestand:

Deze code vindt het element met de id " ingediend " en verandert de inhoud in " Formulier ingediend." " Deze code wordt alleen uitgevoerd wanneer ons submitForm () is genaamd. Dit is zo geprogrammeerd dat het gebeurt wanneer de gebruiker op onze knop klikt.

Als we op onze knop klikken, gebeurt het volgende:

Zoals u kunt zien, is onze boodschap komt naar voren. We gebruikten een online eventmanager om onze webpagina interactief te maken. Maar inline gebeurtenishandlers zijn niet de enige manier om gebeurtenissen in JavaScript te gebruiken. Laten we eens kijken hoe we de gebeurtenis-handlereigenschap in onze code kunnen gebruiken.

Evenementen met handler-eigenschappen

In een inline-handler moet u de functie specificeren die u wilt uitvoeren in uw HTML-bestand . In onze HTML-code van eerder hebben we op deze regel de functie gedefinieerd die we wilden aanroepen toen onze knop werd ingedrukt:

Met behulp van de eigenschappen van de handler kunnen we de opdracht verwijderen uit de "onclick" -gebeurtenis van onze code. Dit stelt ons in staat om al het JavaScript dat onze webpagina interactief maakt naar zijn eigen bestand te verplaatsen. Voor dit voorbeeld gaan we onze knop de "knop"-ID geven, zodat we onze knop in de JavaScript-code kunnen identificeren. We verwijderen de onclick-gebeurtenis en kennen een identifier toe aan onze knop:

Om onze gebeurtenis te activeren wanneer de knop wordt ingedrukt, schrijven we een gebeurtenis met een handler-eigenschap in onze "main". js " . Dit is de code die we zullen gebruiken:

Wanneer u start deze code en klik op de knop, het volgende bericht wordt geretourneerd:

4o62 FifBmuVWJDrNanvSaMu6tbum7kfLhkIyJ75xZ3Xt CsRgZsCf8qnj13uN1VyaoDaapwFE4pG BMvjQUHsAa1jLlGtRVPbnmOLDmzr98tzw38e18YY8 Hcaym YGeDzjzFwo

onze knop werkt net zoals voorheen, maar onze code is op een andere manier geschreven. In plaats van onze event-handlers inline te schrijven, hebben we ze naar ons main.js-bestand verplaatst. Dit helpt ons om beter beheersbare code te schrijven, omdat we niet al onze HTML-code hoeven te lezen om te weten waar onze inline-events worden geactiveerd.

Event Listener

Evenementen kunnen worden gebruikt om een gebeurtenis declareren in JavaScript. controleer altijd wanneer de status van een i-element wordt gewijzigd, en als dat element wordt gewijzigd, wordt de code in de listener uitgevoerd.

Bijvoorbeeld wanneer u op een knop klikt die is verbonden met een gebeurtenislistener, de luisteraar "hoort" dat een muisgebeurtenis is geactiveerd. Vervolgens wordt de code uitgevoerd die u aan die specifieke gebeurtenislistener hebt gekoppeld.

Onze HTML-code voor dit voorbeeld is hetzelfde als hierboven, maar we zullen een kleine wijziging aanbrengen in ons " hand. js " file:

In deze code laten we addEventListener gebruiken om een gebeurtenislistener te maken. Dit is in plaats van onze JavaScript-functie submitForm () te binden aan een onclick-gebeurtenis zoals we deden in onze twee laatste voorbeelden.

We specificeren "klik" om onze code te laten luisteren wanneer op onze knop wordt geklikt met de muisaanwijzer. Er zijn andere soorten gebeurtenissen naast klikgebeurtenissen, zoals toetsenbordgebeurtenissen, maar in deze tutorial zullen we ons concentreren op de muisklikgebeurtenis.

Laten we de code opnieuw uitvoeren en op de knop klikken.

De uitvoer is hetzelfde als we hebben gezien in onze laatste twee voorbeelden, maar deze keer gebruiken we een HTML-gebeurtenislistener. Gebeurtenislisteners zijn de nieuwste manier om gebeurtenissen in JavaScript te declareren en zijn misschien wel de meest gebruikte methode.

Conclusie

JavaScript-gebeurtenissen stellen u in staat uw webpagina interactief te maken. Een gebeurtenis kan worden geactiveerd wanneer u op een knop drukt, een formulier verzendt of over tekst beweegt. Er zijn drie manieren om een gebeurtenis in JavaScript aan te geven: inline, met behulp van een eigendom, of met behulp van een luisteraar.

U bent nu klaar om JavaScript-evenementen te gaan maken zoals een professionele webontwikkelaar!