1
00:00:00,260 --> 00:00:01,440
OK we zullen terugkomen.

2
00:00:01,440 --> 00:00:06,810
Tot nu toe hebben we gesproken over hoe we de elementen met J Querrey kunt selecteren en ook hoe we ze kunnen manipuleren.

3
00:00:06,990 --> 00:00:11,790
Nu gaan we naar de laatste grote ontbrekende stuk dat de gebeurtenissen in J-query te introduceren.

4
00:00:11,850 --> 00:00:13,700
Dus denk terug aan vanille J.S ..

5
00:00:13,740 --> 00:00:17,780
Toen we gebeurtenislisteners toegevoegd gebruikten we een methode genaamd een evenement luisteraar.

6
00:00:18,150 --> 00:00:22,230
Nou, het blijkt dat Jay waar hij heeft een ton van de methoden die te maken hebben met gebeurtenissen.

7
00:00:22,350 --> 00:00:28,190
Dus ik heb het hoofdstuk evenement open op Jake, waar hij daar kan krijgen door te klikken op de gebeurtenissen hier.

8
00:00:28,260 --> 00:00:32,720
Dus zoals ik hier doorheen te scrollen kun je zien hoe veel.

9
00:00:32,810 --> 00:00:37,210
Coria evenement methoden zijn er chikor het komt met een ton van hen.

10
00:00:37,230 --> 00:00:41,820
Dus wat ik ga doen is aandacht vestigen op de drie belangrijkste zijn de drie die u kunt gebruiken.

11
00:00:41,830 --> 00:00:49,190
Negenennegentig procent van de tijd die drie methoden zijn snel druk op een toets en op.

12
00:00:49,650 --> 00:00:53,010
En ik zei dat deze drie zou je 99 procent van de tijd te gebruiken.

13
00:00:53,160 --> 00:00:55,950
Het is eigenlijk meer zoals deze hier.

14
00:00:55,950 --> 00:00:58,050
U kunt 99 procent van de tijd te gebruiken.

15
00:00:58,110 --> 00:01:04,600
Dus ik ga om te laten zien klikken en druk op de toets het eerste, maar mijn belangrijkste doel is om te laten zien hoe geweldig de methode is.

16
00:01:05,130 --> 00:01:06,450
Dus laten we beginnen.

17
00:01:06,450 --> 00:01:14,620
Dus Jay adjudanten snelle methode is hoe we kunnen heel snel en gemakkelijk een klik luisteraar toe te voegen aan een enkel element of een verzameling van elementen.

18
00:01:14,730 --> 00:01:18,210
Dus je kunt zien heb ik twee voorbeelden in dit geval.

19
00:01:18,210 --> 00:01:22,070
Ik ben het selecteren van iets en vervolgens het toevoegen van een klik luisteraar met een klik.

20
00:01:22,290 --> 00:01:26,070
Dus iets met het idee van het indienen lopen we selecteren we.

21
00:01:26,100 --> 00:01:34,470
Klik erop en dan komen we in een callback functie en dit callback functie zal worden geleid als er iets met het idee in te dienen wordt geklikt.

22
00:01:34,680 --> 00:01:37,400
En omdat het een ID-er is slechts één op de pagina.

23
00:01:37,530 --> 00:01:40,920
Dus als dat een item wordt geklikt deze code wordt uitgevoerd.

24
00:01:41,340 --> 00:01:46,650
Als je hier een kijkje nemen van je kunt zien dat ik het selecteren van alle knoppen op de pagina waarop het kon zijn.

25
00:01:46,650 --> 00:01:51,080
Het zou kunnen zijn 10 knopen en ik ben het toevoegen van een klik luisteraar om ze allemaal.

26
00:01:51,120 --> 00:01:55,800
Dus elke keer dat een toets is snel het zal waarschuwen iemand klikt u op de knop.

27
00:01:55,830 --> 00:01:56,760
Dus laat me te tonen dat.

28
00:01:56,750 --> 00:02:03,480
Nu heb ik een eenvoudige HTL pagina met Jay queery opgenomen als een CDN.

29
00:02:03,750 --> 00:02:10,730
En ik ga voegen laten we het doen Jay vraag evenementen en ik zal toevoegen in een paar knoppen.

30
00:02:11,370 --> 00:02:15,240
Dus de eerste die ik zeg me niet te corrigeren.

31
00:02:16,020 --> 00:02:21,230
En dan is de volgende zal zeggen serieus ok me.

32
00:02:21,390 --> 00:02:27,690
En de laatste die zal zeggen dat dit is je laatste waarschuwing.

33
00:02:28,080 --> 00:02:36,300
Dus we zullen slaan en open deze in de browser en controleer altijd alleen dat J geladen.

34
00:02:38,320 --> 00:02:38,780
OK.

35
00:02:38,850 --> 00:02:40,040
Ziet er goed uit.

36
00:02:40,650 --> 00:02:46,110
Dus we gemakkelijk hier beginnen door het toevoegen van een snelle luisteraar deze H-1 en er is slechts één op de pagina.

37
00:02:46,110 --> 00:02:50,170
Dus we hoeven alleen maar eerst met een dollarteken om te selecteren.

38
00:02:50,680 --> 00:02:55,610
Dus degene die geeft ons het recht voor H-1, die slechts één en dan lopen we.

39
00:02:55,640 --> 00:03:03,670
Klik niet op dat en dan moeten we passeren een callback functie die zal worden uitgevoerd wanneer we op dat H-1.

40
00:03:03,690 --> 00:03:24,940
Dus achter de schermen klik is met behulp van een event listener en het toevoegen van een klik luisteraar op deze H-1 en kunnen we dit doen een anonieme functie die veel vaker te zien, maar wat meer intimiderend voor nieuwere studenten of we konden een benoemde functie schrijven afzonderlijk en vervolgens de naam van die functie in hier.

41
00:03:25,260 --> 00:03:27,900
Maar zoals ik al zei anonieme functie zijn veel vaker voor.

42
00:03:28,200 --> 00:03:42,380
Dus wat we willen doen is gewoon te waarschuwen ieder correct en ik druk op enter hier en nu als ik op deze H-1 klik je ziet krijg ik H-1 af te sluiten en dat gebeurt niet op een ander element.

43
00:03:42,630 --> 00:03:54,990
Het gebeurt hier niet vergeten omdat mijn H-1 gaat helemaal over het scherm zodat CSSA probleem als ik wil de grootte van de ene veranderen, maar het gebeurt alleen als ik klik op de één element.

44
00:03:54,990 --> 00:04:00,020
Nu wat ik wil doen is laten zien hoe we snel een luisteraar kan toevoegen aan een verzameling van elementen.

45
00:04:00,150 --> 00:04:02,530
Dus ik ga alle knoppen hier selecteert.

46
00:04:02,640 --> 00:04:14,050
Dus een dollarteken knop en dan voegen we onze klik net als dat en we kunnen overgaan in een anonieme functie opnieuw als onze terugbelservice.

47
00:04:14,580 --> 00:04:27,130
En dit zal worden uitgevoerd wanneer een knop wordt geklikt en we zullen gewoon een waarschuwing druk op de knop, net als dat en druk op enter.

48
00:04:27,630 --> 00:04:35,470
En nu, als ik klik op een van deze knoppen daar gaan we knop geklikt knop klik op de knop te stoppen.

49
00:04:35,490 --> 00:04:41,150
Dus denk terug aan vanilla javascript om een ​​evenement luisteraar een verzameling van knoppen toe te voegen.

50
00:04:41,190 --> 00:04:54,780
Ik zou hebben om ze allemaal met de vraag selector selecteren of om elementen op tag naam en dan zou ik een te gebruiken voor lus om lus door ze allemaal en dan zou ik moeten individueel voeg een evenement luisteraar die duidelijk er gebeurt Achter de schermen.

51
00:04:54,870 --> 00:05:05,660
Maar alles wat ik moet doen is te schrijven deze lijn en dat zal lus voor mij dat het evenement luisteraars individueel zal toevoegen die haar leven echt makkelijk in plaats van alleen een leren knop geklikt wordt.

52
00:05:05,820 --> 00:05:10,940
Wat als ik wilde veranderen de stijl te veranderen de achtergrondkleur van de knop waarop is geklikt.

53
00:05:11,430 --> 00:05:13,970
Dus ik nodig zou hebben om een ​​klik luisteraar opnieuw toe te voegen.

54
00:05:13,970 --> 00:05:16,780
Ik ben gewoon op de pijl omhoog en dan waarschuwen.

55
00:05:17,040 --> 00:05:30,290
Wat we gaan doen is de kleur achtergrond, zodat gaat om iets dat C-s s achtergrond en we zullen veranderen roze te zijn.

56
00:05:30,450 --> 00:05:36,090
Dus de vraag is wat moeten we bellen Dotsie CSSA op en terug met vanille javascript.

57
00:05:36,090 --> 00:05:37,360
We zouden dit kunnen gebruiken.

58
00:05:37,380 --> 00:05:49,720
Het sleutelwoord dit en dat verwijst naar het element dat werd geklikt echter NJ query die zal niet helemaal werken wat we moeten doen, is gebruik maken van de J Querrey versie van deze.

59
00:05:49,950 --> 00:05:53,010
Dit is altijd een beetje een verwarrende idee.

60
00:05:53,010 --> 00:06:03,830
Ik denk dat het helpt om te onthouden dat wat Shakeri doet is het neemt plain vanilla Ja en wikkelt het in Jay query en het is groot J.A.G. knuffelen en het geeft het een aantal speciale eigenschappen en methoden.

61
00:06:03,840 --> 00:06:12,660
Dus als we willen dot CSSA dat is een J-query methode die we moeten ervoor zorgen dat we het nu draait op een J-query-object gebruiken.

62
00:06:12,660 --> 00:06:17,560
Dus gewoon oud Dit is de reguliere vanille javascript dit.

63
00:06:17,670 --> 00:06:21,440
Dus moeten we het te verpakken en te vertellen dat dit is de J-query-versie.

64
00:06:21,660 --> 00:06:23,190
Dus laten we testen of buiten.

65
00:06:23,370 --> 00:06:32,460
Druk op enter hier en nu laten we klik op de knop eerste hebben we dat alert omdat we nooit verlost van deze eerste klik luisteraar.

66
00:06:32,880 --> 00:06:40,280
En dan de achtergrond verandert in roze en je kunt zien dat er zal gebeuren met een ieder die ik klik.

67
00:06:40,440 --> 00:06:42,010
Wij konden ook zoiets te doen.

68
00:06:42,030 --> 00:06:47,610
Dus ik raakte de pijl omhoog en ik vernieuw de pagina in plaats van alleen het veranderen van hen roze te zijn.

69
00:06:47,670 --> 00:06:55,540
We kunnen ook doen annuleren die log en Walcott's voor volwassenen te loggen de tekst van de knop waarop is geklikt.

70
00:06:55,650 --> 00:07:22,430
Dus het zou iets zijn als u plus geklikt en dan zal ik een variabele om dit zo variabel tekst op te slaan gelijk dollarteken dit punt en aan die tekst uit daar hoeven we alleen maar naar de tekst methode te gebruiken, net als dat Kaso die inloggen krijgen u hebt geklikt ons tekst dat is onze naam van de variabele en voer.

71
00:07:22,920 --> 00:07:27,510
En nu, als ik er een klik je klikte niet click me u hebt geklikt.

72
00:07:27,540 --> 00:07:28,890
Dit is je laatste waarschuwing.

73
00:07:29,460 --> 00:07:30,360
En u hebt geklikt.

74
00:07:30,420 --> 00:07:31,830
Serieus niet click me.

75
00:07:32,190 --> 00:07:32,640
OK.

76
00:07:32,670 --> 00:07:33,930
Dus dat is alles wat ik zal laten zien over.

77
00:07:33,930 --> 00:07:34,650
Klik.

78
00:07:34,650 --> 00:07:39,520
Samenvattend kunnen we een luisteraar toe te voegen aan een element op een moment als we deden voor de H-1.

79
00:07:39,780 --> 00:07:43,870
Of we kunnen doen om een ​​collectie die is waar het echt nuttig wordt.

80
00:07:43,890 --> 00:07:53,670
En dan tot slot als we willen verwijzen naar het element dat is geklikt we nodig hebben om dollarteken dit is het J queery wikkel de J.A.G. gebruiken versie van de Vanilla.