Toetsenbord- en muisevents
Handel klikken, toetsaanslagen en pointer-events af.
Toetsenbord- en muisevents is een gratis JavaScript Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.
input-gebeurtenisfamilies
Muis- en toetsenbordgebeurtenissen laten je uitgebreide interacties bouwen. Elke familie heeft gespecialiseerde gebeurtenistypen en eigenschappen.
De click-gebeurtenis
click wordt geactiveerd wanneer je de primaire knop indrukt en weer loslaat. De gebeurtenis wordt ook geactiveerd wanneer je knoppen en links met het toetsenbord activeert, waardoor deze toegankelijk is.
btn.addEventListener("click", () => {
console.log("activated");
});dblclick en contextmenu
dblclick wordt geactiveerd bij een dubbelklik en contextmenu bij rechtsklikken. Die laatste gebeurtenis wordt vaak geannuleerd om een aangepast menu te tonen.
el.addEventListener("dblclick", () => console.log("double"));
el.addEventListener("contextmenu", (e) => e.preventDefault());mousedown, mouseup, mousemove
Deze gebeurtenissen geven je nauwkeurige controle over indrukken, loslaten en bewegen. Ze vormen de bouwstenen voor sleepinteracties.
box.addEventListener("mousedown", () => console.log("down"));
box.addEventListener("mouseup", () => console.log("up"));mouseenter tegenover mouseover
mouseenter bubbelt niet en houdt geen rekening met grenzen van onderliggende elementen, terwijl mouseover wel bubbelt en wordt geactiveerd wanneer je naar onderliggende elementen beweegt. Voor aanwijseffecten is mouseenter meestal wat je nodig hebt.
el.addEventListener("mouseenter", () => el.classList.add("hover"));
el.addEventListener("mouseleave", () => el.classList.remove("hover"));Welke muisknop
De eigenschap button geeft aan welke knop de gebeurtenis heeft geactiveerd: 0 is links, 1 is in het midden en 2 is rechts.
el.addEventListener("mousedown", (e) => {
if (e.button === 2) console.log("right button");
});keydown en keyup
keydown wordt geactiveerd wanneer een toets wordt ingedrukt en wordt herhaald zolang je de toets ingedrukt houdt. keyup wordt geactiveerd wanneer je de toets loslaat. keypress is verouderd.
input.addEventListener("keydown", (e) => {
console.log("down: " + e.key);
});event.key
e.key is de logische waarde van de toets: een teken zoals "a" of een naam zoals "Enter", "Escape" of "ArrowUp".
input.addEventListener("keydown", (e) => {
if (e.key === "Escape") console.log("cancel");
});event.code
e.code is de fysieke positie van de toets, zoals "KeyA" of "Space", onafhankelijk van de toetsenbordindeling. Gebruik dit voor spelbesturingen.
window.addEventListener("keydown", (e) => {
if (e.code === "Space") console.log("jump");
});Toetsenbordsneltoetsen
Combineer modificatietoetsen met key om sneltoetsen te herkennen en roep preventDefault aan om de standaardactie van de browser te overschrijven.
document.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.key === "s") {
e.preventDefault();
console.log("save");
}
});repeat voor ingedrukte toetsen
e.repeat is true wanneer keydown wordt geactiveerd omdat de toets ingedrukt wordt gehouden. Zo kun je automatische herhalingen negeren.
window.addEventListener("keydown", (e) => {
if (e.repeat) return;
console.log("first press of " + e.key);
});Korte controle
Kies de eigenschap die onafhankelijk is van de toetsenbordindeling.
Samenvatting
Muisgebeurtenissen omvatten click, dblclick, mousedown/mouseup/mousemove en de aanwijsvriendelijke gebeurtenissen mouseenter/mouseleave. button geeft aan welke knop is gebruikt. Toetsenbordgebeurtenissen gebruiken keydown/keyup, met e.key voor het teken of de naam, e.code voor de fysieke toets en e.repeat voor ingedrukte toetsen.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 59
- Lessen
- 200
Veelgestelde vragen
Is de les “Toetsenbord- en muisevents” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Toetsenbord- en muisevents”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.
Wat leer ik in “Toetsenbord- en muisevents”?
Handel klikken, toetsaanslagen en pointer-events af. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met JavaScript Academy te beginnen?
Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Toetsenbord- en muisevents”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?
Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- De basis van addEventListener
- Het eventobject
- preventDefault en stopPropagation
- Toetsenbord- en muisevents