Qu'est-ce que le modèle d'événements dans le…

Méthode de gestion des interactions utilisateur (clics, saisie, survol) et des événements système (chargement de page, erreurs) dans le navigateur web.

Concepts principaux:

Événement: Action qui s'est produite.
Gestionnaire d'événement: Fonction qui s'exécute lors de la survenue de l'événement.
Objet événement (Event object): Transmis au gestionnaire et contenant des informations sur l'événement (type, élément, coordonnées, etc.).

Flux standard des événements:

Capture (phase de capture): L'événement descend de l'élément supérieur du DOM (Window, Document) vers l'élément cible. Les gestionnaires à cette étape s'activent en premier.
Phase cible (Target phase): L'événement atteint l'élément cible où il s'est produit.
Bubbling (phase de propagation): L'événement remonte de l'élément cible à travers le DOM jusqu'à Window. Les gestionnaires à cette étape s'activent après la capture et la phase cible.

Ajout de gestionnaires:

Attributs HTML (onclick, onload): Méthode obsolète, non recommandée pour les applications complexes.

Propriétés des éléments DOM (element.onclick): Peut attribuer un seul gestionnaire par type d'événement pour un élément.

// Exemple
const button = document.querySelector('button');
button.onclick = function() {
    alert('Bouton cliqué!');
};

Méthode addEventListener: Méthode préférée. Permet d'ajouter plusieurs gestionnaires pour un même événement et de contrôler la phase de gestion (capture ou propagation).

// Exemple
const button = document.querySelector('button');
button.addEventListener('click', function(event) {
    console.log('Clic sur le bouton!', event);
}, false); // false - propagation, true - capture

La méthode removeEventListener est utilisée pour supprimer des gestionnaires.

Délégation d'événements: Attacher un gestionnaire à un élément parent pour gérer les événements des éléments enfants. Économise des ressources et simplifie la gestion de contenu dynamique.

// Exemple de délégation
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Clic sur un élément de la liste:', event.target.textContent);
    }
});

Qu'est-ce que le modèle d'événements dans le navigateur?