JavaScript-events en interactieve pagina's

Een pagina kan wachten totdat iemand iets doet. Een event meldt iets wat is gebeurd en een eventlistener is de functie die als reactie wordt aangeroepen. Door een listener te registreren stel je die reactie in; de actie wordt niet meteen uitgevoerd.

Voeg de functie toe aan het element

Selecteer een element dat al bestaat, kies de exacte naam van het event en geef een functie door:

const button = document.querySelector("#like");
let likes = 0;
button.addEventListener("click", function () {
  likes = likes + 1;
  button.textContent = "Likes: " + likes;
});

De selectie, het instellen van de variabele en de registratie worden uitgevoerd wanneer het script wordt uitgevoerd. Elke latere klik voert het functielichaam uit. Na drie klikken toont de knop “Likes: 3”. Door likes buiten de functie te houden blijft het totaal tussen klikken behouden; als je let likes = 0 binnen de functie zou zetten, zou de teller telkens opnieuw beginnen.

Geef een functiereferentie door, zoals showMenu, zonder haakjes. In button.addEventListener("click", showMenu()) roept JavaScript showMenu direct aan en geeft de retourwaarde door als listener. Om later een argument mee te geven, zet je de aanroep in een omhullende functie: button.addEventListener("click", () => showMenu("main"));.

Kies een event dat daadwerkelijk plaatsvindt

Namen zijn hoofdlettergevoelige strings zonder het voorvoegsel “on”. Gebruik "click", niet "Click" of "onclick". Een verzonnen naam wordt zonder foutmelding geaccepteerd, maar de browser zal die niet bij een klik laten afgaan. Veelvoorkomende families zijn pointerevents zoals pointerdown en pointerup, toetsenbordevents zoals keydown, formulierevents zoals input en submit, en focusevents zoals focusin. DOMContentLoaded heeft een eigen exacte schrijfwijze met hoofdletters.

Stel het juiste element op het juiste moment in

Een script in de head kan worden uitgevoerd voordat een knop bestaat. De selectie geeft dan null terug en een aanroep van addEventListener daarop veroorzaakt een fout. Laad een extern script met defer, plaats het na de opmaakcode of registreer de installatie bij het DOMContentLoaded-event van het document. Een element dat later wordt gemaakt, heeft na het maken installatie nodig of een listener op een voorouder.

querySelectorAll geeft een NodeList terug, niet één eventdoel. Registreer listeners op de elementen:

document.querySelectorAll(".tab").forEach((tab) => {
  tab.addEventListener("click", selectTab);
});

Laat listeners naast elkaar bestaan

Listeners met dezelfde capture-instelling worden uitgevoerd in de volgorde van registratie. Op het eventdoel worden opvanglisteners vóór andere listeners uitgevoerd. Als je hetzelfde functieobject opnieuw toevoegt met hetzelfde type en dezelfde capture-instelling, wordt geen tweede exemplaar toegevoegd.

De browser geeft een eventobject door aan je listener. De eigenschappen ervan verklaren het event dat deze specifieke aanroep veroorzaakte. Noem de parameter event of e; de parameternaam kies je zelf.

button.addEventListener("click", (event) => {
  console.log(event.type);
  console.log(event.currentTarget);
});

Dit schrijft "click" en de knop naar de console tijdens de aanroep van de listener. Door het hele object naar de console te schrijven kun je de andere eigenschappen ontdekken.

Onderscheid de oorsprong van de listener

Stel je een knop voor die een afbeelding bevat:

<button id="save" data-id="7">
  <img src="disk.svg" alt=""> Save
</button>

Een klik op de tekst “Save” maakt ook de knop tot doel. De tekst is onderdeel van de knop; die wordt geen afzonderlijk doelelement.

Dit verschil is belangrijk bij het uitlezen van gegevens. De afbeelding heeft niet de data-id van de knop, dus event.target.dataset.id is undefined bij een klik op de afbeelding. Een listener die direct aan de knop is gekoppeld, kan event.currentTarget.dataset.id uitlezen. Een listener op een grotere container kan de bedoelde knop vinden met event.target.closest("button") en controleren of er een overeenkomst is.

Lees de details van dit event

Elk event heeft een type, een target en een currentTarget. De booleaanse waarde bubbles geeft aan of het event weer omhoog via voorouders gaat. cancelable geeft aan of code de standaardactie mag annuleren en defaultPrevented houdt bij of die annulering heeft plaatsgevonden. timeStamp legt het tijdstip waarop het event is gemaakt vast in milliseconden ten opzichte van de tijdsoorsprong van de pagina.

Verschillende eventfamilies voegen nuttige details toe. Een moderne click levert een PointerEvent op, dat eigenschappen van muisevents overerft, zoals clientX, clientY en button. Een KeyboardEvent voegt key, code en vlaggen voor modificatietoetsen toe. Een input-listener kan event.target.value gebruiken om de nieuwe tekst van het veld uit te lezen.

Voor een galerijlistener kan event.target.tagName gelijk zijn aan "IMG" wanneer op een foto wordt geklikt, of aan "DIV" wanneer op de tussenruimte wordt geklikt. Handel het werkelijk gemelde geval af. Ga er niet van uit dat elk event binnen een container van hetzelfde soort kind komt.

Gebruik de waarde terwijl de listener wordt uitgevoerd

In een listener die een gewone functie is, is this gelijk aan event.currentTarget. Een pijlfunctie neemt this over uit de omringende code; die krijgt het element niet als this. event.currentTarget werkt bij beide functievormen.

Na de eventafhandeling wordt currentTarget teruggezet op null. Een console kan die latere waarde tonen wanneer je een eerder naar de console geschreven event uitklapt. Schrijf event.currentTarget direct binnen de listener naar de console om het element tijdens de aanroep te bekijken.

Een listener moet actief blijven zolang de bijbehorende functie die nodig heeft. Bewaar bij een tijdelijke toetsenbordinteractie de functiereferentie, zodat je de listener kunt verwijderen wanneer de interactie sluit.

Verwijder dezelfde functie

function onKey(event) {
  console.log(event.key);
}
document.addEventListener("keydown", onKey);
// When the feature closes:
document.removeEventListener("keydown", onKey);

Bij het verwijderen moeten het eventtype, het functieobject en de capture-instelling overeenkomen. Ook een anonieme functie kun je verwijderen wanneer de referentie is bewaard, zoals in const handler = () => save();. Als je een nieuwe () => save() schrijft in de aanroep om de listener te verwijderen, maak je een andere functie, ook al ziet de code er identiek uit.

Kies de registratieopties

Een eenmalige welkomstbanner kan { once: true } gebruiken. Een functie met meerdere listeners kan die één signaal geven:

const controller = new AbortController();
window.addEventListener("pointermove", moveCursor, {
  signal: controller.signal
});
window.addEventListener("keydown", onKey, {
  signal: controller.signal
});
// Close the feature:
controller.abort();

Door af te breken verwijder je beide registraties. Een afgebroken controller kan niet worden teruggezet; maak een nieuwe controller voor een nieuwe gebruiksperiode. Geef bij verwijdering met removeEventListener opnieuw capture: true door als dit bij de registratie is gebruikt. once, signal en passive maken geen deel uit van de vergelijking bij het verwijderen.

Een aanroep van preventDefault() door een passieve listener wordt genegeerd. Browsers maken bepaalde listeners die met scrollen te maken hebben op doelen op documentniveau vaak standaard passief, waaronder wheel, touchstart en touchmove; gebruik daar expliciet { passive: false } wanneer annulering nodig is.

Voorkom dat callbacks zich opstapelen

Als elke klik op “Start” een nieuwe anonieme listener aan het bord toevoegt, zorgt twee keer starten ervoor dat één klik op het bord twee callbacks uitvoert. Installeer de bordlistener één keer, gebruik hetzelfde functieobject opnieuw of breek de vorige groep af voordat je die vervangt. Verschillende once-callbacks kunnen zich nog steeds opstapelen voordat ze afgaan.

Als je een element loskoppelt, blijven de listeners behouden. Ze werken als het element opnieuw wordt ingevoegd en dispatchEvent() kan ze bereiken terwijl het is losgekoppeld. Het element komt in aanmerking voor automatische geheugenopruiming wanneer het en de listeners niet meer bereikbaar zijn. Een listener op window of document blijft gekoppeld totdat die expliciet wordt verwijderd.

Verstuur een eigen event

const event = new CustomEvent("cart:add", {
  detail: { id: 42 },
  bubbles: true
});
item.dispatchEvent(event);

Listeners lezen event.detail.id uit. Bij het versturen worden de listeners onmiddellijk aangeroepen, voordat de aanroep terugkeert. Met bubbles: true kunnen voorouders het event ook ontvangen. Een event dat met dispatchEvent() is verstuurd, heeft isTrusted gelijk aan false; events die door de browser worden verstuurd, kunnen vertrouwd zijn, ook wanneer een API zoals focus() ze heeft veroorzaakt.

Een klik binnen een knop kan ook door de voorouders van de knop worden ontvangen. Eventpropagatie is de route van het event door de documentboom. Als je die route volgt, begrijp je zowel nuttige gedeelde listeners als verrassende extra acties.

Volg drie fasen

1. Opvang: het event gaat vanaf window omlaag via de voorouders naar het doel.
2. Doel: listeners worden uitgevoerd op het element waar het event begon.
3. Opwaartse propagatie: een event dat opwaarts propageert, gaat via de voorouders terug omhoog naar window.

De eigenschap eventPhase geeft 1 voor opvang, 2 op het doel en 3 voor opwaartse propagatie. Een listener die zonder opties is geregistreerd, wordt uitgevoerd op het doel of op de weg omhoog. Een listener met { capture: true } wordt uitgevoerd op de weg omlaag, ook op het doel als de listener daar is geregistreerd.

Volg een concrete klik

<div id="outer">
  <div id="inner">
    <button>Go</button>
  </div>
</div>

Stel dat de knop en elke div gewone kliklisteners hebben die hun naam naar de console schrijven. Een klik op “Go” schrijft “button”, “inner” en daarna “outer”. Een klik op een leeg deel van inner schrijft “inner” en daarna “outer”; de knop ligt niet op het pad van dat event.

Voeg nu een opvanglistener toe aan outer. Een klik op de knop schrijft eerst “outer (capture)” en daarna “button”, “inner” en “outer” van de gewone listeners. De opvanglistener ziet de klik voordat de nakomelingen dat doen. Na outer kan het event doorgaan via body, html, document en window als daar listeners zijn geregistreerd.

Het is één event, geen nieuwe klik die op elke voorouder wordt gemaakt. target blijft de hele tijd de knop. currentTarget verandert terwijl elke listener wordt uitgevoerd. Ook in de buitenste listener wijst target nog steeds de oorspronkelijke knop aan.

Controleer welke events opwaarts propageren

De eigenschap bubbles van het event vertelt je of het een opwaartse fase heeft. Events zonder opwaartse propagatie kunnen nog steeds door een opvanglistener op een voorouder worden waargenomen. Kies focusin of focusout om focuswijzigingen via een gewone containerlistener af te handelen.

Verklaar een fout bij geneste acties

Een productkaart opent een detailweergave wanneer erop wordt geklikt. De knop “Verwijderen” verwijdert het product. Als je op die knop klikt, wordt eerst het product verwijderd, waarna het event de kaartlistener bereikt en de detailweergave opent. Het eventpad verklaart waarom beide callbacks worden uitgevoerd.

De kaart kan verwijderklikken negeren met if (event.target.closest(".remove")) return;. De knop kan ook de eventpropagatie stoppen. Als je bij de kaart filtert, blijft het event behouden voor andere voorouders die het mogelijk nodig hebben.

Een listener kan veranderen wat er na een event gebeurt of waar het event naartoe gaat. Dit zijn afzonderlijke beslissingen. Een event op een link kan opwaarts blijven propageren nadat de navigatie is geannuleerd.

Vervang een browseractie

Een standaardactie is gedrag dat de browser biedt: een link volgen, een formulier verzenden, een selectievakje aan- of uitvinken, tekst invoegen, scrollen met de spatiebalk of de focus verplaatsen met Tab. Gebruik preventDefault() wanneer je code die actie vervangt:

help.addEventListener("click", (event) => {
  event.preventDefault();
  openHelpPanel();
});

Bij een link naar /help opent dit het paneel zonder te navigeren. De link blijft naar de bestemming verwijzen wanneer JavaScript niet wordt uitgevoerd.

Alleen annuleerbare events ondersteunen annulering. Controleer event.cancelable; defaultPrevented legt vast of de annulering is gelukt. input vindt plaats nadat de waarde verandert en is niet annuleerbaar. Als je daar preventDefault() aanroept, wordt de ingevoegde tekst niet verwijderd. Een annuleerbaar beforeinput-event is de juiste plek om een bewerking te onderscheppen; door een relevant keydown-event te annuleren kun je het standaardeffect van die toets voorkomen.

Beheers de eventpropagatie afzonderlijk

Een link waarvan de listener alleen de eventpropagatie stopt, volgt nog steeds de URL. Als je alleen de navigatie annuleert, kan een kliklistener op het document het event nog steeds ontvangen. false teruggeven vanuit een addEventListener-callback doet geen van beide. Een eigenschap voor een eventhandler of een inline-handler kan de standaardactie annuleren door false terug te geven, maar ook dat stopt de eventpropagatie niet.

Houd gedeeld gedrag werkend

Een voorouder kan een menu sluiten of interacties tellen. Door de eventpropagatie te stoppen verberg je het event voor die code. Vaak kan de voorouder in plaats daarvan target of defaultPrevented controleren.

Een menu sluit bijvoorbeeld alleen wanneer een klik buiten zowel het menu als het openende bedieningselement valt:

document.addEventListener("click", (event) => {
  if (!menu.contains(event.target) &&
      !menuButton.contains(event.target)) {
    menu.hidden = true;
  }
});

contains() omvat het element zelf en de nakomelingen ervan. Het openende bedieningselement controleren is belangrijk, omdat de klik die het menu opent ook opwaarts naar het document propageert. Zonder die tweede controle zou het pas geopende menu direct sluiten.

Annuleer alleen een actie die je afhandelt

Controleer in een toetsenlistener de toets voordat je annuleert. Als je elke toets annuleert, blokkeer je gewoon typen en kun je voorkomen dat Tab de focus verplaatst. In een passieve listener wordt annulering helemaal genegeerd.

Bij eventdelegatie plaats je een listener op een blijvende voorouder en gebruik je de oorsprong van het event om een actie te kiezen. Dit is nuttig wanneer een lijst veel items heeft of wanneer code na de installatie nieuwe items maakt.

Vind het bedoelde bedieningselement

Een klik die opwaarts propageert, bereikt de lijst ongeacht op welke nakomeling is geklikt. Begin bij event.target, zoek het dichtstbijzijnde overeenkomende bedieningselement en wijs niet-relevante klikken af:

const list = document.querySelector("#todos");
list.addEventListener("click", (event) => {
  const button = event.target.closest(".remove");
  if (!button || !list.contains(button)) return;
  const item = button.closest("li");
  console.log("Removing item " + item.dataset.id);
  item.remove();
});

De lijst bevat items zoals <li data-id="7">Buy milk <button class="remove">Remove</button></li>. De listener hoort bij de lijst, dus een nieuw item met dezelfde opmaakcode werkt direct na het invoegen.

Volg een klik op een pictogram door de code. Het doel is het pictogram, closest(".remove") vindt de bijbehorende knop en button.closest("li") vindt het item. De data-id van het item identificeert het in de melding. Ten slotte verandert remove() de pagina.

Behoud beide controles

Als je alleen event.target.matches(".remove") controleert, mis je klikken op pictogrammen omdat het pictogram zelf niet overeenkomt. closest() controleert het doel en loopt via de voorouders omhoog. In een gedelegeerde listener is currentTarget de lijst; dat wordt niet de gevonden knop.

Stuur meerdere acties aan

Met data-attributen kan één werkbalklistener kiezen uit bekende acties:

const actions = { bold: makeBold, italic: makeItalic,
  clear: clearText };
toolbar.addEventListener("click", (event) => {
  const button = event.target.closest("button[data-action]");
  if (!button || !toolbar.contains(button)) return;
  const action = actions[button.dataset.action];
  if (typeof action === "function") action();
});

Een knop met data-action="clear" selecteert clearText. De functiecontrole handelt een onbekende actie af zonder te proberen undefined aan te roepen.

Kies een geschikt event

Delegatie werkt ook met andere opwaarts propagerende events dan klikken. Eén input-listener op een formulier kan event.target doorgeven aan een functie die velden controleert. Gebruik focusin of focusout om focuswijzigingen te delegeren; de gewone events focus en blur propageren niet opwaarts. Gebruik voor overgangen bij aanwijzen opwaarts propagerende over- en out-events wanneer delegatie nodig is.

Een stopPropagation() van een nakomeling kan voorkomen dat een event de container bereikt. Als een gedelegeerde listener niet actief lijkt, controleer dan het eventtype, het doel, de overeenkomst met de selector en of iets onder de container de doorgang heeft gestopt.

Toetsenbordinvoer gaat naar het element met focus, beschikbaar als document.activeElement, en propageert daarna opwaarts. Een documentlistener kan daardoor zowel toetsen uit velden als uit andere bedieningselementen ontvangen. Dat bereik maakt sneltoetsen nuttig, maar betekent ook dat ze het typen kunnen onderbreken.

Kies de eigenschap op basis van de betekenis

Op een AZERTY-toetsenbord levert de positie met de aanduiding Q op een Amerikaans toetsenbord key "a" en code "KeyQ" op. Gebruik key voor de betekenis, zoals Escape om te sluiten of een letter als sneltoets. Gebruik code voor vaste posities, zoals bewegingstoetsen in een spel. De key van de spatiebalk is één spatie, niet "Space".

keydown gaat af bij de eerste keer indrukken en kan worden herhaald zolang de toets wordt vastgehouden. Herhaalde aanroepen hebben event.repeat === true. keyup gaat af bij het loslaten. Gebruik keydown in plaats van het verouderde event keypress.

Handel een sneltoets nauwkeurig af

document.addEventListener("keydown", (event) => {
  if ((event.ctrlKey || event.metaKey) &&
      event.key.toLowerCase() === "s") {
    event.preventDefault();
    saveDraft();
  }
});

Dit handelt Ctrl+S en Command+S af. Door de waarde om te zetten naar kleine letters werkt ook "S". De annulering vervangt de browseractie voor het opslaan van de pagina alleen voor de overeenkomende sneltoets. Andere vlaggen voor modificatietoetsen zijn onder meer shiftKey en altKey.

Sla bij een sneltoets met één letter voor de hele pagina invoersituaties over voordat je de actie uitvoert:

if (event.target.matches("input, textarea, select") ||
    event.target.isContentEditable) return;
if (event.repeat) return;

De eerste controle beschermt tekstinvoer. De tweede laat een actie één keer per fysieke toetsaanslag uitvoeren. Annuleer Tab niet op de hele pagina; daarmee gaan toetsenbordgebruikers verder.

Luister naar tekst nadat die is gewijzigd

Voor een gewone toets die een zichtbaar teken invoert, is de volgorde keydown, beforeinput, input en daarna keyup. Als je value uitleest bij keydown, krijg je de waarde van vóór het invoegen van dat teken. Gebruik input voor een tekstvoorbeeld of tekenteller. Dit handelt ook bewerkingen af zoals plakken en dicteren, waarvoor geen overeenkomstige toetsaanslag nodig is.

Neem focuswijzigingen waar

focus en blur melden het krijgen en verliezen van focus zonder opwaartse propagatie. focusin en focusout propageren opwaarts, zodat een formulier de velden via één listener kan volgen. relatedTarget geeft het andere betrokken element aan, of null als er geen is.

password.addEventListener("focus", () => {
  hint.hidden = false;
});
password.addEventListener("blur", () => {
  hint.hidden = true;
});

De aanwijzing is beschikbaar wanneer het veld focus krijgt, ook via Tab. De aanroep element.focus() verplaatst de focus vanuit code; de volgende toetsenbordinvoer gaat dan naar dat element.

Iemand kan een muis, vinger, pen of toetsenbord gebruiken. Kies een event op basis van de interactie die je nodig hebt. click staat voor activering; pointerevents beschrijven indrukken, bewegen en loslaten.

Houd acties beschikbaar via het toetsenbord

Een ingebouwde knop laat click afgaan wanneer die met Enter of de spatiebalk wordt geactiveerd. Een link met focus doet dat bij Enter. Als je een actie alleen aan pointerdown of mousedown koppelt, mis je die activeringen via het toetsenbord. Gebruik click voor acties zoals het openen van een paneel; gebruik pointerdown wanneer de actie bij het indrukken moet beginnen, zoals bij slepen.

Een klik met een aanwijzer volgt op indrukken en loslaten. Wanneer die op verschillende elementen plaatsvinden, kan de klik hun dichtstbijzijnde gemeenschappelijke voorouder als doel hebben. dblclick volgt op twee snelle klikken; event.detail telt snelle opeenvolgende klikken. auxclick handelt klikken met een niet-primaire knop af. contextmenu kan voortkomen uit een klik met de secundaire knop, lang indrukken op een touchscreen of een menuopdracht via het toetsenbord.

Gebruik één familie van pointerevents

pointerdown, pointermove, pointerup en pointercancel werken voor muis, aanraking en pen. pointerType geeft het apparaat aan als "mouse", "touch" of "pen"; pointerId onderscheidt actieve aanwijzers, waaronder twee vingers.

Oudere families van muis- en aanrakingsevents bestaan nog steeds. Browsers kunnen na pointerevents muisevents voor compatibiliteit laten afgaan. Als je zowel pointerdown als mousedown voor dezelfde actie registreert, kan die daardoor twee keer worden uitgevoerd.

Kies coördinaten die bij de taak passen

Wanneer het document 300 px omlaag is gescrold en een klik 100 px onder de bovenkant van de viewport valt, is clientY gelijk aan 100 en pageY aan 400. Houd beide posities in hetzelfde coördinatenstelsel wanneer je een beweging berekent. Een veranderend genest doel kan ook de oorsprong van offsetcoördinaten veranderen.

button geeft aan welke knop bij een down- of up-event van toestand veranderde: 0 primair, 1 midden, 2 secundair. buttons geeft de combinatie aan die momenteel wordt ingedrukt: primair draagt 1 bij, secundair 2 en midden 4. Dus buttons === 3 betekent dat primair en secundair zijn ingedrukt; het betekent niet dat de middelste knop van toestand veranderde.

Kies gedrag bij aanwijzen voor een heel bedieningselement

Over- en out-events propageren opwaarts en kunnen afgaan wanneer de aanwijzer grenzen van kindelementen passeert. Enter- en leave-events propageren niet opwaarts en beschrijven het binnenkomen of verlaten van het hele element, inclusief de kinderen. Met pointerenter en pointerleave kan een tooltip flikkeren bij kindgrenzen voorkomen.

Gebruikers van touchscreens en toetsenborden gebruiken geen aanwijzen zonder aanraking. Bied essentiële informatie ook aan bij een klik of focus. Voor een visueel effect bij aanwijzen zonder extra gedrag is CSS :hover eenvoudiger dan een listener.

Voor slepen moet je gegevens over meerdere events heen onthouden. Sla de begincoördinaten van de aanwijzer en de beginpositie van het element op. Elke beweging past dan het verschil met dat beginpunt toe, zodat het element niet verspringt om de hoek onder de aanwijzer te plaatsen.

Bereken de verplaatsing

Een vak begint op left: 100px; top: 50px. De aanwijzer begint op viewportcoördinaten 220, 140 en beweegt naar 260, 125. De horizontale verandering is 40 px; de verticale verandering is −15 px. Als je die veranderingen bij de beginpositie van het vak optelt, krijg je left: 140px; top: 35px.

Gebruik voor beide metingen van de aanwijzer dezelfde clientcoördinaten. De algemene berekening is de beginpositie van het element plus de verplaatsing van de aanwijzer. Tel niet telkens de volledige verplaatsing op bij de al bijgewerkte positie van het vak, want dan tel je eerdere beweging opnieuw mee.

Onthoud en leg één aanwijzer vast

Voor een absoluut gepositioneerd vak zonder marge binnen een relatief gepositioneerde container:

let start = null;
box.addEventListener("pointerdown", (event) => {
  if (start || event.button !== 0) return;
  start = { id: event.pointerId, x: event.clientX,
    y: event.clientY, left: box.offsetLeft,
    top: box.offsetTop };
  box.setPointerCapture(event.pointerId);
});
box.addEventListener("pointermove", (event) => {
  if (!start || event.pointerId !== start.id) return;
  box.style.left = start.left +
    (event.clientX - start.x) + "px";
  box.style.top = start.top +
    (event.clientY - start.y) + "px";
});
function endDrag(event) {
  if (start && event.pointerId === start.id) start = null;
}
box.addEventListener("pointerup", endDrag);
box.addEventListener("pointercancel", endDrag);

Het opgeslagen ID wijst beweging en loslaten van een tweede aanwijzer af. offsetLeft en offsetTop geven beginposities als getallen; stijlen hebben het achtervoegsel "px" nodig.

Door de aanwijzer vast te leggen blijven volgende events voor die aanwijzer naar het vak gaan, ook wanneer de aanwijzer buiten het vak beweegt. De browser beëindigt de vastlegging nadat de aanwijzer is losgelaten of de actie is geannuleerd. releasePointerCapture(id) kan die eerder beëindigen.

Handel af dat de browser de controle overneemt

Een aanraakgebaar kan scrollen of zoomen van de pagina worden en zo pointercancel veroorzaken. Beëindig de sleepactie daar net als bij pointerup; anders kan achtergebleven toestand het vak later blijven bewegen. Pas vóór de interactie touch-action: none toe op het sleepgebied om het gebaar daarvoor te reserveren. Beperk dit tot dat gebied, zodat de rest van de pagina kan scrollen.

Gebruik user-select: none op het versleepbare oppervlak om tekstselectie te voorkomen. Stel draggable="false" in op de afbeeldingen ervan om het ingebouwde sleepgedrag voor afbeeldingen te voorkomen.

Bied een andere manier van verplaatsen

Bied toetsenbordbediening voor een bedieningselement met focus en verplaatsknoppen waarop je kunt klikken of tikken. Pijltjestoetsen alleen bieden geen alternatief met één aanwijzer voor slepen. WCAG 2.2-succescriterium 2.5.7 vereist zo'n alternatief, tenzij slepen essentieel is of het ongewijzigd browsergedrag betreft. Ingebouwde verplaatsknoppen kunnen zowel toetsenbordgebruikers als aanwijzergebruikers bedienen.

De afzonderlijke HTML Drag and Drop API gebruikt dragstart, dragover en drop om gegevens, zoals bestanden, over te dragen. De eventvolgorde verschilt van deze positiewijziging met een aanwijzer.

Formulierbedieningselementen bieden toegang tot verschillende soorten toestand. De value van een tekstveld is een string; de checked van een selectievakje is een booleaanse waarde. De juiste eigenschap uitlezen is de eerste stap naar betrouwbare berekeningen en voorbeelden.

Converteer getallen bewust

Zelfs <input type="number"> heeft een string als value. Bij de tekst "3" geeft het optellen van 1 de waarde "31". Number(input.value) + 1 geeft 4. Een getalveld biedt ook valueAsNumber.

Lege invoer vraagt om een aparte beslissing. Number("") geeft 0, waardoor een ontbrekende hoeveelheid op een echte nul kan lijken. Controleer eerst input.value === "", of gebruik valueAsNumber, dat NaN geeft voor een leeg getalveld. Controleer dat resultaat met Number.isNaN().

Lees de geselecteerde toestand uit

De value van een selectievakje is de ingestelde tekst voor verzending, of "on" als er geen is opgegeven. Die waarde vertelt je niet of het vakje is aangevinkt. Een keuzelijst geeft de waarde van de gekozen optie. Om het geselecteerde keuzerondje zelf te vinden, zoek je met input[name="size"]:checked.

Stem het event af op de bijwerking

input meldt bewerkingen door de gebruiker terwijl ze plaatsvinden, waaronder typen en plakken. change meldt een bevestigde keuze: nadat een gewijzigd tekstveld focus verliest, of direct wanneer een selectievakje, keuzerondje of keuzelijst wordt gewijzigd.

message.addEventListener("input", () => {
  counter.textContent = 280 - message.value.length +
    " characters left";
});

Na “Hello” zijn vijf tekens gebruikt en toont de teller “275 characters left”. Een keydown-listener zou worden uitgevoerd voordat het nieuwe teken in de waarde komt en zou plakken via een menu missen. Als je message.value vanuit code toewijst, gaat input noch change af; roep de functie voor het bijwerken dan ook rechtstreeks aan.

Verzamel de benoemde velden van een formulier

form.elements.email.value geeft toegang tot een bedieningselement via de naam of het ID. Gebruik form.elements["first-name"] voor een naam met een koppelteken. Verzending gebruikt namen: een ID alleen zorgt er niet voor dat een veld in de gegevens wordt opgenomen.

const data = new FormData(form);
const email = data.get("email");
const topics = data.getAll("topics");

FormData verzamelt de huidige naam-waardeparen die daarvoor in aanmerking komen. Niet-aangevinkte selectievakjes, uitgeschakelde bedieningselementen en velden zonder naam worden weggelaten. get() geeft de eerste waarde voor een naam terug; getAll() bewaart herhaalde waarden, zoals meerdere aangevinkte onderwerpen. Bestandsvelden kunnen bestandsobjecten opleveren; gewone tekstvelden leveren strings.

Object.fromEntries(data) is handig voor afzonderlijke namen, maar bewaart bij herhaalde namen alleen het laatste paar. Kies getAll() wanneer elke selectie van belang is. Omdat input opwaarts propageert, kan één formulierlistener event.target uitlezen om het gewijzigde veld bij te werken.

Verzending hoort bij het formulier. Luister naar het submit-event om een klik op een verzendknop, Enter in een veld met één regel en een requestSubmit() vanuit een script via één route af te handelen.

Vervang navigatie door een paginabijwerking

Normaal verstuurt een formulier gegevens naar de URL in action en laadt het antwoord. Zonder action is de bestemming de huidige pagina. De standaardmethode GET plaatst de gegevens in de URL. Om de huidige pagina met JavaScript bij te werken, annuleer je die standaardactie:

const form = document.querySelector("#new-todo");
form.addEventListener("submit", (event) => {
  event.preventDefault();
  const data = new FormData(form);
  const title = data.get("title").trim();
  if (title === "") return;
  addTodo(title);
  form.reset();
});

Dit formulier heeft een ingeschakeld tekstveld met de naam title. De listener verwijdert spaties aan de uiteinden, negeert een leeg resultaat, voegt een item toe en zet velden terug op hun beginwaarden. reset() betekent niet altijd leegmaken; een bedieningselement met een beginwaarde krijgt die waarde weer terug.

Als het item even verschijnt en verdwijnt wanneer de pagina opnieuw wordt geladen, controleer dan of preventDefault() ontbreekt. Alleen een kliklistener op een knop is niet de juiste plek om een formulier af te handelen, vooral niet wanneer het formulier ook via een andere route wordt verzonden.

Weet wat verzending in gang zet

Impliciete verzending met Enter kan op de ingeschakelde standaardverzendknop klikken. Enter in een tekstgebied voegt een nieuwe regel in. Een knop binnen een formulier is standaard een verzendknop als het type wordt weggelaten, dus een knop “Wachtwoord tonen” moet expliciet type="button" gebruiken.

Bij meerdere verzendknoppen geeft event.submitter aan welke is gebruikt. De waarde kan null zijn bij routes zonder specifieke knop, dus code moet dit controleren voordat die de waarde uitleest:

const button = event.submitter;
const intent = button ? button.value : "save";
const data = button ? new FormData(form, button) :
  new FormData(form);

Een benoemde verzendknop zoals name="intent" value="publish" draagt dat paar bij wanneer die aan FormData wordt doorgegeven. Een aanroep van alleen FormData(form) bevat het naam-waardepaar van een verzendknop niet.

Behoud de validatieroute

Ingebouwde validatie wordt uitgevoerd vóór het submit-event. Als een leeg verplicht veld niet aan de regels voldoet, meldt de browser het probleem en verstuurt die submit niet. Een eigen controle die alleen binnen die listener staat, wordt bij deze mislukte poging niet uitgevoerd. novalidate op het formulier schakelt de automatische validatiestap uit.

Gebruik requestSubmit() wanneer code de normale route via validatie en het submit-event nodig heeft. De methode vraagt verzending aan zonder een klik op een knop te versturen. Geef een specifieke verzendknop door aan requestSubmit(button) wanneer de verzendinstellingen van die knop moeten gelden.

HTML kan veel invoerregels beschrijven zonder een eigen JavaScript-controle. De browser controleert die regels tijdens verzending en stelt de resultaten beschikbaar aan je code. Begin met de invoerregels die passen bij de gegevens die je nodig hebt.

Kies een invoerregel

Bij pattern="[0-9]{5}" wordt “12345” goedgekeurd; “1234”, “123456” en “12345a” worden afgekeurd. Het patroon omvat de hele waarde, niet een willekeurig overeenkomend deel ervan. Lege invoer slaat de patrooncontrole over, dus voeg required toe wanneer weglaten niet is toegestaan.

E-mailvalidatie controleert de syntaxis, niet of een inbox bestaat. Zowel “ann@example.com” als “ann@example” voldoet aan de e-mailregel van de browser, terwijl “ann.example.com” daar niet aan voldoet. Een aanvullend patroon kan een specifiekere vorm vereisen wanneer de applicatie dat nodig heeft.

Lees de reden van afkeuring uit

Het validity-object van een veld bevat booleaanse vlaggen. valueMissing, typeMismatch, patternMismatch, tooShort en tooLong beschrijven ontbrekende of onjuist gevormde tekst. rangeUnderflow, rangeOverflow en stepMismatch beschrijven numerieke invoerregels. badInput betreft invoer die de browser niet kan omzetten in een bruikbare waarde, en customError legt een eigen geldigheidsmelding vast. valid is waar wanneer aan alle invoerregels is voldaan.

Bij een getalveld met min="0" max="10" step="2" ligt 12 boven het maximum, past 7 niet bij de toegestane stapgrootte en wordt 6 goedgekeurd. Meer dan één vlag kan waar zijn; ga er niet van uit dat elk ongeldig veld precies één probleem heeft.

Controleer zonder melding of meld zichtbaar

checkValidity() geeft een booleaanse waarde terug en laat invalid afgaan op ongeldige bedieningselementen zonder de browsermelding te tonen. reportValidity() controleert en meldt het probleem ook aan de gebruiker. Roep een van beide aan op een veld of formulier. validationMessage geeft de melding in de taal van de browser. Het invalid-event propageert niet opwaarts.

Regels voor tekstlengte gelden voor tekst die de gebruiker invoert. Door input.value = "ab" toe te wijzen in code wordt tooShort niet waar alleen omdat minlength gelijk is aan 3. maxlength voorkomt normaal ook dat de gebruiker voorbij de grens verder typt.

Toon fouten op een behulpzaam moment

:invalid is direct van toepassing, dus een onaangeraakt verplicht veld voldoet er al aan. :user-invalid wacht op interactie van de gebruiker of een verzendpoging en kan een vroeg rood veld voorkomen. Gebruik naast een visuele stijl ook tekst om de fout uit te leggen.

novalidate slaat automatische validatie bij verzending voor het formulier over; formnovalidate slaat die over voor één verzendknop. Ze verwijderen geen invoerregels en schakelen checkValidity() niet uit. Browsercontroles helpen gebruikers fouten te herstellen; de server moet ontvangen gegevens opnieuw valideren omdat een verzoek buiten de pagina om kan gaan.

Een regel waarbij twee velden betrokken zijn, heeft code nodig. Een bevestiging moet bijvoorbeeld overeenkomen met een wachtwoord, of een einddatum moet na een begindatum komen. Houd de regel gescheiden van hoe en wanneer de fout ervan wordt weergegeven.

Stel een eigen fout in en wis die

Een niet-lege string die aan setCustomValidity() wordt doorgegeven, markeert het veld als ongeldig en stelt customError in. Door "" door te geven wis je die eigen fout; het veld kan nog steeds niet voldoen aan required, pattern of andere invoerregels.

function checkMatch() {
  const matches = confirm.value === password.value;
  confirm.setCustomValidity(matches ? "" :
    "The passwords do not match.");
}
password.addEventListener("input", checkMatch);
confirm.addEventListener("input", checkMatch);

Controleer beide afhankelijkheden opnieuw. Als het eerste wachtwoord verandert, kan een eerder correcte bevestiging niet meer overeenkomen. Een melding die nooit wordt gewist, houdt het veld ongeldig nadat de gebruiker het verschil heeft hersteld. Voer ook de eerste controle uit wanneer velden met waarden kunnen beginnen.

Datumvelden leveren ISO-strings zoals "2026-03-10", ongeacht de weergegeven lokale datumnotatie. Niet-lege waarden uit deze velden kun je als tekst vergelijken. Als de regel zegt dat het einde na het begin moet komen, wijs dan end.value <= start.value af, inclusief gelijkheid. Handel ontbrekende datums af met required of een aparte controle op een lege waarde.

Leg de volgende nuttige actie uit

Een melding moet het probleem en de correctie benoemen. Zeg bij een ontbrekend e-mailadres: “Vul je e-mailadres in.” Zeg bij onjuist gevormde e-mailtekst: “Vul een e-mailadres in de vorm naam@example.com in.” Behoud de ingevoerde waarde zodat de gebruiker die kan bewerken.

Een verplicht naamveld accepteert spaties omdat ze een niet-lege string vormen. Controleer name.value.trim() === "" wanneer witruimte aan de uiteinden niet moet meetellen. Wis deze eigen fout wanneer betekenisvolle tekst verschijnt.

Koppel meldingen aan bedieningselementen

<label for="email">Email</label>
<input id="email" name="email" type="email"
  required aria-describedby="email-error">
<p id="email-error"></p>

Plaats de foutmelding in die paragraaf en stel aria-invalid="true" in zolang het veld een fout heeft. Wis de tekst en verwijder aria-invalid of zet die op "false" na correctie. aria-describedby koppelt de uitleg voor hulptechnologie aan het veld. Gebruik tekst; een rode rand alleen kan niet iedereen vertellen wat er mis is.

Kies de validatiestroom

Voeg voor volledig eigen meldingen novalidate toe en gebruik een submit-listener op het formulier. Werk eigen regels bij, controleer de geldigheid van de velden, schrijf hun meldingen en voorkom verzending als een veld ongeldig is. Verplaats de focus naar het eerste ongeldige veld of naar een gekoppeld foutenoverzicht. Als JavaScript ook een succesvolle verzending lokaal afhandelt, annuleer dan ook die standaardverzending.

Meld onvolledige e-mailtekst niet bij elke eerste toetsaanslag. Een bruikbare volgorde is fouten tonen na focusverlies of verzending en een al gemelde fout daarna opnieuw controleren bij input.

Een bedieningselement heeft meer nodig dan een reactie op een klik. Mensen moeten het kunnen vinden, bereiken en bedienen, het doel ervan begrijpen en zien waar de focus is. Ingebouwde HTML biedt veel van dit gedrag al.

Kies het element dat bij de taak past

Gebruik een <button> voor een actie, een <a href> voor navigatie en een formulierbedieningselement met een label voor invoer. <details> met <summary> biedt een uitklapcomponent. Geef deze elementen met CSS een stijl die bij de pagina past. Een knop met focus wordt met Enter of de spatiebalk geactiveerd zonder extra toetsenlistener.

Een div met een kliklistener heeft geen van de ingebouwde betekenis of het toetsenbordgedrag van de knop. Als je die role="button" geeft, verandert wat hulptechnologie meldt, maar wordt de div niet focusbaar en worden toetsaanslagen niet omgezet in klikken.

Houd de focusvolgorde voorspelbaar

tabindex="0" voegt een element toe aan de normale tabvolgorde volgens de documentvolgorde. tabindex="-1" staat focus vanuit code toe zonder een tabstop toe te voegen. Positieve waarden plaatsen elementen vóór de gebruikelijke volgorde en zijn moeilijk te onderhouden; vermijd ze.

Geen van beide instellingen voegt activeringsgedrag toe. Een focusbare eigen knop heeft nog steeds een listener nodig voor toetsenbordbediening. Een rol, een tabstop en een callback lossen verschillende delen van de interactie op.

Geef elk bedieningselement een naam

Een schermlezer gebruikt een toegankelijke naam om bedieningselementen te onderscheiden. Een tekstknop kan de zichtbare tekst gebruiken. Een tekstveld of keuzelijst heeft een gekoppeld label nodig, zoals <label for="email">Email</label> in combinatie met id="email". aria-labelledby kan verwijzen naar zichtbare tekst elders; aria-label kan een naam bieden wanneer er geen geschikte zichtbare tekst is.

Een sluitknop met alleen een pictogram kan <button type="button" aria-label="Close">×</button> zijn. De naam beschrijft de actie zodat de gebruiker niet hoeft af te leiden wat het symbool betekent.

Toon en handhaaf de status

Houd een focusindicator zichtbaar. Als je de standaardrand vervangt, zorg dan voor een duidelijke vervanging met :focus-visible, bijvoorbeeld outline: 3px solid #1a73e8. Als je de rand zonder vervanging verwijdert, verberg je de positie van de toetsenbordgebruiker.

Een uitgeschakelde ingebouwde knop verdwijnt uit de tabvolgorde en kan niet op de gewone manier worden geactiveerd. aria-disabled="true" geeft alleen aan dat het element niet beschikbaar is. De klik- en toetsenbordactie van een eigen bedieningselement moeten die status controleren en terugkeren zonder een actie uit te voeren. Door die controle in de activeringsfunctie onder te brengen, blijven beide invoerroutes consistent.

Een eigen bedieningselement moet hetzelfde resultaat geven, ongeacht hoe het wordt geactiveerd. Zet de actie in één functie, leid toetsenbord- en aanwijzerinvoer daarheen en werk de status bij die zowel voor de vormgeving als door hulptechnologie wordt uitgelezen.

Geef een eigen knop toetsenbordactivering

fakeButton.addEventListener("click", activate);
fakeButton.addEventListener("keydown", (event) => {
  if (event.key === "Enter" || event.key === " ") {
    event.preventDefault();
    activate();
  }
});

Dit is bedoeld voor een eigen focusbare knop. Door de spatiebalk te annuleren voorkom je dat de pagina tijdens de actie scrollt. Een ingebouwde knop produceert al klikken bij activering met het toetsenbord, dus als je daar een tweede toetsenbordroute aan toevoegt, kan de actie twee keer worden uitgevoerd.

Kies de status die bij het bedieningselement past

Een schakelknop “Dempen” behoudt dat label en verandert aria-pressed. Als het ontwerp het actielabel verandert in “Geluid aanzetten”, laat je aria-pressed weg. Een selectievakje gebruikt role="checkbox" en de spatiebalk om te schakelen; een schakelaar gebruikt role="switch" voor de aan- of uitstatus.

Attributen bevatten strings. Vergelijk getAttribute("aria-expanded") met "true", niet met de booleaanse waarde true:

detailsButton.addEventListener("click", () => {
  const open = detailsButton.getAttribute(
    "aria-expanded") === "true";
  detailsButton.setAttribute("aria-expanded", String(!open));
  panel.hidden = open;
});

Als open waar was, is de nieuwe status onwaar en wordt het paneel verborgen. aria-controls kan het paneel via een ID aangeven. De ingebouwde elementen <details> en <summary> bieden uitklapgedrag zonder dit script.

Gebruik het statusattribuut als bron voor de vormgeving, zoals [aria-pressed="true"], zodat de zichtbare en gemelde status tegelijk veranderen. Sluit pop-ups bij Escape en geef de focus terug aan het openende bedieningselement.

Geef een groep één tabstop

Bij tabbladen, werkbalken en groepen keuzerondjes gebruik je Tab om de groep in of uit te gaan en de pijltjestoetsen om binnen de groep te bewegen. Een verschuivend tabstoppunt houdt het huidige item op 0 en de andere items op -1. Zet bij een verplaatsing het oude item op -1, het nieuwe item op 0 en geef het nieuwe item focus.

Bij drie items ga je vanaf index 2 naar rechts met (2 + 1) % 3 terug naar 0. Naar links vanaf 0 gebruik je (0 - 1 + 3) % 3 om 2 te bereiken. Tel de lengte op vóór de restbewerking, omdat -1 % 3 in JavaScript gelijk is aan −1.

Controleer met het toetsenbord: ga naar het bedieningselement, zie de focus, activeer het met de juiste toetsen, beweeg binnen een groep en sluit een pop-up met Escape. Controleer bij elke wijziging de zichtbare status en de ARIA-status.

De focus bepaalt waar de volgende toetsenbordactie terechtkomt. Als het bedieningselement met focus verdwijnt, kan de gebruiker de plaats kwijtraken. Behandel focus als onderdeel van de paginabijwerking, vooral bij het openen van een dialoogvenster, het verwijderen van een item of het melden van een fout.

Open een dialoogvenster en keer terug naar het openende element

Onthoud het element met focus voordat je opent. Verplaats de focus naar de nieuwe interactie en herstel die bij het sluiten:

let opener;
openButton.addEventListener("click", () => {
  opener = document.activeElement;
  dialog.showModal();
});
dialog.addEventListener("close", () => {
  if (opener && opener.isConnected) opener.focus();
});

showModal() op een ingebouwd dialoogvenster verplaatst de focus naar binnen en maakt de rest van de pagina inactief, zodat je daar niet op kunt klikken of focus naartoe kunt verplaatsen zolang het modale venster open is. Escape veroorzaakt normaal een cancel-event, gevolgd door sluiting en een close-event. Een cancel-listener kan het sluiten voorkomen als de applicatie dat gedrag nodig heeft.

Kies een nuttige beginpositie voor de focus in het dialoogvenster, zoals het eerste relevante bedieningselement. Bij een eigen pop-up moet code de focus bewust verplaatsen. Als het oorspronkelijke openende element niet meer bestaat, kies dan een nuttig bedieningselement in de buurt in plaats van een losgekoppeld element focus te proberen geven.

Maak een nuttige bestemming focusbaar

Een kop of foutenoverzicht is normaal niet focusbaar. Geef het tabindex="-1" voordat je .focus() aanroept. Het kan dan bij een bewuste verplaatsing focus krijgen zonder een extra stop te worden tijdens de normale navigatie met Tab. Gebruik 0 alleen wanneer het element in die normale volgorde thuishoort.

Behoud de positie na verwijdering

Zoek voordat je een lijstitem verwijdert waarvan de verwijderknop focus heeft, de volgende nuttige bestemming. Geef de knop van het volgende item focus; gebruik de knop van het vorige item als er geen volgend item is. Als de lijst leeg wordt, geef je de kop ervan focus met tabindex="-1".

Door de bestemming vóór verwijdering te zoeken, voorkom je dat de relatie met naburige items verloren gaat. Stuur de focus niet na elke verwijdering naar de bovenkant van het document; de gebruiker moet verder kunnen werken in de buurt van de wijziging.

Houd de focus binnen een doorlopende interactie

Een pop-up kan sluiten wanneer de focus het hele gebied ervan verlaat. Het opwaarts propagerende focusout-event geeft de bestemming:

menu.addEventListener("focusout", (event) => {
  if (!menu.contains(event.relatedTarget)) {
    menu.hidden = true;
  }
});

Als de focus tussen twee menubedieningselementen beweegt, sluit het menu niet omdat de bestemming binnen het menu blijft. Een bestemming null ligt ook buiten het menu; contains(null) is onwaar. Geef de focus niet automatisch terug aan het openende element wanneer de gebruiker bewust naar een ander bedieningselement op de pagina is gegaan.

Maak wijzigingen voorspelbaar

Geef na mislukte eigen formuliervalidatie het eerste ongeldige veld of een foutenoverzicht dat naar de fouten linkt focus. Ingebouwde validatie geeft een ongeldig veld al focus. Houd de fouttekst beschikbaar zodat de gebruiker weet wat te corrigeren.

Spring niet naar een nieuw veld terwijl de gebruiker typt en navigeer niet zodra een keuzelijst verandert. Laat de gebruiker de wijziging met een duidelijke actie bevestigen. Een focusverplaatsing moet een bewuste actie of herstel ondersteunen, niet gewone invoer onderbreken.