OK we zullen terugkomen.
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.
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.
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.
Zo te doen dat we moeten praten over Dom evenementen.
Dus deze video zal een inleiding tot Dom evenementen.
Conceptueel het proces voor het instellen van hen en dan ook de syntax.
Dus zoals ik al zei gebeurtenissen zijn overal.
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.
U kunt slepen en neerzetten elementen op bepaalde pagina's.
Je zou willen code die loopt van de gebruiker dubbel klikken of eigenlijk deze webpagina heeft een paar voorbeelden te hebben.
Deze dia dot com is een website en ik ben het raken van de linker en rechter pijltjestoetsen om dia's te veranderen.
Dus sommige code wordt uitgevoerd wanneer ik de pijl naar links-toets of de pijl-rechts of wanneer ik klik dan hier geraakt.
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.
Dus het punt is gebeurtenissen zijn allemaal over de plaats en ze zijn echt spannend.
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.
Dus dit ontsluit echt het potentieel van het manipuleren van de slaapzaal.
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.
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.
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.
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.
Dus net als vroeger, toen ik zou praten over selecteren en vervolgens te manipuleren dat nog steeds van toepassing.
We moeten iets en vervolgens de manipulatie dat gebeurt, zijn wij het toevoegen van een evenement luisteraar dat ding dat we geselecteerd.
Er is een methode in het bijzonder dat we gaan de hele tijd die add gebeurtenislistener wordt genoemd gebruiken.
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.
De eerste is de aard van de gebeurtenis die we willen voor luisteren.
En het tweede argument is de code die we willen lopen wanneer die gebeurtenis gebeurt.
Dus hier is een voorbeeld.
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.
En dan ga ik bellen knop event listener klikken en vervolgens het tweede argument is een functie die de hele weg gaat naar hier.
En deze code is niet juist weg te lopen.
onthoud dit heet een callback.
Deze code is niet onmiddellijk uit te voeren.
Het is alleen worden uitgevoerd zodra dit evenement branden.
Dus als je eenmaal op de knop javascript gaat erin terugbelt.
Deze functie zegt hey, het is jouw moment om te schitteren en hier terug te komen klaar laten uitvoeren jou.
En dan is dat code wordt uitgevoerd en we worden geadviseerd niet te loggen iemand klikt u op de knop.
Dus deze functie zal uitgevoerd wanneer een knop is snel te overreden met de specifieke knop die we geselecteerd als geklikt.
Dus hier is een ander voorbeeld.
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.
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.
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.
Veranderen van kleur wanneer een gebruiker erop klikt.
Dus om dat te doen moeten we altijd beginnen met de H-1 selecteren.
Dus hebben we een heleboel opties er zijn.
Ik ga gewoon gebruik maken van queery selector document die vraag selector H-1 ervoor zorgen dat we het hebben.
Okee.
Dan gaan we gewoon schrijven H-1 dat event listener toe te voegen.
Vergeet niet dat er twee argumenten.
De eerste is het geval dat we luisteren naar.
En we zullen wat meer tijd besteden aan het praten over de verschillende gebeurtenissen van de verschillende opties.
Voor nu zijn we gewoon te doen klik en de tweede is de code die we willen worden uitgevoerd wanneer de gebruiker klikt.
Dus functie en gewoon beginnen heel simpel en gewoon doen een waarschuwing wanneer de gebruiker klikt.
Dus we een waarschuwing ieder werd geklikt net als dit te doen.
En laten we nu druk op enter.
Niets verandert meteen.
Maar nu, als ik aan de ene klik dus ik zal deze sluiten.
Als ik op een willekeurige plaats op de pagina.
Afgezien van de H-1 niets gebeurt.
Zodra ik op de H-1 hoewel het me vertelt H-1 correct was.
Dus dat is belangrijk.
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.
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.
Dus in plaats van alleen maar te waarschuwen Laten we proberen iets anders te doen.
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.
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.
En toen ik sluit dat het verandert dan oranje te zijn.
Dus de moraal hier is dat we meer dan een luisteraar op een bepaald element kan hebben.
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.
Dus als ik klik beiden lopen.
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.
Het houdt het veranderen van oranje over en over en voorbij.
OK, ik ga ik om te vernieuwen en zich te ontdoen van dat alles.
Ik wil ook een korte demonstratie te doen door het toevoegen van een luisteraar aan de UL.
Dus laten we doen een document dump vraag selector UL en herinner me dat we hebben drie bondgenoten in plaats van slechts één ul.
Dus ik ga je laten zien wat er gebeurt als we zetten het op een bovenliggende element als dat.
Goed en ik ben niet van plan om een ​​variabele gebruiken gewoon om dit hier te doen.
Onvermurwbaar luisteraar.
Klik.
Dus dat is het eerste argument.
De tweede is de functie die we willen lopen, net als dit.
En ik ga om te beginnen.
Laten we gewoon een console die goed was clicks te loggen en je weet wat.
Dat is de passieve stem.
Slecht idee.
Laten we doen.
Je klikte op de UL nog veel beter.
OK.
Dus laten we houden de console open en laten we klik op de UL.
Maar hoe zouden we op de olie.
Omdat de put heeft drie bondgenoten erin.
De UL is dit hele ding hier.
Dus geen quick maakt niet uit welke bondgenoot ik op zomaar ergens in de put.
U kunt zien dat het aantal oplopende hier.
Eventuele snel op de goed het gaat om deze console dot log uit te voeren.
Dus laten we nog een keer te vernieuwen en deze keer laten we zeggen dat ik wil de bondgenoot zelf te veranderen.
Wanneer ik klik op een individuele bondgenoot Ik wil dat er iets gebeurt.
Er zijn een paar manieren om dat te doen.
En we gaan beginnen met alleen de eenvoudigste is het bevestigen van een luisteraar iedere bondgenoot als een heads-up.
Wat we uiteindelijk doen is het bevestigen van een luisteraar aan de UL en dan de binnenkant van die luisteraar.
We gaan om te detecteren die specifiek liggen in de UB op alle werd geklikt met één Lessner.
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.
Oké dan moeten we doen een lus.
Dus voor var ik gelijk is aan nul.
Vergeet niet dat ik zei dat we zouden moeten doen dit de hele tijd.
Dus ik minder dan bondgenoten die lengte ik plus plus, net als dat.
En dan de binnenkant van hier zijn we eigenlijk aan de hand van een luisteraar toe te voegen aan elke individuele bondgenoot.
Dus dat ziet er zo uit.
Elyse ik dus dat geeft ons de specifieke bondgenoot en event listener Click-functie, net als dat en gedaan dit een beetje.
En dan is de code die we willen uitvoeren.
Laten we de kleur van de bondgenoot die werd geklikt op en laten we gewoon veranderen paars te zijn.
Dus hebben we een paar verschillende opties.
Wat ik moet doen is verwijzen naar de bondgenoot die werd geklikt.
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.
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.
Dus kan ik dit dot stijl die kleur gelijk paarse schrijven.
En eigenlijk is dat is iets meer voor de hand.
Het is een klein lettertype.
Dus laten we het doen roze, net als dat.
Ik druk op enter.
Er gebeurt niets onmiddellijk, maar als ik op een bondgenoot klikt kunt u zien dat het verandert roze te zijn.
En als ik blijf klikken blijven veranderen aan u roze kan het gewoon niet vertellen.
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.
We gaan om het te zien de hele tijd in de komende projecten die we maken.
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.
Je hoeft niet om dat te doen.
U kunt een benoemde functie apart zoals ik deed hier verklaren.
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.
Merk op dat we haakjes niet achteraf hebben omdat ik de functie zou onmiddellijk uit te voeren dat is niet wat we willen.
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.
Maar doe het niet gewoon nog niet uitgevoerd.
Dus deze twee zullen precies hetzelfde werk.
Het is gewoon een kwestie van voorkeur.
Voor het grootste deel zijn er enige verschillen die we later tegenkomen.
Ik zou veel liever om dit te gebruiken.
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.
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.
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.