Guide pratique : Les événements JavaScript expliqués

Les événements : rendre vos pages interactives

Les événements JavaScript détectent les actions de l’utilisateur (clic, survol, saisie, scroll) et exécutent du code en réponse. C’est ce qui rend vos pages vivantes et interactives.

Les 3 façons d’écouter un événement

// ✅ Méthode recommandée : addEventListener
const bouton = document.getElementById('monBouton');
bouton.addEventListener('click', function() {
    alert('Bouton cliqué !');
});

// ⚠️ Ancienne méthode (1 seul handler possible)
bouton.onclick = function() {
    alert('Cliqué !');
};

// ❌ À éviter : inline dans le HTML
// <button onclick="alert('Cliqué')">Clic</button>

Les événements les plus utilisés

Événements de souris

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

// Clic simple
carte.addEventListener('click', () => console.log('Clic'));

// Double clic
carte.addEventListener('dblclick', () => console.log('Double clic'));

// Survol : entrée
carte.addEventListener('mouseenter', () => {
    carte.style.transform = 'scale(1.05)';
});

// Survol : sortie
carte.addEventListener('mouseleave', () => {
    carte.style.transform = 'scale(1)';
});

// Position de la souris
document.addEventListener('mousemove', (e) => {
    console.log(`X: ${e.clientX}, Y: ${e.clientY}`);
});

Événements de clavier

// Détecter les touches
document.addEventListener('keydown', (e) => {
    console.log('Touche pressée :', e.key);
    
    if (e.key === 'Escape') {
        fermerModal();
    }
    
    if (e.key === 'Enter') {
        soumettreFormulaire();
    }
    
    // Raccourcis clavier (Ctrl+S)
    if (e.ctrlKey && e.key === 's') {
        e.preventDefault(); // Empêcher la sauvegarde du navigateur
        sauvegarder();
    }
});

// Champ de recherche en temps réel
const recherche = document.getElementById('recherche');
recherche.addEventListener('keyup', (e) => {
    const terme = e.target.value;
    filtrerResultats(terme);
});

Événements de formulaire

const form = document.getElementById('formulaire');

// Soumission
form.addEventListener('submit', (e) => {
    e.preventDefault(); // Empêcher le rechargement de la page
    
    const donnees = new FormData(form);
    console.log('Nom :', donnees.get('nom'));
    console.log('Email :', donnees.get('email'));
});

// Changement de valeur (select, checkbox)
const select = document.getElementById('pays');
select.addEventListener('change', (e) => {
    console.log('Pays sélectionné :', e.target.value);
});

// Focus et blur (entrée/sortie du champ)
const input = document.getElementById('email');
input.addEventListener('focus', () => {
    input.style.borderColor = '#667eea';
});
input.addEventListener('blur', () => {
    input.style.borderColor = '#ddd';
});

// Saisie en temps réel
input.addEventListener('input', (e) => {
    console.log('Valeur actuelle :', e.target.value);
});

Événements de scroll et fenêtre

// Scroll
window.addEventListener('scroll', () => {
    const scrollY = window.scrollY;
    
    // Barre de progression de lecture
    const hauteurPage = document.body.scrollHeight - window.innerHeight;
    const progression = (scrollY / hauteurPage) * 100;
    document.getElementById('progress').style.width = progression + '%';
});

// Redimensionnement
window.addEventListener('resize', () => {
    console.log(`Fenêtre : ${window.innerWidth}x${window.innerHeight}`);
});

// Chargement complet de la page
window.addEventListener('load', () => {
    console.log('Page entièrement chargée');
    document.getElementById('loader').style.display = 'none';
});

// DOM prêt (plus rapide que load)
document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM prêt');
});

L’objet événement (e)

bouton.addEventListener('click', function(e) {
    // L'élément cliqué
    console.log(e.target);
    
    // Position du clic
    console.log(e.clientX, e.clientY);
    
    // Empêcher le comportement par défaut
    e.preventDefault();
    
    // Arrêter la propagation
    e.stopPropagation();
    
    // Touche modificatrice
    console.log(e.ctrlKey, e.shiftKey, e.altKey);
});

Délégation d’événements

Au lieu d’attacher un événement à chaque élément, attachez-le au parent :

// ❌ Inefficace : 100 listeners pour 100 boutons
document.querySelectorAll('.btn-supprimer').forEach(btn => {
    btn.addEventListener('click', supprimer);
});

// ✅ Efficace : 1 seul listener sur le parent
document.getElementById('liste').addEventListener('click', (e) => {
    if (e.target.classList.contains('btn-supprimer')) {
        const id = e.target.dataset.id;
        supprimerElement(id);
    }
});

// Fonctionne même pour les éléments ajoutés dynamiquement !

Exercice pratique