Comment la délégation d'événements peut-elle améliorer les performances de Vanilla JavaScript et la simplicité du code ?

Délégation d'événements avec Vanilla JavaScript

Dans Vanilla JavaScript, la délégation d'événements est une technique utilisée pour attacher des écouteurs d'événements à un seul élément parent au lieu de éléments individuels en son sein. Cette approche améliore les performances en éliminant le besoin de plusieurs écouteurs d'événement et simplifie le code.

Délégation d'événement efficace

Pour mettre en œuvre efficacement la délégation d'événement, suivez les étapes suivantes :

1. Recherchez l'élément parent où les événements se produiront.
2. Ajoutez un écouteur d'événement à l'élément parent pour le type d'événement souhaité (par exemple, cliquez).
3. Dans le gestionnaire d'événements, vérifiez si l'élément cliqué correspond à un sélecteur spécifique ou si ses éléments parents correspondent au sélecteur.
4. Si la condition est remplie, exécuter la fonction ou l'action souhaitée.

Exemple : déléguer jQuery Code

Considérez le code jQuery suivant :

$('#main').on('click', '.focused', function() {
    settingsPanel();
});

Pour traduire ce code en JavaScript Vanilla, utilisez ce qui suit :

document.querySelector('#main').addEventListener('click', (e) => {
    if (e.target.closest('.focused')) {
        settingsPanel();
    }
});

Dans ce code, nous utilisons querySelector() pour trouver l'élément parent avec l'ID main et y attacher un écouteur d'événement de clic. Lorsqu'un élément de ce parent est cliqué, il vérifie si l'élément cliqué ou l'un de ses éléments parents a la classe .focused. Si tel est le cas, il invoque la fonction settingsPanel().

Avantages de la délégation :

• Performances améliorées :Élimine le besoin de plusieurs écouteurs d'événements, réduisant le nombre de fonctions de gestion d'événements.
• Simplifié code : Plus facile à maintenir et à comprendre que l'utilisation d'écouteurs d'événements individuels pour chaque élément.
• Flexibilité : Permet la liaison dynamique des gestionnaires d'événements basés sur des sélecteurs, vous permettant de gérer les événements à partir d'éléments qui peuvent être ajoutés ou supprimés dynamiquement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!