1
00:00:00,210 --> 00:00:02,150
OK we zullen terugkomen.

2
00:00:02,400 --> 00:00:10,520
Terug in de inleiding tot javascript Ik heb gezegd dat een van de belangrijkste redenen voor het leren javascript is dat we het kunnen gebruiken om onze pagina's interactief te maken.

3
00:00:10,680 --> 00:00:17,920
Het is hoe we code kan worden uitgevoerd wanneer een gebruiker op een knop of typ iets in klikt of raakt de pijltjestoets of wat ze doen.

4
00:00:18,090 --> 00:00:24,880
We kunnen een aantal bijbehorende code die wordt uitgevoerd op een bepaald punt in de tijd niet alleen uitgevoerd aan het begin van de pagina hebben.

5
00:00:25,410 --> 00:00:28,290
Zo te doen dat we moeten praten over Dom evenementen.

6
00:00:28,320 --> 00:00:31,250
Dus deze video zal een inleiding tot Dom evenementen.

7
00:00:31,260 --> 00:00:36,300
Conceptueel het proces voor het instellen van hen en dan ook de syntax.

8
00:00:36,300 --> 00:00:38,660
Dus zoals ik al zei gebeurtenissen zijn overal.

9
00:00:38,670 --> 00:00:47,330
Denk na over wanneer je interactie met de webpagina van de verschillende dingen die gebeuren kunt u klikken op dingen zoals een knop kunt u de muisaanwijzer over een link en iets zouden kunnen opduiken.

10
00:00:47,370 --> 00:00:50,320
U kunt slepen en neerzetten elementen op bepaalde pagina's.

11
00:00:50,550 --> 00:00:56,650
Je zou willen code die loopt van de gebruiker dubbel klikken of eigenlijk deze webpagina heeft een paar voorbeelden te hebben.

12
00:00:56,670 --> 00:01:03,550
Deze dia dot com is een website en ik ben het raken van de linker en rechter pijltjestoetsen om dia's te veranderen.

13
00:01:03,690 --> 00:01:10,050
Dus sommige code wordt uitgevoerd wanneer ik de pijl naar links-toets of de pijl-rechts of wanneer ik klik dan hier geraakt.

14
00:01:10,590 --> 00:01:16,860
Dat is ook een evenement en het is iets te doen dat het draaien van een code die is het veranderen van de huidige dia.

15
00:01:16,950 --> 00:01:20,930
Dus het punt is gebeurtenissen zijn allemaal over de plaats en ze zijn echt spannend.

16
00:01:20,920 --> 00:01:35,070
Het is een van mijn favoriete onderwerpen om les te geven, want nu kunnen we onze webpagina's interactief kunnen we de manipulatie dingen die we hebben geleerd over het wijzigen van kleuren veranderende tekst en dan kunnen we eigenlijk doen dat als er iets gebeurt in het bijzonder te nemen te maken.

17
00:01:35,070 --> 00:01:38,340
Dus dit ontsluit echt het potentieel van het manipuleren van de slaapzaal.

18
00:01:38,370 --> 00:01:49,050
Het is hoe we gaan om games te maken het is hoe wij zorgen vorm validators Tic Tac Toe we gaan naar een echt cool kleur picker spel te maken en dat alles komt voort uit deze gebeurtenissen.

19
00:01:49,050 --> 00:02:07,590
Dus de manier waarop deze gebeurtenissen werken is dat we ze eigenlijk koppelen aan specifieke elementen, zodat we een element als de eerste knop of het tweede H-1 of de ingang, waar een soort gelijk is aan tekst en selecteer vervolgens hechten wij een evenement luisteraar dat geselecteerde element.

20
00:02:07,920 --> 00:02:21,990
Dus als voorbeeld we misschien luisteren voor een druk op de knop kunnen we luisteren naar een hover evenement op een H1 we voor belangrijke persevenement in een tekstinvoer kunnen luisteren en we zullen meer te praten over de verschillen tussen deze gebeurtenissen.

21
00:02:21,990 --> 00:02:30,170
Er zijn zoveel verschillende soorten evenementen in javascript, maar wat belangrijk is, is dat we een evenement dat wordt geluisterd op een bepaald element hebben.

22
00:02:30,180 --> 00:02:34,890
Dus net als vroeger, toen ik zou praten over selecteren en vervolgens te manipuleren dat nog steeds van toepassing.

23
00:02:34,920 --> 00:02:43,740
We moeten iets en vervolgens de manipulatie dat gebeurt, zijn wij het toevoegen van een evenement luisteraar dat ding dat we geselecteerd.

24
00:02:43,740 --> 00:02:49,400
Er is een methode in het bijzonder dat we gaan de hele tijd die add gebeurtenislistener wordt genoemd gebruiken.

25
00:02:49,650 --> 00:03:03,070
Dus op event listener is wat we ooit gebruiken selecteren we een element als de eerste toets of de input type omdat wachtwoord en we hebben iets vervolgens geselecteerd noemen we voegen event listener op en we geven twee argumenten.

26
00:03:03,330 --> 00:03:06,950
De eerste is de aard van de gebeurtenis die we willen voor luisteren.

27
00:03:07,350 --> 00:03:12,790
En het tweede argument is de code die we willen lopen wanneer die gebeurtenis gebeurt.

28
00:03:13,260 --> 00:03:14,330
Dus hier is een voorbeeld.

29
00:03:14,400 --> 00:03:22,060
Ik ben het selecteren van de eerste knop op een pagina maakt eigenlijk niet uit waar de knop is of hoe het eruit ziet of wat dan zomaar een knop.

30
00:03:22,350 --> 00:03:30,540
En dan ga ik bellen knop event listener klikken en vervolgens het tweede argument is een functie die de hele weg gaat naar hier.

31
00:03:30,750 --> 00:03:33,690
En deze code is niet juist weg te lopen.

32
00:03:33,690 --> 00:03:35,910
onthoud dit heet een callback.

33
00:03:35,910 --> 00:03:38,140
Deze code is niet onmiddellijk uit te voeren.

34
00:03:38,430 --> 00:03:42,000
Het is alleen worden uitgevoerd zodra dit evenement branden.

35
00:03:42,000 --> 00:03:46,390
Dus als je eenmaal op de knop javascript gaat erin terugbelt.

36
00:03:46,440 --> 00:03:51,630
Deze functie zegt hey, het is jouw moment om te schitteren en hier terug te komen klaar laten uitvoeren jou.

37
00:03:51,630 --> 00:03:56,040
En dan is dat code wordt uitgevoerd en we worden geadviseerd niet te loggen iemand klikt u op de knop.

38
00:03:56,250 --> 00:04:05,290
Dus deze functie zal uitgevoerd wanneer een knop is snel te overreden met de specifieke knop die we geselecteerd als geklikt.

39
00:04:05,910 --> 00:04:07,540
Dus hier is een ander voorbeeld.

40
00:04:07,830 --> 00:04:26,910
Dit geval heb ik de mark hier een knop en een paragraaf en ik kozen beiden met Kery selector en ik spaar ze allebei aan variabelen en dan alles wat we doen is het toevoegen van een klik luisteraar dus knop voegt event listener klikken en dan is de Het tweede argument is dat de callback functie.

41
00:04:26,910 --> 00:04:42,260
En wat we gaan doen wanneer die knop wordt geklikt de paragrafen tekstinhoud te zijn iemand op de knop verandert en je kunt zien wanneer ik op die knop verandert van niemand me geklikt en naar iemand op de knop.

42
00:04:42,930 --> 00:04:50,790
Dus nu ga ik snel een demonstratie doen met behulp van onze Dom demo pagina laten we beginnen met het maken van deze H-1 hier.

43
00:04:50,810 --> 00:04:53,700
Veranderen van kleur wanneer een gebruiker erop klikt.

44
00:04:53,780 --> 00:04:58,310
Dus om dat te doen moeten we altijd beginnen met de H-1 selecteren.

45
00:04:58,810 --> 00:05:00,510
Dus hebben we een heleboel opties er zijn.

46
00:05:00,530 --> 00:05:09,070
Ik ga gewoon gebruik maken van queery selector document die vraag selector H-1 ervoor zorgen dat we het hebben.

47
00:05:09,310 --> 00:05:10,460
Okee.

48
00:05:10,460 --> 00:05:14,920
Dan gaan we gewoon schrijven H-1 dat event listener toe te voegen.

49
00:05:15,010 --> 00:05:16,790
Vergeet niet dat er twee argumenten.

50
00:05:16,940 --> 00:05:19,910
De eerste is het geval dat we luisteren naar.

51
00:05:20,060 --> 00:05:24,050
En we zullen wat meer tijd besteden aan het praten over de verschillende gebeurtenissen van de verschillende opties.

52
00:05:24,050 --> 00:05:30,050
Voor nu zijn we gewoon te doen klik en de tweede is de code die we willen worden uitgevoerd wanneer de gebruiker klikt.

53
00:05:30,310 --> 00:05:37,060
Dus functie en gewoon beginnen heel simpel en gewoon doen een waarschuwing wanneer de gebruiker klikt.

54
00:05:37,160 --> 00:05:44,330
Dus we een waarschuwing ieder werd geklikt net als dit te doen.

55
00:05:44,750 --> 00:05:46,990
En laten we nu druk op enter.

56
00:05:47,120 --> 00:05:48,700
Niets verandert meteen.

57
00:05:49,190 --> 00:05:52,910
Maar nu, als ik aan de ene klik dus ik zal deze sluiten.

58
00:05:52,910 --> 00:05:54,570
Als ik op een willekeurige plaats op de pagina.

59
00:05:54,590 --> 00:05:56,400
Afgezien van de H-1 niets gebeurt.

60
00:05:56,620 --> 00:06:01,150
Zodra ik op de H-1 hoewel het me vertelt H-1 correct was.

61
00:06:01,430 --> 00:06:02,510
Dus dat is belangrijk.

62
00:06:02,500 --> 00:06:15,290
Dit geldt alleen voor de H-1, maar dat betekent niet dat ik kan hier gaan en klik op, want herinneren wanneer ik inspecteren dit de H-1 gaat helemaal over het scherm.

63
00:06:15,500 --> 00:06:30,190
Dus gewoon iets om in gedachten dat is prima voor ons in dit geval te houden, maar het zal pop-up af en toe waar de dingen zich een beetje anders dan wanneer je ze zou willen en wat je nodig hebt om ze te gebruiken CSSA misschien aan de eerste fase in te korten of je verandert uw luisteraar toch.

64
00:06:30,640 --> 00:06:35,130
Dus in plaats van alleen maar te waarschuwen Laten we proberen iets anders te doen.

65
00:06:35,330 --> 00:06:54,260
En als ik gewoon op de pijl omhoog een add event listener klik en ik verander de code in hier en ik doe iets als H-1, die stijl achtergrond gelijken en laten we het doen oranje oranje achtergrond en ik druk op enter.

66
00:06:54,250 --> 00:07:06,030
Opnieuw verandert er niets meteen maar wanneer ik op aandacht te besteden aan wat er gebeurt de eerste wat er gebeurt is dat het nog steeds zegt in een waarschuwing dat de H-1 is geklikt.

67
00:07:06,170 --> 00:07:10,360
En toen ik sluit dat het verandert dan oranje te zijn.

68
00:07:10,730 --> 00:07:14,840
Dus de moraal hier is dat we meer dan een luisteraar op een bepaald element kan hebben.

69
00:07:14,840 --> 00:07:28,890
Als we op dat H-1 de eerste luisteraar die we hebben toegevoegd luisterde voor een klik en het liep een waarschuwing en dan hebben we voegde een andere luisteraar achteraf dat ook geluisterd voor een klik, maar het veranderde de achtergrondkleur.

70
00:07:28,910 --> 00:07:31,200
Dus als ik klik beiden lopen.

71
00:07:31,390 --> 00:07:42,190
En dat is altijd gaat gebeuren voor nu als ik weer klik krijg ik de waarschuwing en zijn veranderd in oranje natuurlijk je niet zien dat, want het was al oranje, maar je moet me vertrouwen.

72
00:07:42,290 --> 00:07:45,000
Het houdt het veranderen van oranje over en over en voorbij.

73
00:07:45,670 --> 00:07:48,560
OK, ik ga ik om te vernieuwen en zich te ontdoen van dat alles.

74
00:07:48,590 --> 00:07:52,720
Ik wil ook een korte demonstratie te doen door het toevoegen van een luisteraar aan de UL.

75
00:07:52,880 --> 00:08:04,300
Dus laten we doen een document dump vraag selector UL en herinner me dat we hebben drie bondgenoten in plaats van slechts één ul.

76
00:08:04,490 --> 00:08:08,500
Dus ik ga je laten zien wat er gebeurt als we zetten het op een bovenliggende element als dat.

77
00:08:08,510 --> 00:08:11,850
Goed en ik ben niet van plan om een ​​variabele gebruiken gewoon om dit hier te doen.

78
00:08:12,130 --> 00:08:14,640
Onvermurwbaar luisteraar.

79
00:08:15,250 --> 00:08:16,140
Klik.

80
00:08:16,550 --> 00:08:17,930
Dus dat is het eerste argument.

81
00:08:17,930 --> 00:08:25,560
De tweede is de functie die we willen lopen, net als dit.

82
00:08:25,880 --> 00:08:27,410
En ik ga om te beginnen.

83
00:08:27,680 --> 00:08:35,720
Laten we gewoon een console die goed was clicks te loggen en je weet wat.

84
00:08:35,810 --> 00:08:37,210
Dat is de passieve stem.

85
00:08:37,250 --> 00:08:38,050
Slecht idee.

86
00:08:38,300 --> 00:08:39,270
Laten we doen.

87
00:08:39,460 --> 00:08:43,550
Je klikte op de UL nog veel beter.

88
00:08:43,880 --> 00:08:44,520
OK.

89
00:08:44,720 --> 00:08:48,430
Dus laten we houden de console open en laten we klik op de UL.

90
00:08:48,980 --> 00:08:50,420
Maar hoe zouden we op de olie.

91
00:08:50,450 --> 00:08:53,090
Omdat de put heeft drie bondgenoten erin.

92
00:08:53,120 --> 00:08:55,290
De UL is dit hele ding hier.

93
00:08:55,320 --> 00:09:00,890
Dus geen quick maakt niet uit welke bondgenoot ik op zomaar ergens in de put.

94
00:09:01,040 --> 00:09:02,820
U kunt zien dat het aantal oplopende hier.

95
00:09:02,930 --> 00:09:07,150
Eventuele snel op de goed het gaat om deze console dot log uit te voeren.

96
00:09:08,120 --> 00:09:14,290
Dus laten we nog een keer te vernieuwen en deze keer laten we zeggen dat ik wil de bondgenoot zelf te veranderen.

97
00:09:14,300 --> 00:09:17,540
Wanneer ik klik op een individuele bondgenoot Ik wil dat er iets gebeurt.

98
00:09:17,960 --> 00:09:19,400
Er zijn een paar manieren om dat te doen.

99
00:09:19,420 --> 00:09:26,360
En we gaan beginnen met alleen de eenvoudigste is het bevestigen van een luisteraar iedere bondgenoot als een heads-up.

100
00:09:26,360 --> 00:09:32,940
Wat we uiteindelijk doen is het bevestigen van een luisteraar aan de UL en dan de binnenkant van die luisteraar.

101
00:09:32,990 --> 00:09:39,250
We gaan om te detecteren die specifiek liggen in de UB op alle werd geklikt met één Lessner.

102
00:09:39,250 --> 00:09:55,570
Voor nu al gaan we een aparte listener toegevoegd aan elke leugen, dus we moeten om te beginnen door de geallieerden te selecteren, zodat onze bondgenoten gelijk document dot queery selector alle bondgenoot zorgt ervoor dat we hebben ze allemaal.

103
00:09:55,570 --> 00:09:59,040
Oké dan moeten we doen een lus.

104
00:09:59,210 --> 00:10:02,190
Dus voor var ik gelijk is aan nul.

105
00:10:02,410 --> 00:10:04,880
Vergeet niet dat ik zei dat we zouden moeten doen dit de hele tijd.

106
00:10:04,880 --> 00:10:14,740
Dus ik minder dan bondgenoten die lengte ik plus plus, net als dat.

107
00:10:15,050 --> 00:10:20,600
En dan de binnenkant van hier zijn we eigenlijk aan de hand van een luisteraar toe te voegen aan elke individuele bondgenoot.

108
00:10:20,840 --> 00:10:21,940
Dus dat ziet er zo uit.

109
00:10:21,960 --> 00:10:39,220
Elyse ik dus dat geeft ons de specifieke bondgenoot en event listener Click-functie, net als dat en gedaan dit een beetje.

110
00:10:39,770 --> 00:10:41,920
En dan is de code die we willen uitvoeren.

111
00:10:42,320 --> 00:10:49,250
Laten we de kleur van de bondgenoot die werd geklikt op en laten we gewoon veranderen paars te zijn.

112
00:10:49,250 --> 00:10:51,250
Dus hebben we een paar verschillende opties.

113
00:10:51,290 --> 00:10:54,600
Wat ik moet doen is verwijzen naar de bondgenoot die werd geklikt.

114
00:10:54,800 --> 00:11:05,320
Dus kon ik deze bondgenoten doe ik al dat is niet echt een geweldige oplossing, want er is er een veel gemakkelijkere manier om dat te doen wat dit zoekwoord te gebruiken.

115
00:11:05,680 --> 00:11:23,100
Dus binnenkant van een luisteraar het sleutelwoord dit verwijst naar het item dat is geklikt op of het item dat werd zweefde op of het item dat de druk op de toets vond plaats in waar het element dat gaat recht vóór het evenement, ongeacht wat er ook gekozen is er wat dit verwijst naar.

116
00:11:23,140 --> 00:11:30,640
Dus kan ik dit dot stijl die kleur gelijk paarse schrijven.

117
00:11:31,000 --> 00:11:33,140
En eigenlijk is dat is iets meer voor de hand.

118
00:11:33,230 --> 00:11:34,150
Het is een klein lettertype.

119
00:11:34,150 --> 00:11:36,670
Dus laten we het doen roze, net als dat.

120
00:11:37,040 --> 00:11:38,500
Ik druk op enter.

121
00:11:38,500 --> 00:11:46,020
Er gebeurt niets onmiddellijk, maar als ik op een bondgenoot klikt kunt u zien dat het verandert roze te zijn.

122
00:11:47,410 --> 00:11:53,960
En als ik blijf klikken blijven veranderen aan u roze kan het gewoon niet vertellen.

123
00:11:54,080 --> 00:12:03,670
Dus dit patroon hier het selecteren van een hoop dingen doorlussen hen individueel en het toevoegen van een event listener voor elk van hen is echt heel vaak voor.

124
00:12:03,710 --> 00:12:11,170
We gaan om het te zien de hele tijd in de komende projecten die we maken.

125
00:12:11,270 --> 00:12:20,830
Het laatste wat ik zal hier te vermelden is dat je niet altijd een anonieme functie, zoals we hier deden waar je functie met haakjes te schrijven en je niet geef het een naam te gebruiken.

126
00:12:20,990 --> 00:12:22,330
Je hoeft niet om dat te doen.

127
00:12:22,370 --> 00:12:25,790
U kunt een benoemde functie apart zoals ik deed hier verklaren.

128
00:12:26,090 --> 00:12:33,890
Functieverandering tekst en dan is alles wat we moeten doen is zeggen knop die event listener toe te voegen of klik en dan geven we deze tekst te wijzigen.

129
00:12:34,070 --> 00:12:39,890
Merk op dat we haakjes niet achteraf hebben omdat ik de functie zou onmiddellijk uit te voeren dat is niet wat we willen.

130
00:12:40,180 --> 00:12:51,100
Dus we gewoon het passeren van de waarde van deze functie zijn we de inhoud in principe doorgeven aan deze snelle luisteraar en hier zeg, is de functie Ik wil dat je te lopen wanneer de gebruiker op deze knop klikt.

131
00:12:51,190 --> 00:12:52,810
Maar doe het niet gewoon nog niet uitgevoerd.

132
00:12:52,820 --> 00:12:55,350
Dus deze twee zullen precies hetzelfde werk.

133
00:12:55,370 --> 00:12:57,030
Het is gewoon een kwestie van voorkeur.

134
00:12:57,190 --> 00:13:00,830
Voor het grootste deel zijn er enige verschillen die we later tegenkomen.

135
00:13:00,880 --> 00:13:02,980
Ik zou veel liever om dit te gebruiken.

136
00:13:03,230 --> 00:13:10,160
De enige keer dat ik niet een anonieme functie zou gebruiken is als ik nodig had om die code opnieuw ergens anders te gebruiken buiten de klok luisteraar.

137
00:13:10,150 --> 00:13:22,600
Dus als ik wilde het individueel lopen mijzelf of ik wilde het in plaats draaien van een andere snelle luisteraar in plaats van het dupliceren van deze functie zou ik geef het een naam en vervolgens dupliceren alleen de naam, waar ik het twee keer.

138
00:13:23,060 --> 00:13:30,650
OK dus de volgende op te gaan om een ​​kans om een ​​aantal snelle oefeningen met snelle Wisner en een aantal van de dingen die we hebben geleerd in de laatste paar video's te doen.