Explication détaillée des événements liés aux éléments dom dans jQuery_jquery

En tant qu'instinct professionnel de fanatiques de technologie, lorsque je vois les fonctions d'un produit technique, je ne peux m'empêcher de me demander comment il est mis en œuvre. Par exemple, chaque fois que je vois une interface intéressante ou une fonction intéressante sur le site Web de quelqu'un d'autre, je ne peux m'empêcher d'ouvrir la console du navigateur. . .

D'accord, sans aller trop loin, parlons de ce que vous devez faire lorsque vous souhaitez voir le code d'une fonction événementielle liée à un élément du site Web.

Afficher le code de la fonction d'événement lié de manière native

Le soi-disant natif consiste à se lier à l'élément dom via la méthode addEventListener. C'est facile à faire :

Inspectez l'élément lié à l'événement (clic droit dessus ->Inspecter l'élément) Dans la console de la vue contextuelle Éléments, cliquez sur l'onglet "Écouteurs d'événement" sur le côté droit et vous pourrez alors voir tous les éléments liés à l'élément. Lorsque l'événement se produit, cliquez dessus, recherchez le gestionnaire, cliquez avec le bouton droit de la souris et sélectionnez le menu "Afficher la définition de la fonction". Vous pouvez accéder à l'emplacement du code source de la fonction d'événement liée à l'élément. Il y a des images et la vérité :

Afficher le code de la fonction d'événement lié par jquery

Eh bien, je sais, vous avez rencontré un problème, n'est-ce pas ? Pour toutes les fonctions d'événement liées par jquery, vous accéderez au code jquery via la méthode ci-dessus, et il sera toujours à cet endroit. Le voir équivaut à ne pas le voir. Par conséquent, frère Bao est là pour vous apprendre à visualiser jquery.

Pour inspecter également l'élément, cliquez sur la vue "Propriétés". Sélectionnez le premier, développez-le et trouvez un attribut comme 'jQueryxxxxx (une chaîne de nombres)', souvenez-vous de sa valeur (généralement un nombre) N

Passez ensuite à la vue Console à gauche et exécutez $.cache[N] dans la console N voici la valeur d'attribut précédente

.

Ensuite, les choses liées à cet élément sortiront. Développez les événements et vous verrez la fonction réelle que vous souhaitez afficher. Cliquez avec le bouton droit sur la fonction... après le handle sous l'événement spécifique, puis sélectionnez "Afficher la définition de la fonction" pour le voir.

Exemple=》http://demo.sudodev.cn/frontend/jqDetectAfficher le code de la fonction d'événement lié à la version jquery2.x

D'accord, je sais, vous avez dû encore rencontrer des problèmes. Parce que lorsque vous utilisez la version jquery2.x de jquery, la méthode ci-dessus ne fonctionnera plus. La raison en est que la structure du code de 2.x a changé. En fait, les événements de la version 2.x utilisent toujours le mécanisme de cache, mais ils ne sont pas exposés à l'extérieur comme la version 1.x. Au lieu de cela, ils sont encapsulés et existent dans l'objet de fermeture data_priv et dans la version compressée de. jquery est généralement utilisé, vous ne pouvez pas afficher ce nom data_priv. Ainsi après avoir vérifié le code source de la version jquery2.x, Brother Bao vous apprend à le localiser :

Accédez directement à la console et construisez un objet contenant jQuery pour afficher jQuery dans la console. Par exemple, saisissez var o={j:$}. L'avantage est que vous pouvez afficher toutes les propriétés de jQuery

dans la barre de contrôle après l'exécution.

Ensuite, développez l'objet jQuery (voici j) dans la console, recherchez la méthode _queueHooks et voyez que son code est probablement "return L.get(a,c)||L.access...", marquez Vivre dans ce L peut être ou non L)

Développez n'importe quel objet de premier niveau en dessous de j, tel que _queueHooks ci-dessus, recherchez Développer, puis développez Fermeture ci-dessous, recherchez le distique "L" devant, faites un clic droit sur la lettre derrière et sélectionnez "Stocker en tant que variable globale »

Ensuite, un objet tempX est affiché dans la console, qui contient le cache. Disons que cela s'appelle temp1. Ce temp1 a une méthode get qui peut obtenir directement son objet cache. Supposons que vous souhaitiez afficher l'identifiant de l'objet lié à l'événement appelé clickMe. Ensuite, exécutez temp1.get($('#clickMe').get(0)) (ou temp1.get(document.querySelector('#clickMe')))) et il affichera quelque chose d'équivalent à la version jquery1.x ci-dessus

L'exemple suivant est le même que la méthode jquery1.x ci-dessus=》http://demo.sudodev.cn/frontend/jq2DetectAnother :

Les opérations ci-dessus sont effectuées par défaut sous le navigateur Chrome. En fait, c'est similaire sous Firefox. Je pense qu'en tant que technicien, vous devriez pouvoir tirer des conclusions à partir d'un exemple. Quant à IE, euh... faites comme si je ne l'avais pas dit. :)

Mise à jour :

1. Afin d'éviter la vérification des attributs, jquery1.x peut exécuter directement $.cache[$('#clickMe').get(0)[$.expando]] sur la console pour afficher les éléments liés à l'élément, au lieu de vérifier d'abord la valeur de l'attribut jQueryxxxxxxx sur l'élément

2. Après une revue et un test d'article. Il existe une nouvelle méthode qui est actuellement la plus économique et applicable à jquery1 et jquery2. Entrez $._data($('#clickMe').get(0)) directement dans la console pour afficher tout ce qui est lié à l'élément. Cependant, d'après les commentaires dans le code source de jquery2, nous avons constaté que $._data sera supprimé dans les versions futures. La méthode présentée ci-dessus reste donc très utile. Il vaut mieux apprendre aux gens à pêcher que de leur apprendre à pêcher, :)