Implémentation du code de la délégation d'événements javascript et de l'optimisation du code

Ce que cet article vous apporte concerne l'implémentation du code de la délégation d'événements js et l'optimisation du code. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Il y a deux jours, j'ai repris un projet d'un collègue, qui est une page d'accueil de site Web. Il contient un morceau de code très encombrant. La fonction à réaliser est,

En ajoutant des événements de déplacement et de déplacement de la souris à l'élément parent, pour contrôler l'affichage et le masquage des éléments enfants.

code html, il y a quatre divs d'éléments parents, chaque élément parent imbrique un div d'élément enfant,

Il s'agit d'une interception d'un des divs :

La méthode la plus simple et la plus grossière est la suivante :

Écrivez huit méthodes directement pour définir le bloc de style d'attribut ou aucun respectivement.

Bien qu'il soit simple d'écrire ainsi, nous devons encore apporter des modifications pour l'optimisation du code et la vitesse de réponse des pages.

J'ai demandé à mes collègues et j'ai dit que l'examen des méthodes associées de délégation d'événements peut résoudre efficacement ce problème.

Après quelques opérations, l'auteur a écrit le code suivant :

Écrire comme ceci peut obtenir l'effet, mais en vérifiant la console, il n'y a rien de Fluttering rouge.

Ça me donne vraiment mal à la tête de voir ça. De toute évidence, l'effet est obtenu, pourquoi signale-t-il toujours une erreur ?

Pendant ma pause déjeuner aujourd'hui, je me suis allongé et j'ai réfléchi un moment, et tout à coup j'ai eu l'inspiration.

Voici le code modifié. Après avoir lu ceci, vous comprendrez que c'est parce que target fait référence à l'objet actuel.

Lorsque la souris se déplace vers l'élément parent div, l'attribut p de l'élément enfant se transforme en block et sera affiché.

Mais lorsque vous passez à l'élément enfant div, la cible pointe vers l'élément enfant, et l'élément enfant n'a pas firstElementChild, donc une erreur sera signalée.

À ce stade, il suffit d'ajouter un jugement. Si le sous-objet n'existe pas, modifiez les propriétés de l'objet actuel.

Sinon, c'est-à-dire si le sous-objet existe, modifiez les propriétés du sous-objet.

Après deux jours de travail acharné, j'ai enfin optimisé ce petit morceau de code.

Au départ, je pensais à une boucle for, mais après une boucle comme celle-ci, il y a encore beaucoup d'opérations DOM.

Recommandations associées :

Comment obtenir des ressources de collection audio et vidéo avec js ? Méthodes de collecte d'audio et de vidéo en js

Comparaison des priorités des opérateurs js et analyse des opérateurs logiques js

cela dans les événements js Qu'est-ce que ça fait veux dire ? Explication détaillée de l'utilisation de ceci en js (avec des exemples d'utilisation)

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!