1
00:00:00,510 --> 00:00:01,810
Oké welkom terug.

2
00:00:01,860 --> 00:00:15,640
In deze video wil ik een beetje meer te praten over een aantal van de verschillende soorten evenementen tot nu toe hebben we in aanraking met de click gebeurtenis en de verandering gebeurtenis die we gebruikt op een tekstinvoer of invoeren van een nummer in de score keeper app.

3
00:00:15,780 --> 00:00:18,930
Ik ga om te beginnen door de invoering van de M.B.A. evenement referentie.

4
00:00:18,930 --> 00:00:20,720
Dus dat is de webpagina ik ben op hier.

5
00:00:20,940 --> 00:00:26,790
En deze webpagina is een verwijzing naar de verschillende evenementen die door de DOM API worden erkend.

6
00:00:26,910 --> 00:00:30,840
En als we naar beneden scrollen u misschien verbaasd zijn hoeveel er zijn.

7
00:00:31,260 --> 00:00:41,040
En ik ben eigenlijk ga je in de volgende oefening te schrijven wat code alleen maar om te tellen hoeveel het er zijn is een leuke praktisch voorbeeld van het gebruik van de geometrie van cons ..

8
00:00:41,310 --> 00:01:04,780
Dus je gaat tellen hoeveel het er zijn, maar voor nu weet gewoon dat er een ton van hen en zijn er waarschijnlijk vijf of zes misschien tot 10 echt voorkomende dat de hele tijd dingen zoals zult gebruiken voor drag-and-drop voor een zwevende evenement klikgebeurtenissen misschien dubbel klikken toetsdruk gebeurtenissen maar verder een groot deel van de meer obscure degenen die nooit zal gebruiken of misschien heb je ze een keer gebruiken in een project.

9
00:01:05,190 --> 00:01:10,510
Maar het is goed om te weten dat deze webpagina bestaat dat er zo vele evenementen die we misschien zelfs nog nooit te gebruiken.

10
00:01:10,740 --> 00:01:16,980
En deze video ga ik om zich te concentreren op twee evenement in het bijzonder dat te maken heeft met zweefde zo zweefde over een element met de muis.

11
00:01:17,100 --> 00:01:20,490
En die worden genoemd de muis over en muis uit.

12
00:01:20,790 --> 00:01:31,910
Dus ik heb een eenvoudige toepassing en ik ga maken het heet hem die leeftijd doen in mijn nieuwe dossier en ik ga gewoon mijn gewone standaardtekst toe te voegen en dit is niet van plan om een ​​complete takenlijst te zijn.

13
00:01:31,920 --> 00:01:37,950
We zullen niet in staat zijn om het toevoegen van nieuwe of dat we gaan doen is een UL met drie of vier bondgenoten.

14
00:01:38,070 --> 00:01:51,060
Dingen zoals wassen kat voeden kat en we zullen voeden kat doen om de hond en op te slaan.

15
00:01:51,060 --> 00:01:54,340
Dus hebben we onze drie to do's en dat is alles wat we nodig hebben voor nu.

16
00:01:54,630 --> 00:01:55,530
En wat ik wil doen.

17
00:01:55,530 --> 00:01:58,590
Ik ga dit openen in de browser.

18
00:01:58,590 --> 00:02:05,190
Ik wil in staat zijn om te klikken en dat zou grijs uit het te doen punt en misschien doorhalen het te zetten een streep erdoor.

19
00:02:05,340 --> 00:02:09,250
Maar ik wil ook in staat zijn om te zweven en ik wil weten welke ik zweefde over.

20
00:02:09,270 --> 00:02:12,960
Dus ik krijg deze leuke feedback van gebruikers zoals ik de muisaanwijzer over een van deze.

21
00:02:12,960 --> 00:02:21,640
Misschien moet u deze van kleur veranderen of vet zal starten door gewoon waardoor het groen en er zijn zo veel leuke effecten die u kunt doen voor uw gebruikers met behulp van deze hover events.

22
00:02:21,810 --> 00:02:26,870
Dus ik zal laten zien dat op dit moment, voordat we kunnen eigenlijk geen javascript schrijven hoewel we nodig hebben om ons bestand te maken.

23
00:02:26,940 --> 00:02:31,010
Dus ik ga een nieuw bestand op te slaan en ik noem het to do's.

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

25
00:02:32,520 --> 00:02:51,520
En zoals altijd had ik mijn alert verbonden save gaan hier terug en aan onze manuscript bij de bodem en onze bron is gelijk aan de deuce dot J.S. en wij zullen op te slaan of te vernieuwen en wij krijgen onze alert.

26
00:02:51,630 --> 00:02:53,190
Dat betekent dat het werkt.

27
00:02:53,850 --> 00:03:00,100
Laten we gaan op die eerste gebeurtenis die ik noemde en het eerste wat we moeten doen is kiezen iets voordat we kunnen manipuleren.

28
00:03:00,120 --> 00:03:03,050
Dus ik ga om te beginnen door gewoon te doen om de eerste leugen.

29
00:03:03,180 --> 00:03:19,560
Dus ik ga var eerste bondgenoot ECO document te gebruiken en ik zal een vraag selector bondgenoot te doen en onthoud dit geeft me de eerste leugen, omdat ik niet een query selector helemaal niet te doen en dan ga ik naar mijn evenement luisteraar toe te voegen eerst bondgenoot.

30
00:03:19,740 --> 00:03:30,060
Dus gingen we voor het eerst bondgenoot voegen event luisteraar en de gebeurtenis die we luisteren naar wordt niet klikt het is de muis over.

31
00:03:30,060 --> 00:03:32,350
En dan geven we onze callback functie.

32
00:03:33,300 --> 00:03:38,650
En de manier waarop mouseover werkt het gaat om zo snel te vuren als we beginnen te zweven over iets.

33
00:03:38,790 --> 00:03:47,880
Dus als ik deze laatste bondgenoot de tweede en op dit moment en dit eerste werkte mijn muis over het op dit ogenblik zou ontslaan en nu en.

34
00:03:47,880 --> 00:03:50,760
Dus het is over wanneer de Hover begint.

35
00:03:50,910 --> 00:04:06,950
Dus in de eerste plaats zou ik gebeurtenislistener mouseover toe te voegen en we zullen gewoon een log in plaats van een callback muis over en als we vernieuwen openstellen onze console herinneren we deden het alleen de eerste bondgenoot en daar gaan we krijgen we een mouseover.

36
00:04:07,080 --> 00:04:11,610
Ook is het belangrijk op te merken dat het niet voortdurend afvuren elke keer weer.

37
00:04:11,660 --> 00:04:16,050
Je weet dat we meer dan dit is het wanneer onze hover over een element daadwerkelijk begint.

38
00:04:16,080 --> 00:04:21,770
Dus dat is handig, zodat we niet constant je weet voortdurend te loggen of wat de code is dat we in de callback.

39
00:04:21,780 --> 00:04:24,530
Het gebeurt alleen wanneer we de muis over in eerste instantie.

40
00:04:24,900 --> 00:04:29,660
Dus in plaats van alleen maar werk dat houtkap laten we annuleren op het veranderen van de kleur van de bondgenoot.

41
00:04:29,670 --> 00:04:30,640
Laten we het groen.

42
00:04:30,720 --> 00:04:32,880
Dus als u de muisaanwijzer over deze groen wordt.

43
00:04:32,880 --> 00:04:50,800
Dus moeten we eerst bondgenoot dot stijl die kleur gelijk is aan groen te doen en we besparen refresh en nu kijk ik hem een ​​beetje groter te maken en dit een beetje groter hier en verfrissen als ik mijn muis beginnen deze groen wordt.

44
00:04:51,240 --> 00:04:55,300
En toen ik weg te gaan blijft het groen dat is niet wat we willen.

45
00:04:55,410 --> 00:04:57,110
We willen gewoon dat dit een hover effect.

46
00:04:57,150 --> 00:04:59,460
Dus toen ik de muisaanwijzer op de bondgenoot blijkt groen.

47
00:04:59,490 --> 00:05:07,380
Maar toen ik stoppen met het gaat terug naar zijn zwarte te doen dat we eigenlijk een andere gebeurtenis en die gebeurtenis wordt geactiveerd wanneer onze zweven voorbij is nodig.

48
00:05:07,410 --> 00:05:13,940
Dus als we vertrekken dit element en het is uit de naam Mouse dus we gaan om hetzelfde eerste bondgenoot te doen.

49
00:05:14,090 --> 00:05:18,280
Maar op event Lessner muis uit.

50
00:05:19,680 --> 00:05:27,960
En dan is onze callback functie en we zullen gewoon een eerste fly stijl aanval kleur en zet het terug naar zwart.

51
00:05:28,080 --> 00:05:39,590
Net als dat en als we frissen je kunt zien groen gaat en vervolgens de muis uit gaat terug naar zwart en muis over een groen en ga zo maar door.

52
00:05:40,020 --> 00:05:46,960
Dus nu krijgen we dit kleine hover effect dat ons laat zien wat we zweefde over eigenlijk om te doen is geselecteerd.

53
00:05:46,950 --> 00:05:50,130
Dus nu laten we dit te laten werken voor elke leugen.

54
00:05:50,160 --> 00:05:52,230
Het is slechts een paar kleine veranderingen die we moeten doen.

55
00:05:52,260 --> 00:05:55,460
En de eerste van hen is dat we nodig hebben om alle bondgenoten te selecteren.

56
00:05:55,510 --> 00:06:05,070
Gaan zeer variabel veranderen ver leugens gedocumenteerd queries letter zijn alle bondgenoten dus dat geeft ons een lijst met de drie bondgenoten.

57
00:06:05,400 --> 00:06:11,170
En dan natuurlijk helaas kunnen we niet gewoon doen hiervoor ligt dat een gebeurtenis luisteraar dat niet werkt.

58
00:06:11,160 --> 00:06:14,860
We moeten een doen lus vier van onze gelijken nul.

59
00:06:15,090 --> 00:06:18,950
I minder dan ligt die link.

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

61
00:06:20,870 --> 00:06:30,990
En hopelijk je begint te voelen een beetje meer comfortabel om dit te doen het toevoegen van gebeurtenissen of iets in plaats van een lus, waar we een heleboel van hen te selecteren het manipuleren en dan hebben we doorlopen en we iets te doen individueel.

62
00:06:31,180 --> 00:06:36,470
Zoals ik al zei een paar video's geleden echt gemeenschappelijk patroon echt belangrijk dat we beginnen om comfortabel mee te krijgen.

63
00:06:36,490 --> 00:06:40,550
Dus de binnenkant van hier in plaats van het doen van eerste wat ik zou event listener toe te voegen.

64
00:06:40,650 --> 00:06:45,760
We werken samen met bondgenoten beugel ogen dus dat is onze individuele bondgenoot.

65
00:06:45,930 --> 00:06:51,950
En dan ga ik om alleen deze code te kopiëren en er is een probleem met deze code.

66
00:06:51,960 --> 00:06:55,090
Ik bedoel, het zal werken, maar het zal niet werken op de manier die we willen dat het.

67
00:06:55,360 --> 00:07:00,450
Wat zal gebeuren is dat we het toevoegen van een event listener aan elke bondgenoot bondgenoten.

68
00:07:00,960 --> 00:07:06,430
Maar als we de muis over een van hen dat we alleen het veranderen van de eerste bondgenoot dot stijl zwart gekleurd.

69
00:07:06,540 --> 00:07:09,800
En eigenlijk zal het niet werken omdat eerste leugen niet meer is gedefinieerd.

70
00:07:09,810 --> 00:07:10,860
We veranderden de naam.

71
00:07:11,040 --> 00:07:12,740
Maar dat is niet wat we wilden anyways.

72
00:07:12,750 --> 00:07:17,220
We willen dat de bondgenoot die werd zweefde over dat met de muis over gebeurtenis heeft plaatsgevonden op zijn.

73
00:07:17,440 --> 00:07:21,110
Dus we kunnen veranderen om het woord dit.

74
00:07:21,270 --> 00:07:28,020
Vergeet niet dat het sleutelwoord dit in plaats van een event listener verwijst naar het item of het element dat de gebeurtenis is opgetreden op.

75
00:07:28,260 --> 00:07:33,210
Dus deze stijl, maar gekleurd gelijke scherm en dan gaan we gewoon opnieuw dupliceren van deze code.

76
00:07:33,850 --> 00:07:48,780
Maar in plaats van de muis over we een muis zullen doen naar buiten en in plaats van naar Green we komen terug naar zwart te gaan en dan kunnen we ontdoen van deze en verfrissen en daar gaan we.

77
00:07:48,880 --> 00:07:50,710
We hebben onze leuke hover effect.

78
00:07:51,060 --> 00:07:56,210
Dus het laatste wat ze zullen praten over is het toevoegen van een klik luisteraar alleen maar om dit een beetje meer compleet te maken.

79
00:07:56,230 --> 00:08:07,150
Dus hetzelfde als ik had gedacht event listener klik toe te voegen of een callback functie.

80
00:08:07,480 --> 00:08:10,610
En wat we hier gaan doen is gebruik maken van een klasse.

81
00:08:10,830 --> 00:08:12,910
Dus ga ik voeg gewoon de klasse eerste.

82
00:08:12,900 --> 00:08:20,290
Het bestaat niet, maar ik ga zeggen dat dit doet klasse lijst en zal doen schakelt het begin klasse lijst die te schakelen.

83
00:08:20,560 --> 00:08:22,680
En we zullen gewoon bellen met de klas gedaan.

84
00:08:23,110 --> 00:08:29,930
Dus het punt is dat ik kan klikken op een van deze en het moet Gray naar buiten en hebben een doorhaling effect.

85
00:08:30,030 --> 00:08:38,720
En hoewel ik niet heb een klasse gedaan gedefinieerd het nog toegevoegd, zodat ik je dat het openstellen van de console kan laten zien en laten inspecteren een van deze.

86
00:08:39,070 --> 00:08:48,470
En dan laten we eigenlijk klik erop en je kunt zien of klik op de eerste die je kan zien door de manier waarop de kleur groen en zwart overgang hier als een hover.

87
00:08:48,490 --> 00:08:52,920
Maar toen ik op deze eerste klik je kunt zien het voegt klasse gedaan.

88
00:08:52,920 --> 00:08:55,740
En klik ik opnieuw en het gaat weg.

89
00:08:55,750 --> 00:08:58,070
Dus nu moeten we gewoon de klas gedaan definiëren.

90
00:08:58,330 --> 00:08:59,290
Dus laten we dat nu doen.

91
00:08:59,380 --> 00:09:10,310
Ik ga over te gaan naar subliem en maak een nieuw bestand en ik ga dit op te slaan als te doen is dat C Ss en het eerste wat we doen is definiëren onze klasse gedaan.

92
00:09:10,950 --> 00:09:24,450
En ik ga het een doorhaling effect dat we doen met de tekst decoratie geven en stellen we die lijn door en ook de dekking veranderen, zodat de dekking zal zijn 0,5 en op te slaan.

93
00:09:24,820 --> 00:09:33,990
En dan natuurlijk moet je koppelen deze aan hoeft te beginnen na te gaan of hem bestand met hen als tag naar Due's gutsiest ons jaar en we kunnen redden.

94
00:09:34,000 --> 00:09:35,440
Laten we nu eens testen het uit.

95
00:09:35,660 --> 00:09:36,830
U Vernieuw de pagina.

96
00:09:36,850 --> 00:09:37,470
Ik zweven.

97
00:09:37,500 --> 00:09:41,520
Dus maak je er twee gebeurtenissen het veranderen van de kleur zwart en groen.

98
00:09:41,520 --> 00:09:45,360
En nu kan ik klikken en krijgen we een doorhaling effect.

99
00:09:45,540 --> 00:09:47,900
En deze lijn door ook.

100
00:09:48,120 --> 00:09:56,590
Er zijn een paar kleine veranderingen die ik zou echter te maken als we terug gaan naar onze javascript dossier van de eerste is in plaats van het veranderen van de kleur hier handmatig.

101
00:09:56,640 --> 00:09:58,350
Het veranderen van het aan groen en zwart zijn.

102
00:09:58,600 --> 00:10:00,800
Ik denk dat het nog steeds beter om het te doen met onze eigen klasse.

103
00:10:00,850 --> 00:10:12,060
Dus ik ga een nieuwe klasse te maken en ik ga dit ene gekozen bellen en dan ga ik om te zeggen wanneer het de geselecteerde tekst of de kleur groen, net als dat zou moeten zijn.

104
00:10:12,310 --> 00:10:13,880
En dan gaan we met de Javascript.

105
00:10:13,990 --> 00:10:21,250
En als we de muis over alles wat we willen doen, is zeggen dat deze klasse lijst toe te voegen geselecteerd.

106
00:10:23,160 --> 00:10:38,170
En dit komt terug naar die scheiding van bekommernissen idee waar we willen niet dat onze javascript manipuleert individuele stijlen in plaats kunnen we javascript gebruiken op delen van onze C Ss en de SAS aan te zetten daadwerkelijk worden belast met de styling.

107
00:10:38,460 --> 00:10:55,040
Zodat het de klas gekozen zal geven wanneer we zweven boven en als we vertrekken of wanneer we puinhoop zullen we dit doen domme klasse lijst te verwijderen geselecteerd en als we besparen vernieuwen je kunt zien het ziet er goed uit.

108
00:10:55,530 --> 00:10:59,460
We klikken we onze doorgehaald.

109
00:11:00,080 --> 00:11:00,590
Okee.

110
00:11:00,610 --> 00:11:02,260
Er is een kleine to do list.

111
00:11:02,740 --> 00:11:05,000
Dus dit is een iets leukere manier is om het te doen.

112
00:11:05,050 --> 00:11:06,390
Functioneel het ziet er hetzelfde.

113
00:11:06,420 --> 00:11:11,720
Het is gewoon een betere praktijk om lessen te gebruiken in plaats van toe te voegen en het afstellen van stijlen een voor een.

114
00:11:11,740 --> 00:11:16,270
Dus kort samengevat hier zagen we twee nieuwe evenementen mouseover en muis uit.