📢 Nuovo Corso Laravel API disponibile!

Esercizi Eventi Javascript

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);
});