Tangentbords- och mushändelser
Hantera klick, tangenttryckningar och pekarhändelser.
Tangentbords- och mushändelser är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Familjer av indatahändelser
Mus- och tangentbordshändelser gör det möjligt att bygga interaktioner med många funktioner. Varje familj har specialiserade händelsetyper och egenskaper.
click-händelsen
click utlöses vid en primär tryckning och efterföljande uppsläppning. Den utlöses även vid tangentbordsaktivering av knappar och länkar, vilket gör den tillgänglig.
btn.addEventListener("click", () => {
console.log("activated");
});dblclick och contextmenu
dblclick utlöses vid ett dubbelklick och contextmenu utlöses vid ett högerklick (och avbryts ofta för att visa en anpassad meny).
el.addEventListener("dblclick", () => console.log("double"));
el.addEventListener("contextmenu", (e) => e.preventDefault());mousedown, mouseup, mousemove
Dessa ger detaljerad kontroll över tryckning, uppsläppning och rörelse. De är byggstenarna för dra-interaktioner.
box.addEventListener("mousedown", () => console.log("down"));
box.addEventListener("mouseup", () => console.log("up"));mouseenter jämfört med mouseover
mouseenter bubblar inte och påverkas inte av gränser mellan underordnade element, medan mouseover bubblar och utlöses när pekaren flyttas till underordnade element. mouseenter är vanligtvis det Ni vill använda för hovring.
el.addEventListener("mouseenter", () => el.classList.add("hover"));
el.addEventListener("mouseleave", () => el.classList.remove("hover"));Vilken musknapp
Egenskapen button anger vilken knapp som utlöste händelsen: 0 vänster, 1 mitten, 2 höger.
el.addEventListener("mousedown", (e) => {
if (e.button === 2) console.log("right button");
});keydown och keyup
keydown utlöses när en tangent trycks ned (och upprepas medan den hålls nedtryckt), medan keyup utlöses när tangenten släpps. keypress är föråldrad.
input.addEventListener("keydown", (e) => {
console.log("down: " + e.key);
});event.key
e.key är tangentens logiska värde: ett tecken som "a" eller ett namn som "Enter", "Escape" eller "ArrowUp".
input.addEventListener("keydown", (e) => {
if (e.key === "Escape") console.log("cancel");
});event.code
e.code anger tangentens fysiska placering (till exempel "KeyA" eller "Space"), oberoende av tangentbordslayouten. Använd den för spelkontroller.
window.addEventListener("keydown", (e) => {
if (e.code === "Space") console.log("jump");
});Tangentbordsgenvägar
Kombinera modifierarflaggor med key för att identifiera genvägar och anropa preventDefault för att åsidosätta webbläsarens standardbeteende.
document.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.key === "s") {
e.preventDefault();
console.log("save");
}
});repeat för nedtryckta tangenter
e.repeat är true när en keydown-händelse utlöses eftersom tangenten hålls nedtryckt, vilket gör att Ni kan ignorera automatiska upprepningar.
window.addEventListener("keydown", (e) => {
if (e.repeat) return;
console.log("first press of " + e.key);
});Snabb kontroll
Välj den layoutoberoende egenskapen.
Sammanfattning
Mus händelser omfattar click, dblclick, mousedown/mouseup/mousemove samt de hovringsvänliga mouseenter/mouseleave; button anger vilken knapp som användes. Tangentbordshändelser använder keydown/keyup, där e.key anger tecknet eller namnet, e.code den fysiska tangenten och e.repeat om tangenten hålls nedtryckt.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 59
- Lektioner
- 200
Vanliga frågor
Är lektionen ”Tangentbords- och mushändelser” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Tangentbords- och mushändelser”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Tangentbords- och mushändelser”?
Hantera klick, tangenttryckningar och pekarhändelser. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?
Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Tangentbords- och mushändelser”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?
Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Grunderna i addEventListener
- Händelseobjektet
- preventDefault och stopPropagation
- Tangentbords- och mushändelser