D'accord, nous reviendrons.
Jusqu'à présent, nous avons parlé de la façon dont nous pouvons sélectionner les éléments avec J Querrey et aussi comment nous pouvons les manipuler.
Maintenant, nous allons présenter la dernière grande pièce manquante qui est des événements dans la requête J.
Revenons donc à la vanille J.S ..
Lorsque nous avons ajouté des écouteurs d'événements, nous avons utilisé une méthode appelée écouteur d'événements.
Eh bien, il s'avère que Jay où il a une tonne de méthodes qui ont à voir avec les événements.
Donc j'ai la section d'événement ouverte sur Jake où il peut y arriver en cliquant simplement sur les événements ici.
Alors que je défile à travers ici, vous pouvez voir combien.
Méthodes événement Coria il ya chikor il est livré avec une tonne d'entre eux.
Donc ce que je vais faire est de mettre en évidence les trois plus importants que les trois que vous pouvez utiliser.
Quatre-vingt-dix-neuf pour cent du temps, ces trois méthodes sont rapide touche presse et sur.
Et j'ai dit que ces trois vous pourriez utiliser 99 p. 100 du temps.
C'est en fait plus comme celui-ci ici.
Vous pouvez utiliser 99 pour cent du temps.
Donc, je vais vous montrer cliquez et appuyez sur les touches d'abord, mais mon objectif principal est de vous montrer comment la méthode est génial.
Alors, commençons.
Ainsi, la méthode rapide de equerries de Jay est de savoir comment nous pouvons rapidement et facilement ajouter un écouteur de clic à un seul élément ou à une collection d'éléments.
Donc vous pouvez voir que j'ai deux exemples dans ce cas.
Je sélectionne quelque chose et puis ajouter un écouteur de clic avec un clic.
Alors nous sélectionnons quelque chose avec l'idée de soumettre que nous courons.
Cliquez dessus et ensuite nous passons dans une fonction de rappel et cette fonction de rappel sera exécuté lorsque quelque chose avec l'idée de soumettre est cliqué.
Et parce que c'est un ID, il n'y en a qu'un sur la page.
Donc, quand on clique sur un élément, ce code est exécuté.
Si vous jetez un oeil ici, vous pouvez voir que je suis de sélectionner tous les boutons sur la page qui pourrait être un.
Il pourrait être de 10 boutons et j'ajoute un écouteur de clic à chacun d'eux.
Donc, chaque fois qu'un bouton est rapide, il alertera quelqu'un, cliquez sur le bouton.
Permettez-moi de le démontrer.
Maintenant, j'ai une page HTL simple avec Jay queery inclus comme un CDN.
Et je vais ajouter dans nous allons faire des événements de requête Jay et je vais ajouter en quelques boutons.
Donc la première que je dis ne me corrige pas.
Et puis le prochain dira sérieusement ok moi.
Et le dernier dira que c'est ton dernier avertissement.
Nous allons donc enregistrer et ouvrir ce dans le navigateur et toujours vérifier que J chargé.
D'ACCORD.
Cela semble bon.
Donc, nous allons commencer facile ici en ajoutant un écouteur rapide à ce H-1 et il n'y a qu'un seul sur la page.
Donc nous devons juste choisir d'abord avec le signe dollar.
Donc, celui qui nous donne le droit H-1 que seulement un et puis nous courons.
Ne cliquez pas dessus et alors nous devons passer dans une fonction de rappel qui sera exécutée chaque fois que nous cliquons sur ce H-1.
Donc, derrière les scènes cliquez sur utiliser un écouteur d'événements et il est l'ajout d'un écouteur de clic sur ce H-1 et nous pouvons soit faire une fonction anonyme qui est beaucoup plus commun à voir mais un peu plus intimidant pour les nouveaux étudiants ou nous pourrions écrire une fonction nommée Séparément, puis passez le nom de cette fonction ici.
Mais comme je l'ai dit les fonctions anonymes sont beaucoup plus communs.
Donc, ce que nous voulons faire, c'est juste d'alerte chaque correcte et je vais frapper entrer ici et maintenant si je clique sur ce H-1, vous verrez que j'obtiens H-1 Quitter et cela ne se produit sur aucun autre élément.
Il se passe ici se rappeler parce que mon H-1 va tout le chemin à travers l'écran de sorte que CSSA problème si je veux changer la taille de celui-ci, mais il ne se produit que lorsque je clique sur l'un élément.
Maintenant, ce que je veux faire est de montrer comment nous pouvons ajouter un écouteur rapide à une collection d'éléments.
Je vais donc sélectionner tous les boutons ici.
Donc, un bouton de signe dollar et puis nous ajoutons notre clic comme ça et nous pouvons passer dans une fonction anonyme à nouveau comme notre rappel.
Et ce sera exécuté chaque fois qu'un bouton est cliqué et nous allons juste faire un bouton d'alerte cliquez juste comme ça et appuyez sur Entrée.
Et maintenant, si je clique sur l'un de ces boutons là, nous allons cliquez sur le bouton cliqué sur le bouton Quitter.
Revenez donc à vanilla javascript pour ajouter un écouteur d'événements à une collection de boutons.
Je devrais les sélectionner tous avec le sélecteur de requête tous ou obtenir des éléments par le nom de balise et alors je devrais utiliser une boucle de pour boucler par tous les et alors je devrais ajouter individuellement un écouteur d'événement qui pour être clair se produit Dans les coulisses.
Mais tout ce que j'ai à faire est d'écrire cette ligne et qui va boucle pour moi qui va ajouter les auditeurs événement individuellement qui rend sa vie vraiment facile plutôt que juste un bouton d'apprentissage cliqué.
Que faire si je voulais changer le style changer la couleur d'arrière-plan du bouton qui a été cliqué.
Donc je devrais ajouter un écouteur de clic encore.
Je suis juste à la flèche vers le haut et plutôt que d'alerter.
Ce que nous allons faire est de changer la couleur de fond de sorte que va être quelque chose que C-s s de fond et nous allons le changer pour être rose.
Donc, la question est ce que nous appelons Dotsie CSSA et retour avec vanille javascript.
Nous utiliserions cela.
Le mot clé ceci et cela se réfère à l'élément qui a été cliqué sur cependant requête NJ qui ne sera pas tout à fait ce que nous devons faire est d'utiliser la version J Querrey de cela.
C'est toujours un peu une idée confuse.
Je pense qu'il aide à se rappeler que ce que Shakeri fait est il prend la vanille simple Oui et il l'enveloppe dans la requête de Jay et il est grand J.A.G. Hug et il lui donne quelques propriétés et méthodes spéciales.
Donc, si nous voulons utiliser le point CSSA qui est une méthode de requête J, nous devons nous assurer que nous l'exécutons sur un objet de requête J.
Alors tout simplement vieux c'est le javascript régulier vanille cela.
Nous devons donc l'envelopper et lui dire que c'est la version de la requête J.
Alors testons ça.
Appuyez sur Entrer ici et maintenant, nous allons cliquer sur le bouton d'abord que nous avons cette alerte, car nous n'avons jamais débarrassé de ce premier écouteur de clic.
Et puis l'arrière-plan change en rose et vous pouvez voir que cela arrivera à chacun que je clique.
Nous pourrions aussi faire quelque chose comme ça.
J'ai donc frappé la flèche vers le haut et je rafraîchir la page plutôt que de simplement les changer pour être rose.
Nous pourrions également faire une annulation que le journal et l'adulte de Walcott enregistrent le texte du bouton qui a été cliqué.
Donc, il serait quelque chose comme vous avez cliqué plus et puis je vais faire une variable pour stocker ce texte si variable est égale dollar signer ce point et pour obtenir ce texte hors de là nous avons juste besoin d'utiliser la méthode de texte comme ça kaso que log Vous avez cliqué sur nous texte qui est notre nom de variable et entrez.
Et maintenant, si je clique sur un que vous avez cliqué, ne cliquez pas sur moi, vous avez cliqué.
C'est votre dernier avertissement.
Et vous avez cliqué.
Sérieusement ne pas cliquer sur moi.
D'ACCORD.
C'est donc tout ce que je vais démontrer.
Cliquez.
Pour résumer, nous pouvons ajouter un écouteur à un élément à la fois comme nous l'avons fait pour le H-1.
Ou nous pouvons le faire à une collection qui est où il devient vraiment utile.
Et puis enfin si nous voulons faire référence à l'élément qui a été cliqué, nous avons besoin d'utiliser le signe dollar ce qui est l'enveloppe J queery le J.A.G. Version de la vanille.