1
00:00:00,380 --> 00:00:05,190
OK nous reviendrons la prochaine fonctionnalité que je veux aborder est le bouton X ici.

2
00:00:05,190 --> 00:00:14,060
Donc, lorsque nous cliquons sur ce X, il devrait en fait supprimer l'ensemble Pour le faire, pas seulement en grisé, mais il devrait effectivement disparaître et supprimer.

3
00:00:14,190 --> 00:00:16,530
Donc, il ressemble à ceci sur la version finale.

4
00:00:16,710 --> 00:00:24,890
Nous n'avons pas la même icône pour cliquer sur dans les mêmes couleurs ou l'animation, mais la fonctionnalité lorsque je clique sur quelque chose devrait être la même.

5
00:00:24,930 --> 00:00:28,100
Alors disons que je suis fait avec des plats.

6
00:00:28,440 --> 00:00:30,400
Il s'efface et disparaît.

7
00:00:30,450 --> 00:00:33,010
Et il n'est plus ici il est complètement disparu.

8
00:00:33,320 --> 00:00:34,250
D'ACCORD.

9
00:00:34,590 --> 00:00:39,350
La première chose que nous voulons faire est d'écouter un clic sur l'un de ces ex.

10
00:00:39,660 --> 00:00:45,460
Et à notre époque Tim, je me souviendrai que nous avons fait chacun un enchaînement afin que nous puissions facilement faire cela.

11
00:00:45,690 --> 00:00:54,140
Sinon, si nous avions juste un X dans le mensonge, il n'y a aucun moyen de déterminer si notre clic est sur le X ou si c'est sur le reste du chemin.

12
00:00:54,150 --> 00:01:00,680
Donc nous venons d'être là et maintenant nous irons à un javascript et ajoutons dans un autre commentaire.

13
00:01:00,960 --> 00:01:08,330
Cliquez sur X pour supprimer pour le faire, nous allons commencer par l'événement click.

14
00:01:08,760 --> 00:01:10,740
Donc signe dollar.

15
00:01:10,770 --> 00:01:35,200
Sélectionnez tout spand Et vous allez cliquer de nouveau et puis nous avons besoin d'une fonction de rappel et au lieu de notre rappel nous ferons simplement un autre clic sur une période juste comme ça et nous allons revenir rafraîchir, nous cliquons sur le mensonge rien ne se passe.

16
00:01:35,340 --> 00:01:39,840
Dès que nous cliquons sur la travée, nous obtenons une alerte indiquant que vous avez cliqué sur cette plage.

17
00:01:39,840 --> 00:01:52,690
Il ya un petit problème que vous n'avez peut-être pas remarqué quand je clique sur la portée et puis cliquez sur le X Je reçois l'alerte que je m'attends à obtenir, mais aussi payer une attention particulière que j'ai rejeté l'alerte.

18
00:01:53,190 --> 00:01:57,380
Nous obtenons également les styles qui proviennent de l'événement click.

19
00:01:57,840 --> 00:02:05,500
Donc, ce qui nous dit, c'est que l'événement de spam est de tir, puis après l'événement clic de ly est tir ainsi.

20
00:02:05,730 --> 00:02:11,480
Et cela fait sens parce que nos travées sont à l'intérieur des alliés.

21
00:02:11,730 --> 00:02:25,680
Donc quand nous cliquons sur une portée quand je clique sur cette étendue par exemple au milieu, nous allons l'inspecter, je clique sur cette portée, mais c'est l'espagnol aussi à l'intérieur de l'allié.

22
00:02:25,830 --> 00:02:29,370
Donc, d'un autre point de vue, je clique sur le mensonge.

23
00:02:29,620 --> 00:02:48,640
Mais d'un autre point de vue, je clique sur le puits parce que tous ceux-ci sont au lieu d'un UL ou sur le conteneur div ID ou sur le corps ou sur l'élément de l'équipe qu'un seul clic sur cette période est de passer à travers vous savez cinq ou six différents couches.

24
00:02:48,660 --> 00:02:55,790
Donc, quand nous ajoutons dans l'écouteur d'événement à la portée ou à l'allié ou si nous avions un écouteur d'événement et tous ceux que je vais vous montrer dès maintenant.

25
00:02:55,920 --> 00:03:07,990
Alors ajoutons un autre écouteur d'événement ici et celui-ci sera sur le testament et nous allons juste alerte cliqué sur UIL et fera un de plus.

26
00:03:08,280 --> 00:03:19,560
Et celui-ci sera sur le conteneur divx ID et cela va dire cliquez sur le conteneur div et effectivement le fera sur le corps ainsi.

27
00:03:19,560 --> 00:03:22,510
Et cela va dire cliquez sur le corps.

28
00:03:22,740 --> 00:03:23,410
D'ACCORD.

29
00:03:23,430 --> 00:03:30,510
Alors nous cliquons sur la portée qui est au lieu d'un allié au lieu d'un UL au lieu du conteneur à l'intérieur du corps.

30
00:03:30,510 --> 00:03:34,530
Maintenant, faisons attention lorsque nous rafraîchissons l'ordre dans lequel les choses se déclenchent.

31
00:03:34,590 --> 00:03:47,090
Donc d'abord, je clique sur la portée et il me dit cliqué sur la portée et puis je ne sais pas si vous avez remarqué, mais le feu d'événement clic bien, c'est comme ça que nous avons obtenu les styles là-bas.

32
00:03:47,340 --> 00:03:53,060
Et puis le bien cliquez événement puis le conteneur div et puis le corps enfin.

33
00:03:53,340 --> 00:03:56,980
Cet exemple illustre donc un phénomène appelé bubbling événement.

34
00:03:57,030 --> 00:04:02,290
Ce qui se passe est cet événement initialement est déclenché sur la portée et c'est où il provient.

35
00:04:02,400 --> 00:04:05,130
Mais alors il bulles en place dans deux éléments parents.

36
00:04:05,130 --> 00:04:20,830
Donc, il bulles dans le mensonge et il déclenchera tout comme les événements de clic et puis de là, il bulles jusqu'à la boîte pour le puits qui déclenchera tout événement bien cliquer et ainsi de suite jusqu'à ce qu'il touche l'élément HTL où il s'arrête pour empêcher la mensonge.

37
00:04:20,850 --> 00:04:25,840
Cliquez sur le gestionnaire de déclenchement lorsque nous cliquons sur la portée qui se trouve à l'intérieur de la Y.

38
00:04:25,860 --> 00:04:31,250
Ce que nous pouvons faire est de dire réellement l'événement à l'intérieur de la portée de ne pas bulle plus.

39
00:04:31,440 --> 00:04:36,920
Juste pour arrêter dans ses voies et ne pas déclencher d'autres événements sur l'élément parent.

40
00:04:37,050 --> 00:04:38,600
Donc je vais vous montrer ça ici.

41
00:04:38,960 --> 00:04:44,220
Tout ce que nous avons besoin de faire au lieu de cette audience rapide span que nous ajoutons dans l'objet événement.

42
00:04:44,220 --> 00:04:48,210
Et encore cela peut être appelé E événement T.

43
00:04:48,420 --> 00:04:51,720
Le nom que vous souhaitez le plus commun est event ou e.

44
00:04:51,900 --> 00:04:59,110
Et puis ce que nous allons faire est d'ajouter dans une méthode appelée la propagation d'arrêt d'événement.

45
00:04:59,790 --> 00:05:04,050
Et c'est une méthode de codage J qui empêchera l'événement de bouillonner.

46
00:05:04,050 --> 00:05:10,940
Donc, il va tirer sur la portée, mais il ne continuera pas sur l'auditeur comme ou l'un de ceux que nous avons pour cette question.

47
00:05:11,310 --> 00:05:13,620
Donc, si nous sauvegardons et rafraîchissons.

48
00:05:14,090 --> 00:05:20,210
Et maintenant je clique sur un span Je reçois toujours mon cliqué sur la portée et puis il s'arrête.

49
00:05:20,250 --> 00:05:26,970
Nous n'obtenons aucun de ces autres auditeurs que nous avions mis en place en tirant un autre que nous avons l'auditeur span configuré correctement.

50
00:05:27,060 --> 00:05:29,560
Remplissons-le avec le code correct.

51
00:05:29,940 --> 00:05:36,170
Ce que nous devions faire, c'est quand nous cliquons sur un span, je reviendrai au navigateur quand nous cliquons sur l'un de ceux-ci.

52
00:05:36,330 --> 00:05:44,460
Nous voulons supprimer ce mensonge afin que le mensonge qui le contient puisse se rafraîchir.

53
00:05:44,850 --> 00:05:58,810
Je clique sur cette période, il a besoin de supprimer ce mensonge et pour ce faire, nous pouvons commencer à partir de la portée en utilisant le signe dollar et si nous faisons juste des dollars sur ce supprimer ou fade out, mais nous allons commencer avec supprimer.

54
00:05:59,790 --> 00:06:01,780
Et nous y retournons.

55
00:06:02,190 --> 00:06:05,220
Tout ce qui arrive, c'est que la portée disparaît.

56
00:06:05,220 --> 00:06:08,020
Nous supprimons maintenant la portée.

57
00:06:08,130 --> 00:06:14,000
Nous avons besoin de supprimer l'élément inclus et Shakeri nous donne un moyen vraiment agréable et facile de le faire.

58
00:06:14,040 --> 00:06:24,120
Tout ce que nous avons à faire est d'écrire ces parents supprimer et qui nous donnera réellement l'élément parent comme un élément de requête.

59
00:06:24,120 --> 00:06:32,940
Donc, c'est une période que nous avons cliqué sur parent nous donne le mensonge supprimer supprimer l'allié tout.

60
00:06:33,120 --> 00:06:39,500
Alors maintenant, si je rafraîchis, vous pouvez le voir disparaître et rafraîchir à nouveau.

61
00:06:39,500 --> 00:06:47,500
Mais si je clique sur la mouche, il vérifie la dernière amélioration que nous pourrions faire est plutôt que de le supprimer immédiatement.

62
00:06:47,750 --> 00:06:48,770
Il s'est évanoui.

63
00:06:49,140 --> 00:06:59,510
Donc, nous allons faire un point fade out et commencer là revenir rafraîchir, nous cliquons et il disparaît.

64
00:07:00,090 --> 00:07:03,530
Mais n'oubliez pas que le montage ne l'enlève pas.

65
00:07:03,570 --> 00:07:10,810
Il est encore ici si nous inspectons au lieu de notre bien que nous avons encore trois à faire est juste deux d'entre eux ont afficher aucun.

66
00:07:11,130 --> 00:07:12,660
Et nous ne voulons pas que cela arrive.

67
00:07:12,660 --> 00:07:15,470
Imaginez que nous avions un millier à perdre que nous avions supprimé.

68
00:07:15,720 --> 00:07:20,240
Eh bien, nous ne voulons pas ralentir les choses en ayant un millier d'éléments cachés sur notre page.

69
00:07:20,250 --> 00:07:26,820
Donc ce que nous allons faire à la place est d'utiliser supprimer, mais rappelez-vous qu'il ne fonctionne pas juste pour ce faire.

70
00:07:26,820 --> 00:07:30,770
Il va l'enlever, mais il n'attendra pas le fondu pour terminer.

71
00:07:30,900 --> 00:07:51,580
Si nous voulons démontrer si rapidement que nous cliquons sur elle commence à s'estomper et puis immédiatement après il enlève si nous voulons que le fondu de finition de tout ce que nous avons besoin de faire est d'utiliser le rappel, nous pouvons passer à fadeout qui sera exécuté après.

72
00:07:51,690 --> 00:07:56,820
Et donnons-lui une durée ainsi disons cinq cents millisecondes pour commencer.

73
00:07:57,180 --> 00:08:00,680
Et puis quand il est fait, nous ne pouvons pas simplement appeler retirer sur ses propres.

74
00:08:00,720 --> 00:08:09,320
Nous devons l'appeler sur un élément et l'élément sur lequel nous voulons l'appeler est le même que nous remplissons afin que nous puissions utiliser un signe dollar.

75
00:08:09,420 --> 00:08:18,940
Ceci est important de noter que ce droit ici n'est pas le même signe de dollar ce droit ici.

76
00:08:19,470 --> 00:08:24,330
Alors passons à travers que c'est un peu compliqué quand nous cliquons sur un signe dollar espagnol.

77
00:08:24,330 --> 00:08:30,410
Cela se réfère à l'élément qui a été rapide sur la portée, mais alors nous faisons parent.

78
00:08:30,600 --> 00:08:37,720
Donc, maintenant, nous travaillons avec le mensonge qui englobe cette portée et puis nous faisons fadeout à la volée.

79
00:08:37,800 --> 00:08:43,080
Donc, au lieu de fade out cela se réfère au mensonge pas la portée.

80
00:08:43,590 --> 00:08:47,470
OK, nous allons enregistrer et revenir à rafraîchir.

81
00:08:47,730 --> 00:08:54,700
Maintenant, nous obtenons un fondu agréable et si nous inspectons l'UL, nous n'avons plus qu'une seule vie.

82
00:08:55,110 --> 00:08:57,600
Donc, il disparaît et puis supprime.

83
00:08:57,810 --> 00:08:59,610
Pour résumer tout ici.

84
00:08:59,610 --> 00:09:09,610
Le premier problème que nous avons rencontré était que nos événements de l'événement clic sur la portée a été effectivement déclencher l'événement à la volée ainsi après il a tiré la portée de celui-ci.

85
00:09:10,110 --> 00:09:15,540
Donc, pour fixer que nous avons utilisé l'événement qui arrêtent la propagation qui l'empêche de bouillonner à d'autres éléments.

86
00:09:15,780 --> 00:09:23,750
Et puis nous avons utilisé ce parent pour récupérer l'allié qui est entourant la portée qui a été cliqué sur et puis nous avons fané il.