Welke soorten gebeurtenissen (evenementen) bestaan er?

Er zijn veel soorten gebeurtenissen, maar de meest voorkomende kunnen worden gegroepeerd in categorieën:

• Gebeurtenissen van de gebruikersinterface:

  • click: Klik op een element met de muis.
  • dblclick: Dubbelklik op een element met de muis.
  • mousedown: Muisknop ingedrukt (voor het loslaten).
  • mouseup: Muisknop losgelaten.
  • mousemove: Beweging van de muiscursor over een element.
  • mouseover: Muiscursor over een element.
  • mouseout: Muiscursor verlaat een element.
  • mouseenter: Muiscursor over een element (verspreidt niet van kindelementen).
  • mouseleave: Muiscursor verlaat een element (verspreidt niet van kindelementen).
  • contextmenu: Contextmenu oproepen met de rechtermuisknop.

• Toetsenbordgebeurtenissen:

  • keydown: Toets ingedrukt (voor het loslaten).
  • keyup: Toets losgelaten.
  • keypress: Toets ingedrukt en vastgehouden, genereert tekstantvoergegevens. (Verouderd, gebruik keydown en keyup aanbevolen).

• Formuliergebeurtenissen:

  • submit: Formulier verzenden.
  • change: Wijziging van de waarde van een formulieronderdeel (bijvoorbeeld <input>, <select>, <textarea>).
  • input: Wijziging van de waarde van een formulieronderdeel wanneer de inhoud interactief wordt gewijzigd.
  • focus: Het element krijgt focus.
  • blur: Het element verliest focus.
  • cut: Inhoud knippen.
  • copy: Inhoud kopiëren.
  • paste: Inhoud plakken.

• Laad- en foutgebeurtenissen:

  • load: Voltooiing van het laden van een bron (bijvoorbeeld afbeelding, script, pagina).
  • unload: De pagina verlaten.
  • beforeunload: Poging om de pagina te verlaten (toont een bevestigingsdialoog).
  • error: Er is een fout opgetreden bij het laden van een bron of het uitvoeren van een script.

• Focusgebeurtenissen (FocusEvent):

  • focusin: Het element of een van zijn kindelementen krijgt focus.
  • focusout: Het element of een van zijn kindelementen verliest focus.

• Scrollgebeurtenissen:

  • scroll: Een element wordt gescrold.

• Touchgebeurtenissen (voor touch-apparaten):

  • touchstart: Vinger raakt het scherm aan.
  • touchend: Vinger wordt van het scherm gehaald.
  • touchmove: Vinger beweegt over het scherm.
  • touchcancel: Touch-gebeurtenis onderbroken (bijvoorbeeld door oproep van het systeemmenu).

• Drag and Drop-gebeurtenissen:

  • dragstart: Begin van slepen.
  • drag: Het element wordt gesleept.
  • dragend: Einde van slepen.
  • dragenter: Het element is over een geldige dropzone gesleept.
  • dragleave: Het element is uit een geldige dropzone gesleept.
  • dragover: Het element is over een geldige dropzone gesleept (vereist het standaardgedrag te annuleren om het loslaten toe te staan).
  • drop: Het element is op een geldige dropzone losgelaten.

• Browsergeschiedenisgebeurtenissen:

  • popstate: Wijziging in de actieve geschiedenisrecord bij navigatie (bijvoorbeeld op de "Vorige/Volgende" knop klikken).

• Venstergrootte wijzigingsgebeurtenissen:

  • resize: De grootte van het browservenster wordt gewijzigd.

Dit is geen volledige lijst, maar het behandelt de meest voorkomende en belangrijke gebeurtenistypen in webontwikkeling. Het begrijpen van hun doel en gedrag is essentieel voor het maken van interactieve webapplicaties.