Oké welkom terug.
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.
Ik ga om te beginnen door de invoering van de M.B.A. evenement referentie.
Dus dat is de webpagina ik ben op hier.
En deze webpagina is een verwijzing naar de verschillende evenementen die door de DOM API worden erkend.
En als we naar beneden scrollen u misschien verbaasd zijn hoeveel er zijn.
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 ..
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.
Maar het is goed om te weten dat deze webpagina bestaat dat er zo vele evenementen die we misschien zelfs nog nooit te gebruiken.
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.
En die worden genoemd de muis over en muis uit.
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.
We zullen niet in staat zijn om het toevoegen van nieuwe of dat we gaan doen is een UL met drie of vier bondgenoten.
Dingen zoals wassen kat voeden kat en we zullen voeden kat doen om de hond en op te slaan.
Dus hebben we onze drie to do's en dat is alles wat we nodig hebben voor nu.
En wat ik wil doen.
Ik ga dit openen in de browser.
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.
Maar ik wil ook in staat zijn om te zweven en ik wil weten welke ik zweefde over.
Dus ik krijg deze leuke feedback van gebruikers zoals ik de muisaanwijzer over een van deze.
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.
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.
Dus ik ga een nieuw bestand op te slaan en ik noem het to do's.
Ja.
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.
Dat betekent dat het werkt.
Laten we gaan op die eerste gebeurtenis die ik noemde en het eerste wat we moeten doen is kiezen iets voordat we kunnen manipuleren.
Dus ik ga om te beginnen door gewoon te doen om de eerste leugen.
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.
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.
En dan geven we onze callback functie.
En de manier waarop mouseover werkt het gaat om zo snel te vuren als we beginnen te zweven over iets.
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.
Dus het is over wanneer de Hover begint.
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.
Ook is het belangrijk op te merken dat het niet voortdurend afvuren elke keer weer.
Je weet dat we meer dan dit is het wanneer onze hover over een element daadwerkelijk begint.
Dus dat is handig, zodat we niet constant je weet voortdurend te loggen of wat de code is dat we in de callback.
Het gebeurt alleen wanneer we de muis over in eerste instantie.
Dus in plaats van alleen maar werk dat houtkap laten we annuleren op het veranderen van de kleur van de bondgenoot.
Laten we het groen.
Dus als u de muisaanwijzer over deze groen wordt.
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.
En toen ik weg te gaan blijft het groen dat is niet wat we willen.
We willen gewoon dat dit een hover effect.
Dus toen ik de muisaanwijzer op de bondgenoot blijkt groen.
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.
Dus als we vertrekken dit element en het is uit de naam Mouse dus we gaan om hetzelfde eerste bondgenoot te doen.
Maar op event Lessner muis uit.
En dan is onze callback functie en we zullen gewoon een eerste fly stijl aanval kleur en zet het terug naar zwart.
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.
Dus nu krijgen we dit kleine hover effect dat ons laat zien wat we zweefde over eigenlijk om te doen is geselecteerd.
Dus nu laten we dit te laten werken voor elke leugen.
Het is slechts een paar kleine veranderingen die we moeten doen.
En de eerste van hen is dat we nodig hebben om alle bondgenoten te selecteren.
Gaan zeer variabel veranderen ver leugens gedocumenteerd queries letter zijn alle bondgenoten dus dat geeft ons een lijst met de drie bondgenoten.
En dan natuurlijk helaas kunnen we niet gewoon doen hiervoor ligt dat een gebeurtenis luisteraar dat niet werkt.
We moeten een doen lus vier van onze gelijken nul.
I minder dan ligt die link.
Plus plus.
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.
Zoals ik al zei een paar video's geleden echt gemeenschappelijk patroon echt belangrijk dat we beginnen om comfortabel mee te krijgen.
Dus de binnenkant van hier in plaats van het doen van eerste wat ik zou event listener toe te voegen.
We werken samen met bondgenoten beugel ogen dus dat is onze individuele bondgenoot.
En dan ga ik om alleen deze code te kopiëren en er is een probleem met deze code.
Ik bedoel, het zal werken, maar het zal niet werken op de manier die we willen dat het.
Wat zal gebeuren is dat we het toevoegen van een event listener aan elke bondgenoot bondgenoten.
Maar als we de muis over een van hen dat we alleen het veranderen van de eerste bondgenoot dot stijl zwart gekleurd.
En eigenlijk zal het niet werken omdat eerste leugen niet meer is gedefinieerd.
We veranderden de naam.
Maar dat is niet wat we wilden anyways.
We willen dat de bondgenoot die werd zweefde over dat met de muis over gebeurtenis heeft plaatsgevonden op zijn.
Dus we kunnen veranderen om het woord dit.
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.
Dus deze stijl, maar gekleurd gelijke scherm en dan gaan we gewoon opnieuw dupliceren van deze code.
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.
We hebben onze leuke hover effect.
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.
Dus hetzelfde als ik had gedacht event listener klik toe te voegen of een callback functie.
En wat we hier gaan doen is gebruik maken van een klasse.
Dus ga ik voeg gewoon de klasse eerste.
Het bestaat niet, maar ik ga zeggen dat dit doet klasse lijst en zal doen schakelt het begin klasse lijst die te schakelen.
En we zullen gewoon bellen met de klas gedaan.
Dus het punt is dat ik kan klikken op een van deze en het moet Gray naar buiten en hebben een doorhaling effect.
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.
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.
Maar toen ik op deze eerste klik je kunt zien het voegt klasse gedaan.
En klik ik opnieuw en het gaat weg.
Dus nu moeten we gewoon de klas gedaan definiëren.
Dus laten we dat nu doen.
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.
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.
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.
Laten we nu eens testen het uit.
U Vernieuw de pagina.
Ik zweven.
Dus maak je er twee gebeurtenissen het veranderen van de kleur zwart en groen.
En nu kan ik klikken en krijgen we een doorhaling effect.
En deze lijn door ook.
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.
Het veranderen van het aan groen en zwart zijn.
Ik denk dat het nog steeds beter om het te doen met onze eigen klasse.
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.
En dan gaan we met de Javascript.
En als we de muis over alles wat we willen doen, is zeggen dat deze klasse lijst toe te voegen geselecteerd.
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.
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.
We klikken we onze doorgehaald.
Okee.
Er is een kleine to do list.
Dus dit is een iets leukere manier is om het te doen.
Functioneel het ziet er hetzelfde.
Het is gewoon een betere praktijk om lessen te gebruiken in plaats van toe te voegen en het afstellen van stijlen een voor een.
Dus kort samengevat hier zagen we twee nieuwe evenementen mouseover en muis uit.