JavaScript Events

HTML-gebeurtenissen zijn "gebeurtenissen" die plaatsvinden op HTML-elementen.

Wanneer JavaScript wordt gebruikt op een HTML-pagina, kan JavaScript deze gebeurtenissen "afhandelen".

HTML-gebeurtenissen

HTML-gebeurtenissen kunnen iets zijn dat de browser of de gebruiker doet.

Hier zijn enkele voorbeelden van HTML-gebeurtenissen:

  • Een HTML-webpagina is volledig geladen
  • Een HTML-inputveld wordt gewijzigd
  • Een HTML-knop wordt geklikt

Normaal gesproken willen gebruikers iets doen wanneer een gebeurtenis optreedt.

JavaScript laat u code uitvoeren wanneer een gebeurtenis wordt gedetecteerd.

Door JavaScript-code，HTML staat u toe om event-handlers toe te voegen aan HTML-elementen.

Gebruik enkele aanhalingstekens:

<element event='enkele JavaScript>

Gebruik dubbele aanhalingstekens:

<element event="enkele JavaScript">

In het volgende voorbeeld:onclick attributen (en code) worden toegevoegd aan <button> Element:

Voorbeeld

<button onclick='document.getElementById("demo").innerHTML=Date()'>Wat is de huidige tijd?</button>

Probeer het zelf uit

In het vorige voorbeeld veranderde de JavaScript-code de inhoud van het element met id="demo".

In de volgende voorbeeld, code (gebruikend this.innerHTML）veranderde de inhoud van zijn eigen element:

Voorbeeld

<button onclick="this.innerHTML=Date()">Wat is de huidige tijd?</button>

Probeer het zelf uit

JavaScript-code bevat vaak veel regels. Het is gebruikelijker om functies aan te roepen via event-attributen:

Voorbeeld

<button onclick="displayDate()">Wat is de huidige tijd?</button>

Probeer het zelf uit

Veelvoorkomende HTML-gebeurtenissen

Hier zijn enkele veelvoorkomende HTML-gebeurtenissen:

gebeurtenis beschrijving
onchange De HTML-element is veranderd
onclick De gebruiker klikt op een HTML-element
onmouseover De gebruiker verplaatst de muis naar een HTML-element
onmouseout De gebruiker verplaatst de muis van een HTML-element
onkeydown De gebruiker drukt op een toetsbalktoets
onload De browser heeft de pagina geladen

Een completer lijst:CodeW3C.com JavaScript referentiemanual HTML DOM evenementen.

Wat kan JavaScript doen?

Event handlers kunnen worden gebruikt om gebruikersinput, gebruikersacties en browseracties te verwerken:

  • Wat moet worden gedaan wanneer de pagina wordt geladen?
  • Wat moet worden gedaan wanneer de pagina wordt gesloten?
  • Wat moet worden uitgevoerd wanneer de gebruiker op een knop klikt?
  • Wat moet worden geverifieerd wanneer de gebruiker gegevens invoert?
  • enz.

Er zijn veel verschillende manieren om evenementen met JavaScript te verwerken:

  • HTML-evenement eigenschappen kunnen JavaScript-code uitvoeren.
  • HTML-evenement eigenschappen kunnen JavaScript-functies aanroepen.
  • Je kunt je eigen event handler toewijzen aan een HTML-element.
  • Je kunt voorkomen dat een evenement wordt verzonden of behandeld.
  • enz.

Je zult meer over evenementen en event handlers leren in het HTML DOM-kapitaal.