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

2
00:00:01,470 --> 00:00:03,590
Nous avons donc une méthode de moins dont je veux parler.

3
00:00:03,740 --> 00:00:09,160
Comme je l'ai mentionné dans la vidéo d'introduction à J Corée événements la méthode on est ce que nous allons utiliser.

4
00:00:09,200 --> 00:00:13,980
Quatre-vingt-dix-neuf pour cent du temps, il est de loin la méthode la plus utilisée Jay queery événement.

5
00:00:14,280 --> 00:00:14,490
D'ACCORD.

6
00:00:14,490 --> 00:00:18,580
Alors parlons de la façon dont il fonctionne sur est très similaire à la vanille.

7
00:00:18,620 --> 00:00:20,790
Oui un auditeur d'événement.

8
00:00:20,790 --> 00:00:22,270
Évidemment, c'est beaucoup plus court.

9
00:00:22,290 --> 00:00:29,590
Il ne s'agit que de deux personnages mais il se comporte de la même façon que nous lui donnons le nom de l'événement que nous voulons l'écouter.

10
00:00:29,760 --> 00:00:58,760
Ainsi, contrairement au clic ou à la pression des touches, qui ne déclenchera qu'un seul type d'événement, un clic ou un appui sur les touches permet de spécifier si nous faisons un clic comme nous le faisons ici, soumettez sur clic ou si nous faisons un double clic Comme je l'ai ici bouton sur double clic ou un début glisser ou une pression sur les touches de sorte qu'il peut prendre la place de toutes les choses que vous avez déjà vu avec clic et appuyez sur les touches et toutes les autres méthodes ici.

11
00:00:58,870 --> 00:01:06,670
Il ya une tonne d'entre eux comme le défilement et soumettre et appuyez sur la touche de touche creeky up key down.

12
00:01:06,780 --> 00:01:10,410
Tout cela peut être fait avec juste la méthode on.

13
00:01:10,410 --> 00:01:15,480
Il fonctionne à peu près de la même manière cependant où nous devons sélectionner quelque chose avec le signe dollar d'abord.

14
00:01:15,870 --> 00:01:17,450
Donc je vais vous montrer un exemple ici.

15
00:01:17,730 --> 00:01:28,500
Nous sélectionnons quelque chose dans ce cas, tous les enseignants à l'intérieur du corps à l'intérieur de quelque chose avec l'idée de table de données et puis nous l'exécuter sur et puis le type de l'événement.

16
00:01:28,500 --> 00:01:33,740
Donc, c'est nouveau par rapport à cliquer et appuyez sur les touches qui ne prennent une fonction de rappel.

17
00:01:33,840 --> 00:01:36,560
Nous devons préciser quel événement nous écoutons.

18
00:01:36,750 --> 00:01:40,810
Donc cliquez dans ce cas et puis virgule la fonction de rappel.

19
00:01:40,830 --> 00:01:42,550
Nous voulons être dirigés.

20
00:01:42,660 --> 00:01:45,930
Alors essayons ceci pour rafraîchir ma page.

21
00:01:45,930 --> 00:01:47,100
Mon AJ a extrait la démo.

22
00:01:47,130 --> 00:01:51,390
Donc, nous n'avons pas d'auditeurs de clic, donc pas de clics, nous n'avons pas de touches pressées.

23
00:01:51,390 --> 00:01:53,350
Rien ne se passe sur nos boutons non plus.

24
00:01:53,760 --> 00:01:57,600
Allons essayer d'ajouter quelques auditeurs rapides d'abord.

25
00:01:57,630 --> 00:02:00,660
Changeons la couleur du H-1 lorsque nous cliquons dessus.

26
00:02:00,720 --> 00:02:13,570
Donc, nous devons sélectionner chacun d'eux et ensuite nous allons faire sur le premier argument est le type d'événement qui est rapide et puis notre fonction de rappel.

27
00:02:13,950 --> 00:02:31,260
Et à l'intérieur de la fonction de rappel si nous voulions changer la couleur de la H-1, nous pourrions faire quelque chose comme ça, où nous disons simplement H-1 gutsiest nous Color Purple et voir si vous pouvez penser pourquoi cela pourrait être un problème.

28
00:02:31,320 --> 00:02:44,700
Alors je vais frapper entrer et il fonctionne très bien il devient violet, mais je vais copier ce code et rafraîchir la page et je vais ajouter dans un autre H-1 trois d'entre eux et enregistrer.

29
00:02:44,790 --> 00:02:46,340
Maintenant nous avons trois H-1.

30
00:02:46,770 --> 00:02:55,160
Et si je lance ce code à nouveau, dit tout H-1 lorsque nous cliquons sur lui changer tous les h pour être violet.

31
00:02:55,200 --> 00:02:57,060
Alors je vais essayer.

32
00:02:57,090 --> 00:03:04,670
Ils changent tous en pourpre qui est peut-être une fonctionnalité que nous voulons, mais la plupart du temps, nous voulons affecter l'un élément que nous cliquons sur.

33
00:03:04,950 --> 00:03:14,790
Donc, pour ce faire, tous les rafraîchissements, nous devons utiliser le mot-clé this et n'oubliez pas qu'il doit être l'enveloppe de requête J pour cela.

34
00:03:14,790 --> 00:03:22,160
Donc, les parenthèses signes dollar cela et cela se réfère à la H-1 ou la seule chose qui a été cliqué sur.

35
00:03:22,180 --> 00:03:28,400
Et maintenant, si je frappe entrer et j'essaie de cliquer sur le correctif H-1 change en violet.

36
00:03:29,040 --> 00:03:31,770
OK, c'est ainsi que nous pouvons utiliser sur pour faire un clic.

37
00:03:31,770 --> 00:03:34,150
Maintenant, voyons comment l'utiliser pour une touche de presse.

38
00:03:34,290 --> 00:03:51,740
Nous allons donc sélectionner notre entrée comme ce point sur et puis nous ajouterons la pression des touches et le second argument est la fonction de rappel et nous allons simplement faire un simple compte de conses.

39
00:03:51,870 --> 00:03:59,170
Donc, annulez la touche de log appuyée juste comme ça et nous allons frapper entrer.

40
00:03:59,200 --> 00:04:06,540
Maintenant, si je vais dactylographier une clé ici je reçois qu'il appuyé chaque fois que je tape une clé.

41
00:04:06,540 --> 00:04:09,740
Essayons un autre type d'événement ici je vais rafraîchir.

42
00:04:10,080 --> 00:04:12,190
Faisons quelque chose quand on plane sur un bouton.

43
00:04:12,390 --> 00:04:15,770
Nous allons changer la police à être en gras lorsque je planer.

44
00:04:15,840 --> 00:04:21,670
Donc, nous devons d'abord sélectionner tous les boutons juste comme ça, puis ajouter notre sur.

45
00:04:21,880 --> 00:04:24,730
Et l'événement que nous allons utiliser est appelé Souris entrer.

46
00:04:24,930 --> 00:04:25,860
Juste comme ça.

47
00:04:26,280 --> 00:04:31,280
Et nous allons commencer par annuler la journalisation lorsque la souris entre.

48
00:04:31,290 --> 00:04:38,240
Donc, nous allons faire une souris de log intégré entrer comme ça.

49
00:04:38,610 --> 00:04:44,090
Et maintenant, si je me retourne, j'obtiens une souris entrer comme ça.

50
00:04:44,340 --> 00:04:46,420
Et ce n'est que lorsque nous entrons dans l'élément.

51
00:04:46,680 --> 00:04:50,300
Donc, il ne continue pas à déclencher encore et encore jusqu'à ce que je parte et de revenir.

52
00:04:50,750 --> 00:04:51,060
D'ACCORD.

53
00:04:51,060 --> 00:04:55,450
Donc quand nous faisons entrer la souris, nous ne vais pas vouloir constamment se connecter.

54
00:04:55,470 --> 00:05:04,140
Nous allons vouloir sélectionner le wrapper J très pour cela et faire le SS trop gras quelque chose dont nous avons besoin pour changer le poids de la police.

55
00:05:04,350 --> 00:05:13,020
Donc, des manières amusantes et nous allons faire ce pli juste comme ça et frapper entrer.

56
00:05:13,020 --> 00:05:18,310
Maintenant, si je flotte, il est difficile de voir ce qu'il change d'être audacieux.

57
00:05:18,390 --> 00:05:21,200
Bien sûr, il reste audacieux, il ne change jamais en arrière.

58
00:05:21,390 --> 00:05:32,040
Donc, nous pourrions ajouter cette fonctionnalité en faisant la même chose avec le bouton sur la souris laisser qui est un autre événement et puis plutôt que de le changer au poids de la police.

59
00:05:32,040 --> 00:05:32,670
Audacieux.

60
00:05:32,670 --> 00:05:36,800
Nous pouvons le changer normalement comme ça.

61
00:05:36,810 --> 00:05:40,420
Maintenant, si je le laisse revenir à la normale.

62
00:05:40,830 --> 00:05:43,530
Et si j'entre comme audacieux je laisse c'est normal.

63
00:05:43,950 --> 00:05:50,610
Donc, c'est la façon dont nous pourrions faire quelque chose avec javascript pour faire une sorte d'effet de sélection hover.

64
00:05:50,670 --> 00:05:57,490
Cependant, avec CSSA maintenant, nous pouvons facilement faire cela sans aucun javascript du tout avec le sélecteur pseudo hover.

65
00:05:57,490 --> 00:06:00,510
Et je voulais simplement démontrer qu'il y a d'autres événements là-bas.

66
00:06:00,720 --> 00:06:06,890
Donc, tous les événements que nous pourrions utiliser avec un écouteur d'événement que nous pouvons utiliser avec qui le rend vraiment vraiment utile.

67
00:06:06,990 --> 00:06:09,500
Comme je l'ai mentionné, nous allons l'utiliser tout le temps.

68
00:06:09,840 --> 00:06:14,690
Donc, il ya un dernier point que je voudrais faire à propos de et comme un exemple que je vais utiliser.

69
00:06:14,690 --> 00:06:16,440
Cliquez et sur.

70
00:06:16,440 --> 00:06:19,510
Cliquez et dites comment ils sont légèrement différents.

71
00:06:19,800 --> 00:06:22,230
Donc, ils les deux vont généralement travailler pour vous.

72
00:06:22,230 --> 00:06:31,590
Ils ajouteront un écouteur rapide mais il ya une petite différence qui est que le clic n'ajoutera que les écouteurs de clic pour les éléments qui sont sur la page à ce moment-là.

73
00:06:32,040 --> 00:06:37,790
Et le clic permet d'ajouter des auditeurs pour tous les éléments futurs ou des éléments futurs potentiels.

74
00:06:37,980 --> 00:06:40,430
Donc, cela fera sens lorsque vous faites la liste à faire.

75
00:06:40,530 --> 00:06:52,190
Mais fondamentalement, nous avons besoin d'utiliser le point sur le clic plutôt que de cliquer, car nous allons avoir à faire qui sont ajoutés à la page qui ne sont pas là quand la page charge un utilisateur tape dans un formulaire et les coups entrent.

76
00:06:52,260 --> 00:06:57,090
Et cela fera un nouveau à faire et nous voulons que les nouveaux à faire d'avoir leurs propres écouteurs clic.

77
00:06:57,090 --> 00:07:01,930
Donc, nous devons utiliser à nouveau qui aura plus de sens quand nous avons commencé à faire la liste.