DOM Events - Guida per Principianti

Gli eventi DOM permettono al tuo codice JavaScript di reagire alle azioni dell'utente e ai cambiamenti nella pagina web. Ecco una panoramica completa degli eventi più importanti.

Altri Cheat Sheet:

Come Ascoltare gli Eventi

Prima di vedere i tipi di eventi, ricorda che per ascoltare un evento usi:

elemento.addEventListener('nomeEvento', function() {
    // Il tuo codice qui
});

🖱️ Eventi del Mouse

`click`

Si attiva quando l'utente clicca su un elemento.

const bottone = document.getElementById('mio-bottone');
bottone.addEventListener('click', function() {
    alert('Bottone cliccato!');
});

`dblclick`

Si attiva quando l'utente fa doppio clic su un elemento.

const immagine = document.querySelector('img');
immagine.addEventListener('dblclick', function() {
    this.style.width = '200px';
});

`mouseover`

Si attiva quando il mouse entra sopra un elemento.

const box = document.querySelector('.box');
box.addEventListener('mouseover', function() {
    this.style.backgroundColor = 'lightblue';
});

`mouseout`

Si attiva quando il mouse esce da un elemento.

box.addEventListener('mouseout', function() {
    this.style.backgroundColor = 'white';
});

`mousemove`

Si attiva quando il mouse si muove all'interno di un elemento.

const area = document.getElementById('area-mouse');
area.addEventListener('mousemove', function(event) {
    console.log(`Mouse in posizione: ${event.clientX}, ${event.clientY}`);
});

`mousedown` e `mouseup`

mousedown: quando il pulsante del mouse viene premuto
mouseup: quando il pulsante del mouse viene rilasciato

const elemento = document.querySelector('.draggable');
elemento.addEventListener('mousedown', function() {
    console.log('Inizio trascinamento');
});

elemento.addEventListener('mouseup', function() {
    console.log('Fine trascinamento');
});

⌨️ Eventi della Tastiera

`keydown`

Si attiva quando un tasto viene premuto (si ripete se il tasto rimane premuto).

document.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        console.log('Hai premuto Invio!');
    }
});

`keyup`

Si attiva quando un tasto viene rilasciato.

const input = document.getElementById('mio-input');
input.addEventListener('keyup', function(event) {
    console.log(`Hai rilasciato il tasto: ${event.key}`);
});

`keypress`

⚠️ Deprecato - Meglio usare keydown o keyup.

📝 Eventi di Input

`input`

Si attiva ogni volta che il valore di un input cambia (in tempo reale).

const campoTesto = document.getElementById('nome');
campoTesto.addEventListener('input', function() {
    console.log(`Testo digitato: ${this.value}`);
});

`change`

Si attiva quando il valore di un input cambia E l'elemento perde il focus.

const select = document.querySelector('select');
select.addEventListener('change', function() {
    console.log(`Opzione selezionata: ${this.value}`);
});

`submit`

Si attiva quando un form viene inviato.

const form = document.getElementById('mio-form');
form.addEventListener('submit', function(event) {
    event.preventDefault(); // Previene l'invio tradizionale
    console.log('Form inviato!');
});

`focus` e `blur`

focus: quando un elemento riceve il focus (viene selezionato)
blur: quando un elemento perde il focus

const input = document.querySelector('input');

input.addEventListener('focus', function() {
    this.style.borderColor = 'blue';
});

input.addEventListener('blur', function() {
    this.style.borderColor = 'gray';
});

🪟 Eventi di Finestra

`resize`

Si attiva quando la finestra del browser viene ridimensionata.

window.addEventListener('resize', function() {
    console.log(`Nuova dimensione: ${window.innerWidth}x${window.innerHeight}`);
});

`scroll`

Si attiva quando la pagina o un elemento viene scrollato.

window.addEventListener('scroll', function() {
    const scrollTop = window.pageYOffset;
    console.log(`Scroll position: ${scrollTop}px`);
});

`load`

Si attiva quando la pagina è completamente caricata.

window.addEventListener('load', function() {
    console.log('Pagina completamente caricata!');
});

`unload`

Si attiva quando l'utente sta per lasciare la pagina.

window.addEventListener('beforeunload', function(event) {
    event.returnValue = 'Sei sicuro di voler uscire?';
});

🎯 Eventi di Drag and Drop

⚠️ IMPORTANTE: Gli eventi di drag and drop HTML5 NON funzionano sui dispositivi mobile! Su smartphone e tablet dovrai usare gli eventi touch o librerie specializzate. Leggi di più qui

Evento Base (solo desktop)

const elemento = document.getElementById('draggable');
const target = document.getElementById('drop-zone');

// Rendere l'elemento trascinabile
elemento.draggable = true;

`dragstart`

Si attiva quando inizia un'operazione di trascinamento.

elemento.addEventListener('dragstart', function(event) {
    event.dataTransfer.setData('text/plain', this.id);
    console.log('Inizio drag');
});

`dragover`

Si attiva quando un elemento viene trascinato sopra un'area di rilascio.

target.addEventListener('dragover', function(event) {
    event.preventDefault(); // Necessario per permettere il drop
});

`drop`

Si attiva quando un elemento viene rilasciato in un'area di rilascio.

target.addEventListener('drop', function(event) {
    event.preventDefault();
    const elementId = event.dataTransfer.getData('text/plain');
    const draggedElement = document.getElementById(elementId);
    this.appendChild(draggedElement);
    console.log('Elemento rilasciato!');
});

Alternative per Mobile

Per supportare anche i dispositivi mobile, usa gli eventi touch:

// Drag and drop che funziona sia su desktop che mobile
const elemento = document.getElementById('draggable');
let isDragging = false;

function startDrag(e) {
    isDragging = true;
    // Gestisce sia mouse che touch
    const clientX = e.clientX || e.touches[0].clientX;
    const clientY = e.clientY || e.touches[0].clientY;
    
    elemento.startX = clientX;
    elemento.startY = clientY;
    e.preventDefault();
}

function drag(e) {
    if (!isDragging) return;
    const clientX = e.clientX || e.touches[0].clientX;
    const clientY = e.clientY || e.touches[0].clientY;
    
    elemento.style.left = clientX + 'px';
    elemento.style.top = clientY + 'px';
    e.preventDefault();
}

function stopDrag() {
    isDragging = false;
}

// Eventi per desktop
elemento.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stopDrag);

// Eventi per mobile
elemento.addEventListener('touchstart', startDrag);
document.addEventListener('touchmove', drag);
document.addEventListener('touchend', stopDrag);

💡 Consigli Pratici

1. Usa `addEventListener` invece di attributi HTML

// ✅ Buono
bottone.addEventListener('click', function() { ... });

// ❌ Evita
// <button onclick="...">

2. Rimuovi gli event listener quando non servono più

function gestore() {
    console.log('Cliccato!');
}

// Aggiungi
elemento.addEventListener('click', gestore);

// Rimuovi quando non serve più
elemento.removeEventListener('click', gestore);

3. Usa `event.preventDefault()` per fermare il comportamento predefinito

link.addEventListener('click', function(event) {
    event.preventDefault(); // Il link non si aprirà
    // Il tuo codice personalizzato qui
});

4. Accedi alle informazioni dell'evento

elemento.addEventListener('click', function(event) {
    console.log('Elemento cliccato:', event.target);
    console.log('Posizione click:', event.clientX, event.clientY);
    console.log('Tasto premuto:', event.button);
});

🚀 Esempio Completo

Ecco un esempio che combina diversi eventi:

<div id="interactive-box" style="width: 200px; height: 200px; background: lightgray; margin: 20px;">
    Interagisci con me!
</div>
<input type="text" id="text-input" placeholder="Scrivi qualcosa...">

const box = document.getElementById('interactive-box');
const input = document.getElementById('text-input');

// Eventi del mouse
box.addEventListener('click', function() {
    this.style.backgroundColor = 'lightblue';
});

box.addEventListener('mouseover', function() {
    this.style.cursor = 'pointer';
});

box.addEventListener('mouseout', function() {
    this.style.backgroundColor = 'lightgray';
});

// Eventi di input
input.addEventListener('input', function() {
    box.textContent = this.value || 'Interagisci con me!';
});

input.addEventListener('focus', function() {
    this.style.borderColor = 'blue';
});

input.addEventListener('blur', function() {
    this.style.borderColor = 'gray';
});

// Eventi della tastiera
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        input.value = '';
        box.textContent = 'Interagisci con me!';
        box.style.backgroundColor = 'lightgray';
    }
});

Questo esempio mostra come diversi eventi possono lavorare insieme per creare un'esperienza interattiva!

withArtur/js_events.md

DOM Events - Guida per Principianti

Come Ascoltare gli Eventi

🖱️ Eventi del Mouse

click

dblclick

mouseover

mouseout

mousemove

mousedown e mouseup

⌨️ Eventi della Tastiera

keydown

keyup

keypress