Esercizi Eventi Javascript

Codegrind Team•Jul 22 2023

Ecco degli esercizi semplici con soluzione per praticare le basi degli eventi ed eventiListener in Javascript.

Esercizio 1

Aggiungere un event listener al click su un pulsante:

const pulsante = document.getElementById("mioPulsante");
pulsante.addEventListener("click", function () {
  console.log("Hai cliccato sul pulsante!");
});

Esercizio 2

Aggiungere un event listener al submit di un modulo:

const modulo = document.getElementById("mioModulo");
modulo.addEventListener("submit", function (event) {
  event.preventDefault();
  console.log("Il modulo è stato inviato!");
});

Esercizio 3

Aggiungere un event listener al cambio di un input di testo:

const input = document.getElementById("mioInput");
input.addEventListener("input", function () {
  console.log("Il valore dell'input è cambiato:", input.value);
});

Esercizio 4

Aggiungere un event listener al caricamento completo della pagina:

window.addEventListener("load", function () {
  console.log("La pagina è stata completamente caricata!");
});

Esercizio 5

Aggiungere un event listener al passaggio del mouse su un elemento:

const elemento = document.getElementById("mioElemento");
elemento.addEventListener("mouseover", function () {
  console.log("Il mouse è passato sull'elemento!");
});

Esercizio 6

Aggiungere un event listener al focus su un campo di input:

const input = document.getElementById("mioInput");
input.addEventListener("focus", function () {
  console.log("Hai dato il focus all'input!");
});

Esercizio 7

Aggiungere un event listener al cambio di selezione di un elemento select:

const select = document.getElementById("mioSelect");
select.addEventListener("change", function () {
  console.log("Hai selezionato una nuova opzione:", select.value);
});

Esercizio 8

Aggiungere un event listener alla pressione di un tasto sulla tastiera:

document.addEventListener("keydown", function (event) {
  console.log("Hai premuto il tasto:", event.key);
});

Esercizio 9

Aggiungere un event listener allo scroll della pagina:

window.addEventListener("scroll", function () {
  console.log("La pagina è stata scrollata!");
});

Esercizio 10

Aggiungere un event listener al doppio click su un elemento:

const elemento = document.getElementById("mioElemento");
elemento.addEventListener("dblclick", function () {
  console.log("Hai effettuato un doppio click sull'elemento!");
});

Esercizio 11

Aggiungere un event listener al cambio di valore di un elemento input di tipo range:

const inputRange = document.getElementById("mioInputRange");
inputRange.addEventListener("input", function () {
  console.log("Il valore del range è cambiato:", inputRange.value);
});

Esercizio 12

Aggiungere un event listener al passaggio del mouse fuori da un elemento:

const elemento = document.getElementById("mioElemento");
elemento.addEventListener("mouseout", function () {
  console.log("Il mouse è uscito dall'elemento!");
});

Esercizio 13

Aggiungere un event listener al tasto destro del mouse su un elemento:

const elemento = document.getElementById("mioElemento");
elemento.addEventListener("contextmenu", function (event) {
  event.preventDefault();
  console.log("Hai cliccato con il tasto destro sull'elemento!");
});

Esercizio 14

Aggiungere un event listener al cambio di dimensione della finestra del browser:

window.addEventListener("resize", function () {
  console.log("La dimensione della finestra è cambiata!");
});

Esercizio 15

Aggiungere un event listener al caricamento di un'immagine:

const immagine = document.getElementById("miaImmagine");
immagine.addEventListener("load", function () {
  console.log("L'immagine è stata caricata!");
});

Esercizio 16

Aggiungere un event listener al tasto premuto sulla tastiera con combinazione di tasti:

document.addEventListener("keydown", function (event) {
  if (event.key === "Control" && event.shiftKey) {
    console.log("Hai premuto Ctrl + Shift sulla tastiera!");
  }
});

Esercizio 17

Aggiungere un event listener alla pressione di un tasto sulla tastiera con controllo dell'input:

const input = document.getElementById("mioInput");
input.addEventListener("keydown", function (event) {
  if (event.key === "Enter") {
    console.log("Hai premuto il tasto Invio sull'input!");
  }
});

Esercizio 18

Aggiungere un event listener al cambio di valore di una casella di controllo (checkbox):

const checkbox = document.getElementById("miaCheckbox");
checkbox.addEventListener("change", function () {
  console.log("La casella di controllo è stata selezionata:", checkbox.checked);
});