1
00:00:00,510 --> 00:00:01,810
Bon retour.

2
00:00:01,860 --> 00:00:15,640
Dans cette vidéo, je voudrais parler un peu plus de certains types d'événements jusqu'à présent, nous avons rencontré l'événement de clic et l'événement de changement que nous avons utilisé sur une saisie de texte ou une entrée de numéro dans l'application de gestionnaire de score.

3
00:00:15,780 --> 00:00:18,930
Je vais commencer par l'introduction de la référence de l'événement M.B.A.

4
00:00:18,930 --> 00:00:20,720
C'est la page web sur laquelle je suis ici.

5
00:00:20,940 --> 00:00:26,790
Et cette page Web est une référence à tous les différents événements qui sont reconnus par l'API DOM.

6
00:00:26,910 --> 00:00:30,840
Et si nous défilons vers le bas, vous pourriez être surpris de combien il ya.

7
00:00:31,260 --> 00:00:41,040
Et je vais effectivement vous avoir dans l'exercice suivant écrire un code juste pour compter combien il ya est un amusant exemple pratique d'utiliser la géométrie des ..

8
00:00:41,310 --> 00:01:04,780
Donc, vous allez compter combien il y en a, mais pour l'instant il suffit de savoir qu'il ya une tonne d'entre eux et il ya probablement cinq ou six peut-être jusqu'à 10 très commun qui utilisent tout le temps choses comme pour glisser-déposer pour Un évènement de survol cliquez sur les événements peut-être double clics événements clés de presse, mais sinon beaucoup de ceux plus obscurs n'utiliseront jamais ou peut-être vous les utiliserez une fois dans un projet.

9
00:01:05,190 --> 00:01:10,510
Mais il est bon de savoir que cette page Web existe qu'il y a tant d'événements que nous n'utiliserons peut-être jamais.

10
00:01:10,740 --> 00:01:16,980
Et cette vidéo, je vais me concentrer sur deux événements en particulier qui a à voir avec planer donc planant sur un élément avec votre souris.

11
00:01:17,100 --> 00:01:20,490
Et ceux-ci sont appelés la souris sur et souris dehors.

12
00:01:20,790 --> 00:01:31,910
Donc, j'ai une application simple et je vais faire appel à faire que l'âge de lui dans mon nouveau fichier et je vais simplement ajouter mon régulière plaquette et ce ne va pas être une liste complète des tâches.

13
00:01:31,920 --> 00:01:37,950
Nous ne serons pas en mesure d'ajouter de nouvelles ou que nous allons faire est d'avoir une UL avec trois ou quatre alliés.

14
00:01:38,070 --> 00:01:51,060
Des choses comme le chat de chat de lavage nourrissent et nous ferons le chat d'alimentation au chien et sauver.

15
00:01:51,060 --> 00:01:54,340
Donc, nous avons nos trois à faire et c'est tout ce dont nous avons besoin pour l'instant.

16
00:01:54,630 --> 00:01:55,530
Et ce que je veux faire.

17
00:01:55,530 --> 00:01:58,590
Je vais ouvrir ceci dans le navigateur.

18
00:01:58,590 --> 00:02:05,190
Je veux être en mesure de cliquer et qui devrait gris sur l'élément à faire et peut-être barré, il a mis une ligne à travers elle.

19
00:02:05,340 --> 00:02:09,250
Mais je veux aussi être en mesure de vol stationnaire et je veux savoir à qui je suis survoler.

20
00:02:09,270 --> 00:02:12,960
Donc, je reçois cette rétroaction utilisateur agréable que je survoler l'un de ces.

21
00:02:12,960 --> 00:02:21,640
Peut-être que vous l'aurez changer de couleur ou gras commencera par juste le rendre vert et il ya tant d'effets agréables que vous pouvez faire pour votre utilisateur en utilisant ces événements survoler.

22
00:02:21,810 --> 00:02:26,870
Donc, je vais montrer que dès maintenant, avant que nous puissions réellement écrire n'importe quel javascript, même si nous devons faire notre fichier.

23
00:02:26,940 --> 00:02:31,010
Donc, je vais enregistrer un nouveau fichier et je vais l'appeler à faire.

24
00:02:31,180 --> 00:02:32,200
Oui.

25
00:02:32,520 --> 00:02:51,520
Et comme toujours, j'avais mon alerte connecté sauver revenir ici et ajouter dans notre script en bas et notre source est égale à la parodie J.S. Et nous allons enregistrer ou actualiser et nous obtenons notre alerte.

26
00:02:51,630 --> 00:02:53,190
Cela signifie que ça marche.

27
00:02:53,850 --> 00:03:00,100
Allons-y à ce premier événement que j'ai mentionné et la première chose que nous devons faire est de sélectionner quelque chose avant que nous puissions manipuler.

28
00:03:00,120 --> 00:03:03,050
Donc je vais commencer par le faire juste pour le premier mensonge.

29
00:03:03,180 --> 00:03:19,560
Donc, je vais utiliser var premier allié document ECOs et je vais faire un sélecteur de requête allié et rappelez-vous cela me donne le premier mensonge parce que je n'ai pas fait un sélecteur de requête tous et puis je vais ajouter mon écouteur d'événement À la première alliée.

30
00:03:19,740 --> 00:03:30,060
Donc, nous sommes allés en premier ally ajouter l'écouteur d'événement et l'événement que nous sommes à l'écoute pour n'est pas cliquer, c'est la souris sur.

31
00:03:30,060 --> 00:03:32,350
Et puis nous donnons notre fonction de rappel.

32
00:03:33,300 --> 00:03:38,650
Et la façon dont mouseover fonctionne, il va feu dès que nous commençons à planer sur quelque chose.

33
00:03:38,790 --> 00:03:47,880
Donc, si je travaillais avec ce dernier allié ma souris sur elle allait tirer en ce moment et en ce moment et la seconde et en ce moment et ce premier.

34
00:03:47,880 --> 00:03:50,760
Il s'agit donc de savoir quand le vol stationnaire commence.

35
00:03:50,910 --> 00:04:06,950
Donc, d'abord, j'ajouterais l'écouteur d'événement mouseover et nous allons juste faire un journal au lieu d'une souris de rappel sur et si nous rafraîchissons ouvrir notre console se souvenir que nous l'avons fait seulement pour le premier allié et là nous allons nous obtenons un mouseover.

36
00:04:07,080 --> 00:04:11,610
Aussi, il est important de noter que ce n'est pas continuellement tir chaque fois.

37
00:04:11,660 --> 00:04:16,050
Vous savez que nous sommes sur ce que c'est quand notre planer sur un élément commence réellement.

38
00:04:16,080 --> 00:04:21,770
Donc, c'est utile pour que nous ne sommes pas constamment vous savez constamment l'enregistrement ou quel que soit le code que nous avons dans le rappel.

39
00:04:21,780 --> 00:04:24,530
Cela ne se produit que lorsque nous souris au début.

40
00:04:24,900 --> 00:04:29,660
Donc, plutôt que d'annuler simplement que l'exploitation forestière travaillons sur le changement de la couleur de l'allié.

41
00:04:29,670 --> 00:04:30,640
Faisons-le vert.

42
00:04:30,720 --> 00:04:32,880
Donc, quand vous planifiez, il devient vert.

43
00:04:32,880 --> 00:04:50,800
Donc nous avons besoin de faire le premier style de point d'allié que la couleur est égale au vert et nous économisons rafraîchir et maintenant regarder je vais le rendre un peu plus grand et faire un peu plus grand ici et rafraîchir que je commence ma souris sur elle devient verte.

44
00:04:51,240 --> 00:04:55,300
Et puis quand je m'en vais, il reste vert ce qui n'est pas ce que nous voulons.

45
00:04:55,410 --> 00:04:57,110
Nous voulons simplement que ce soit un effet de vol stationnaire.

46
00:04:57,150 --> 00:04:59,460
Donc quand je flotte au-dessus de l'allié, il devient vert.

47
00:04:59,490 --> 00:05:07,380
Mais quand je l'arrête, il devient noir pour faire que nous avons réellement besoin d'un autre événement et que l'événement sera le feu lorsque notre survol est terminée.

48
00:05:07,410 --> 00:05:13,940
Donc, quand on laisse cet élément et il est appelé la souris, donc nous allons faire la même chose première alliée.

49
00:05:14,090 --> 00:05:18,280
Mais à l'événement Lessner souris.

50
00:05:19,680 --> 00:05:27,960
Et puis notre fonction de rappel et nous allons juste faire une première couleur d'attaque de style mouche et le remettre en noir.

51
00:05:28,080 --> 00:05:39,590
Juste comme ça et si nous rafraîchissons vous pouvez voir qu'il va vert et puis la souris sort retourne au noir et la souris sur un vert et ainsi de suite.

52
00:05:40,020 --> 00:05:46,960
Donc, maintenant, nous obtenons ce petit effet de vol stationnaire qui nous montre ce que nous sommes planer sur fondamentalement qui à faire est sélectionné.

53
00:05:46,950 --> 00:05:50,130
Alors maintenant, allons-y pour que tout se passe.

54
00:05:50,160 --> 00:05:52,230
Ce sont quelques petits changements que nous devons faire.

55
00:05:52,260 --> 00:05:55,460
Et le premier d'entre eux est que nous devons sélectionner tous les alliés.

56
00:05:55,510 --> 00:06:05,070
Allez changer très variable pour être loin se trouve documenté requêtes lettre tous les alliés afin que nous donne une liste avec les trois alliés.

57
00:06:05,400 --> 00:06:11,170
Et puis bien sûr, malheureusement, nous ne pouvons pas simplement faire ce mensonge que l'auditeur d'un événement qui ne fonctionne pas.

58
00:06:11,160 --> 00:06:14,860
Nous avons besoin de faire une boucle for de quatre de nos égaux zéro.

59
00:06:15,090 --> 00:06:18,950
Moi, c'est moins que ce lien.

60
00:06:19,080 --> 00:06:20,710
Plus plus.

61
00:06:20,870 --> 00:06:30,990
Et nous espérons que vous commencez à vous sentir un peu plus à l'aise en ajoutant des événements ou en manipulant quelque chose au lieu d'une boucle où nous sélectionnons un groupe d'entre eux, puis nous faisons une boucle et nous faisons quelque chose individuellement.

62
00:06:31,180 --> 00:06:36,470
Comme je l'ai dit il ya quelques vidéos vraiment très fréquent modèle vraiment important que nous commençons à être à l'aise avec elle.

63
00:06:36,490 --> 00:06:40,550
Donc, à l'intérieur d'ici plutôt que de faire d'abord d'autre, j'ajouterais l'écouteur d'événement.

64
00:06:40,650 --> 00:06:45,760
Nous travaillons avec les yeux des alliés, c'est donc notre allié individuel.

65
00:06:45,930 --> 00:06:51,950
Et puis je vais juste copier ce code et il ya un problème avec ce code.

66
00:06:51,960 --> 00:06:55,090
Je veux dire qu'il fonctionnera, mais il ne fonctionnera pas de la façon dont nous le voulons.

67
00:06:55,360 --> 00:07:00,450
Ce qui se passera est que nous ajoutons un écouteur d'événement à chaque allié allié.

68
00:07:00,960 --> 00:07:06,430
Mais quand nous souris sur n'importe lequel d'entre eux nous ne changeons que le premier style de point d'allié de couleur noire.

69
00:07:06,540 --> 00:07:09,800
Et en fait il ne fonctionnera pas parce que le premier mensonge n'est plus défini.

70
00:07:09,810 --> 00:07:10,860
Nous avons changé le nom.

71
00:07:11,040 --> 00:07:12,740
Mais ce n'est pas ce que nous voulions de toute façon.

72
00:07:12,750 --> 00:07:17,220
Nous voulons qu'il soit l'allié qui a été survolé au cours de la souris sur événement survenu sur.

73
00:07:17,440 --> 00:07:21,110
Donc nous pouvons changer cela au mot ceci.

74
00:07:21,270 --> 00:07:28,020
N'oubliez pas que le mot-clé this au lieu d'un écouteur d'événement fait référence à l'élément ou à l'élément sur lequel l'événement a été déclenché.

75
00:07:28,260 --> 00:07:33,210
Donc, ce style, mais l'écran de couleur égale et puis nous allons juste dupliquer ce code à nouveau.

76
00:07:33,850 --> 00:07:48,780
Mais au lieu de passer la souris sur nous allons faire une souris et au lieu d'aller à Green nous allons revenir en noir et puis nous pouvons nous débarrasser de ce et rafraîchir et nous y allons.

77
00:07:48,880 --> 00:07:50,710
Nous avons notre petit effet flotteur agréable.

78
00:07:51,060 --> 00:07:56,210
Donc, la dernière chose qu'ils vont parler est d'ajouter un écouteur de clic juste pour rendre cela un peu plus complet.

79
00:07:56,230 --> 00:08:07,150
Donc, même chose que je pensais avait l'écouteur d'événement cliquez ajouter ou une fonction de rappel.

80
00:08:07,480 --> 00:08:10,610
Et ce que nous allons faire ici, c'est d'utiliser une classe.

81
00:08:10,830 --> 00:08:12,910
Donc, je vais juste ajouter la classe d'abord.

82
00:08:12,900 --> 00:08:20,290
Il n'existe pas, mais je vais dire que cela fait la liste des classes et va faire basculer la liste de début de la classe qui bascule.

83
00:08:20,560 --> 00:08:22,680
Et nous allons simplement appeler la classe fait.

84
00:08:23,110 --> 00:08:29,930
Donc, le point est que je peux cliquer sur un de ces et il devrait gris et avoir un effet de barré.

85
00:08:30,030 --> 00:08:38,720
Et même si je n'ai pas une classe fait défini, il est encore ajouté afin que je puisse vous montrer que ouvrir la console et nous allons inspecter l'un de ces.

86
00:08:39,070 --> 00:08:48,470
Et puis nous allons en fait cliquer dessus et vous pouvez voir ou cliquer sur le premier que vous pouvez voir par la façon dont la couleur verte et noire changeant ici comme un vol stationnaire.

87
00:08:48,490 --> 00:08:52,920
Mais comme je clique sur ce premier vous pouvez le voir ajoute la classe fait.

88
00:08:52,920 --> 00:08:55,740
Et puis je clique de nouveau et il disparaît.

89
00:08:55,750 --> 00:08:58,070
Alors maintenant, il suffit de définir la classe.

90
00:08:58,330 --> 00:08:59,290
Alors, faisons-le maintenant.

91
00:08:59,380 --> 00:09:10,310
Je vais passer à sublime et faire un nouveau fichier et je vais enregistrer ce que faire est que C Ss et la première chose que nous faisons est de définir notre classe fait.

92
00:09:10,950 --> 00:09:24,450
Et je vais lui donner un effet barré que nous faisons avec la décoration de texte et nous avons mis cette ligne à travers et aussi modifier l'opacité de sorte opacité sera 0,5 et enregistrer.

93
00:09:24,820 --> 00:09:33,990
Et puis bien sûr, vous avez besoin de lier ce à faire commencer à évaluer ou vieilli lui fichier avec eux comme étiquette à Due gutsiest nous et nous pouvons économiser.

94
00:09:34,000 --> 00:09:35,440
Maintenant, testons-le.

95
00:09:35,660 --> 00:09:36,830
Vous actualisez la page.

96
00:09:36,850 --> 00:09:37,470
Je flotte.

97
00:09:37,500 --> 00:09:41,520
Donc obtenir sont deux événements de changer la couleur noir et vert.

98
00:09:41,520 --> 00:09:45,360
Et maintenant je peux cliquer et nous obtenons un effet de barré.

99
00:09:45,540 --> 00:09:47,900
Et cette ligne aussi.

100
00:09:48,120 --> 00:09:56,590
Il ya quelques petits changements que je ferais Cependant, si nous revenons à notre fichier javascript le premier est plutôt que de changer la couleur manuellement ici.

101
00:09:56,640 --> 00:09:58,350
Le changer pour être vert et noir.

102
00:09:58,600 --> 00:10:00,800
Je pense qu'il est encore mieux de le faire avec notre propre classe.

103
00:10:00,850 --> 00:10:12,060
Donc, je vais faire une nouvelle classe et je vais appeler celui-ci sélectionné et puis je vais dire quand il est sélectionné texte ou la couleur doit être vert juste comme ça.

104
00:10:12,310 --> 00:10:13,880
Et puis nous allons avec le Javascript.

105
00:10:13,990 --> 00:10:21,250
Et quand nous souris sur tout ce que nous voulons faire est de dire cette liste de classe ajouter sélectionné.

106
00:10:23,160 --> 00:10:38,170
Et cela revient à cette idée de séparation des préoccupations où nous ne voulons pas que notre javascript manipule des styles individuels plutôt que nous pouvons utiliser javascript pour activer des parties de notre C Ss et le SAS sera effectivement en charge du style.

107
00:10:38,460 --> 00:10:55,040
Donc, cela va lui donner la classe choisie lorsque nous survolons et quand nous quittons ou quand nous gâcher nous ferons cette liste de classe muette supprimer sélectionné et si nous économisons rafraîchir, vous pouvez le voir, il semble très bon.

108
00:10:55,530 --> 00:10:59,460
Nous cliquons sur nous pour obtenir notre barré.

109
00:11:00,080 --> 00:11:00,590
D'accord.

110
00:11:00,610 --> 00:11:02,260
Il y a une petite liste de choses à faire.

111
00:11:02,740 --> 00:11:05,000
C'est donc une façon un peu plus agréable de le faire.

112
00:11:05,050 --> 00:11:06,390
Fonctionnellement il ressemble le même.

113
00:11:06,420 --> 00:11:11,720
C'est juste une meilleure pratique d'utiliser des classes plutôt que d'ajouter et de peaufiner les styles un à la fois.

114
00:11:11,740 --> 00:11:16,270
Pour résumer ici, nous avons vu deux nouveaux événements mouseover et souris out.