JavaScript Academy · Lezione

Eventi da tastiera e mouse

Gestisca clic, pressioni dei tasti ed eventi del puntatore.

Eventi da tastiera e mouse è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Famiglie di eventi di input

Gli eventi del mouse e della tastiera consentono di creare interazioni ricche. Ogni famiglia dispone di tipi di evento e proprietà specializzati.

L'evento click

click viene generato quando si preme e si rilascia il pulsante principale. Viene generato anche per l'attivazione da tastiera di pulsanti e collegamenti, rendendoli accessibili.

btn.addEventListener("click", () => {
  console.log("activated");
});

dblclick e contextmenu

dblclick viene generato con un doppio clic, mentre contextmenu viene generato con un clic destro e spesso viene annullato per mostrare un menu personalizzato.

el.addEventListener("dblclick", () => console.log("double"));
el.addEventListener("contextmenu", (e) => e.preventDefault());

mousedown, mouseup, mousemove

Questi eventi offrono un controllo dettagliato: pressione, rilascio e movimento. Sono gli elementi fondamentali per le interazioni di trascinamento.

box.addEventListener("mousedown", () => console.log("down"));
box.addEventListener("mouseup", () => console.log("up"));

mouseenter rispetto a mouseover

mouseenter non si propaga verso l'alto e ignora i confini degli elementi figli, mentre mouseover si propaga e viene generato quando si passa sopra gli elementi discendenti. Per l'hover, in genere è preferibile mouseenter.

el.addEventListener("mouseenter", () => el.classList.add("hover"));
el.addEventListener("mouseleave", () => el.classList.remove("hover"));

Quale pulsante del mouse

La proprietà button indica quale pulsante ha generato l'evento: 0 sinistro, 1 centrale, 2 destro.

el.addEventListener("mousedown", (e) => {
  if (e.button === 2) console.log("right button");
});

keydown e keyup

keydown viene generato quando si preme un tasto e si ripete finché lo si tiene premuto; keyup viene generato al rilascio. keypress è deprecato.

input.addEventListener("keydown", (e) => {
  console.log("down: " + e.key);
});

event.key

e.key è il valore logico del tasto: un carattere come "a" oppure un nome come "Enter", "Escape" o "ArrowUp".

input.addEventListener("keydown", (e) => {
  if (e.key === "Escape") console.log("cancel");
});

event.code

e.code indica la posizione fisica del tasto, ad esempio "KeyA" o "Space", indipendentemente dal layout della tastiera. Lo utilizzi per i controlli di gioco.

window.addEventListener("keydown", (e) => {
  if (e.code === "Space") console.log("jump");
});

Scorciatoie da tastiera

Combini i flag dei modificatori con key per rilevare le scorciatoie e chiami preventDefault per sovrascrivere il comportamento predefinito del browser.

document.addEventListener("keydown", (e) => {
  if (e.ctrlKey && e.key === "s") {
    e.preventDefault();
    console.log("save");
  }
});

repeat per i tasti tenuti premuti

e.repeat è true quando un keydown viene generato perché il tasto è tenuto premuto, consentendo di ignorare le ripetizioni automatiche.

window.addEventListener("keydown", (e) => {
  if (e.repeat) return;
  console.log("first press of " + e.key);
});

Verifica rapida

Scelga la proprietà indipendente dal layout.

Riepilogo

Gli eventi del mouse includono click, dblclick, mousedown/mouseup/mousemove e mouseenter/mouseleave, adatti all'hover; button identifica il pulsante coinvolto. Gli eventi della tastiera utilizzano keydown/keyup, con e.key per il carattere o il nome, e.code per il tasto fisico ed e.repeat per i tasti tenuti premuti.

Domande Frequenti

La lezione «Eventi da tastiera e mouse» è gratuita?

Sì — il testo completo di «Eventi da tastiera e mouse» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Eventi da tastiera e mouse»?

Gestisca clic, pressioni dei tasti ed eventi del puntatore. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Eventi da tastiera e mouse»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy