1
00:00:00,260 --> 00:00:01,440
D'accord, nous reviendrons.

2
00:00:01,440 --> 00:00:06,810
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.

3
00:00:06,990 --> 00:00:11,790
Maintenant, nous allons présenter la dernière grande pièce manquante qui est des événements dans la requête J.

4
00:00:11,850 --> 00:00:13,700
Revenons donc à la vanille J.S ..

5
00:00:13,740 --> 00:00:17,780
Lorsque nous avons ajouté des écouteurs d'événements, nous avons utilisé une méthode appelée écouteur d'événements.

6
00:00:18,150 --> 00:00:22,230
Eh bien, il s'avère que Jay où il a une tonne de méthodes qui ont à voir avec les événements.

7
00:00:22,350 --> 00:00:28,190
Donc j'ai la section d'événement ouverte sur Jake où il peut y arriver en cliquant simplement sur les événements ici.

8
00:00:28,260 --> 00:00:32,720
Alors que je défile à travers ici, vous pouvez voir combien.

9
00:00:32,810 --> 00:00:37,210
Méthodes événement Coria il ya chikor il est livré avec une tonne d'entre eux.

10
00:00:37,230 --> 00:00:41,820
Donc ce que je vais faire est de mettre en évidence les trois plus importants que les trois que vous pouvez utiliser.

11
00:00:41,830 --> 00:00:49,190
Quatre-vingt-dix-neuf pour cent du temps, ces trois méthodes sont rapide touche presse et sur.

12
00:00:49,650 --> 00:00:53,010
Et j'ai dit que ces trois vous pourriez utiliser 99 p. 100 du temps.

13
00:00:53,160 --> 00:00:55,950
C'est en fait plus comme celui-ci ici.

14
00:00:55,950 --> 00:00:58,050
Vous pouvez utiliser 99 pour cent du temps.

15
00:00:58,110 --> 00:01:04,600
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.

16
00:01:05,130 --> 00:01:06,450
Alors, commençons.

17
00:01:06,450 --> 00:01:14,620
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.

18
00:01:14,730 --> 00:01:18,210
Donc vous pouvez voir que j'ai deux exemples dans ce cas.

19
00:01:18,210 --> 00:01:22,070
Je sélectionne quelque chose et puis ajouter un écouteur de clic avec un clic.

20
00:01:22,290 --> 00:01:26,070
Alors nous sélectionnons quelque chose avec l'idée de soumettre que nous courons.

21
00:01:26,100 --> 00:01:34,470
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é.

22
00:01:34,680 --> 00:01:37,400
Et parce que c'est un ID, il n'y en a qu'un sur la page.

23
00:01:37,530 --> 00:01:40,920
Donc, quand on clique sur un élément, ce code est exécuté.

24
00:01:41,340 --> 00:01:46,650
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.

25
00:01:46,650 --> 00:01:51,080
Il pourrait être de 10 boutons et j'ajoute un écouteur de clic à chacun d'eux.

26
00:01:51,120 --> 00:01:55,800
Donc, chaque fois qu'un bouton est rapide, il alertera quelqu'un, cliquez sur le bouton.

27
00:01:55,830 --> 00:01:56,760
Permettez-moi de le démontrer.

28
00:01:56,750 --> 00:02:03,480
Maintenant, j'ai une page HTL simple avec Jay queery inclus comme un CDN.

29
00:02:03,750 --> 00:02:10,730
Et je vais ajouter dans nous allons faire des événements de requête Jay et je vais ajouter en quelques boutons.

30
00:02:11,370 --> 00:02:15,240
Donc la première que je dis ne me corrige pas.

31
00:02:16,020 --> 00:02:21,230
Et puis le prochain dira sérieusement ok moi.

32
00:02:21,390 --> 00:02:27,690
Et le dernier dira que c'est ton dernier avertissement.

33
00:02:28,080 --> 00:02:36,300
Nous allons donc enregistrer et ouvrir ce dans le navigateur et toujours vérifier que J chargé.

34
00:02:38,320 --> 00:02:38,780
D'ACCORD.

35
00:02:38,850 --> 00:02:40,040
Cela semble bon.

36
00:02:40,650 --> 00:02:46,110
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.

37
00:02:46,110 --> 00:02:50,170
Donc nous devons juste choisir d'abord avec le signe dollar.

38
00:02:50,680 --> 00:02:55,610
Donc, celui qui nous donne le droit H-1 que seulement un et puis nous courons.

39
00:02:55,640 --> 00:03:03,670
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.

40
00:03:03,690 --> 00:03:24,940
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.

41
00:03:25,260 --> 00:03:27,900
Mais comme je l'ai dit les fonctions anonymes sont beaucoup plus communs.

42
00:03:28,200 --> 00:03:42,380
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.

43
00:03:42,630 --> 00:03:54,990
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.

44
00:03:54,990 --> 00:04:00,020
Maintenant, ce que je veux faire est de montrer comment nous pouvons ajouter un écouteur rapide à une collection d'éléments.

45
00:04:00,150 --> 00:04:02,530
Je vais donc sélectionner tous les boutons ici.

46
00:04:02,640 --> 00:04:14,050
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.

47
00:04:14,580 --> 00:04:27,130
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.

48
00:04:27,630 --> 00:04:35,470
Et maintenant, si je clique sur l'un de ces boutons là, nous allons cliquez sur le bouton cliqué sur le bouton Quitter.

49
00:04:35,490 --> 00:04:41,150
Revenez donc à vanilla javascript pour ajouter un écouteur d'événements à une collection de boutons.

50
00:04:41,190 --> 00:04:54,780
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.

51
00:04:54,870 --> 00:05:05,660
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é.

52
00:05:05,820 --> 00:05:10,940
Que faire si je voulais changer le style changer la couleur d'arrière-plan du bouton qui a été cliqué.

53
00:05:11,430 --> 00:05:13,970
Donc je devrais ajouter un écouteur de clic encore.

54
00:05:13,970 --> 00:05:16,780
Je suis juste à la flèche vers le haut et plutôt que d'alerter.

55
00:05:17,040 --> 00:05:30,290
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.

56
00:05:30,450 --> 00:05:36,090
Donc, la question est ce que nous appelons Dotsie CSSA et retour avec vanille javascript.

57
00:05:36,090 --> 00:05:37,360
Nous utiliserions cela.

58
00:05:37,380 --> 00:05:49,720
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.

59
00:05:49,950 --> 00:05:53,010
C'est toujours un peu une idée confuse.

60
00:05:53,010 --> 00:06:03,830
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.

61
00:06:03,840 --> 00:06:12,660
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.

62
00:06:12,660 --> 00:06:17,560
Alors tout simplement vieux c'est le javascript régulier vanille cela.

63
00:06:17,670 --> 00:06:21,440
Nous devons donc l'envelopper et lui dire que c'est la version de la requête J.

64
00:06:21,660 --> 00:06:23,190
Alors testons ça.

65
00:06:23,370 --> 00:06:32,460
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.

66
00:06:32,880 --> 00:06:40,280
Et puis l'arrière-plan change en rose et vous pouvez voir que cela arrivera à chacun que je clique.

67
00:06:40,440 --> 00:06:42,010
Nous pourrions aussi faire quelque chose comme ça.

68
00:06:42,030 --> 00:06:47,610
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.

69
00:06:47,670 --> 00:06:55,540
Nous pourrions également faire une annulation que le journal et l'adulte de Walcott enregistrent le texte du bouton qui a été cliqué.

70
00:06:55,650 --> 00:07:22,430
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.

71
00:07:22,920 --> 00:07:27,510
Et maintenant, si je clique sur un que vous avez cliqué, ne cliquez pas sur moi, vous avez cliqué.

72
00:07:27,540 --> 00:07:28,890
C'est votre dernier avertissement.

73
00:07:29,460 --> 00:07:30,360
Et vous avez cliqué.

74
00:07:30,420 --> 00:07:31,830
Sérieusement ne pas cliquer sur moi.

75
00:07:32,190 --> 00:07:32,640
D'ACCORD.

76
00:07:32,670 --> 00:07:33,930
C'est donc tout ce que je vais démontrer.

77
00:07:33,930 --> 00:07:34,650
Cliquez.

78
00:07:34,650 --> 00:07:39,520
Pour résumer, nous pouvons ajouter un écouteur à un élément à la fois comme nous l'avons fait pour le H-1.

79
00:07:39,780 --> 00:07:43,870
Ou nous pouvons le faire à une collection qui est où il devient vraiment utile.

80
00:07:43,890 --> 00:07:53,670
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.