1
00:00:00,510 --> 00:00:01,810
Dobrze welcome back.

2
00:00:01,860 --> 00:00:15,640
W tym filmie chcę porozmawiać trochę więcej o kilka różnych typów zdarzeń do tej pory nie spotkałem zdarzenia click i zdarzenia zmiany, które wykorzystaliśmy na wprowadzanie tekstu lub wprowadzania numeru w aplikacji Wynik obrony.

3
00:00:15,780 --> 00:00:18,930
Mam zamiar zacząć od wprowadzenia odniesienia zdarzenia M.B.A..

4
00:00:18,930 --> 00:00:20,720
Więc to jest strona internetowa jestem na tutaj.

5
00:00:20,940 --> 00:00:26,790
A strona ta jest nawiązaniem do wszystkich różnych wydarzeń, które są rozpoznawane przez API DOM.

6
00:00:26,910 --> 00:00:30,840
A jeśli przewinąć w dół może być zaskoczony, jak wiele istnieje.

7
00:00:31,260 --> 00:00:41,040
A ja rzeczywiście będzie mieć cię w następnym ćwiczeniu napisać kod wystarczy policzyć ile jest to zabawna praktyczny przykład wykorzystania geometrii minusy ..

8
00:00:41,310 --> 00:01:04,780
Więc masz zamiar policzyć ile istnieją, ale teraz po prostu wiem, że istnieje mnóstwo z nich i tam są chyba pięć lub sześć a może nawet do 10 naprawdę spotykane, że będzie korzystał ze wszystkich rzeczy razem jak na przeciągnij i upuść dla zdarzenie unosić kliknij wydarzenia być może podwójne kliknięcia kluczowych wydarzeń prasowych, ale poza tym dużo bardziej niejasnych te nigdy nie użyje, a może będziesz z nich korzystać raz w projekcie.

9
00:01:05,190 --> 00:01:10,510
Ale to dobrze wiedzieć, że ta strona nie istnieje, że istnieje tak wiele wydarzeń, które nigdy nie mogą nawet użyć.

10
00:01:10,740 --> 00:01:16,980
I ten film mam zamiar skupić się na dwie imprezy w szczególności, że ma do czynienia z tak unosić unosić się nad elementem myszą.

11
00:01:17,100 --> 00:01:20,490
A ci są nazywane myszy nad i myszy na zewnątrz.

12
00:01:20,790 --> 00:01:31,910
Więc mam prostą aplikację i mam zamiar zrobić to nazywa się to zrobić, co go wieku w moim nowym pliku, a ja po prostu się dodać moje regularne boilerplate a to nie będzie kompletny do listy.

13
00:01:31,920 --> 00:01:37,950
Nie będziemy w stanie dodać nowe lub które mamy zamiar zrobić, to mieć UL z trzema lub czterema sojusznikami.

14
00:01:38,070 --> 00:01:51,060
Rzeczy takie jak zmywania kota nakarmić kota i zrobimy podawania kota do psa i oszczędzać.

15
00:01:51,060 --> 00:01:54,340
Więc mamy trzy do zrobienia i to wszystko, czego potrzebujemy teraz.

16
00:01:54,630 --> 00:01:55,530
A to, co chcę robić.

17
00:01:55,530 --> 00:01:58,590
Zamierzam otworzyć tego w przeglądarce.

18
00:01:58,590 --> 00:02:05,190
Chcę móc kliknąć i które powinny szary out rzecz do zrobienia i może przekreślenie go umieścić linię przez nią.

19
00:02:05,340 --> 00:02:09,250
Ale chcę, aby być w stanie unosić i chcę wiedzieć, który z nich mam najechaniu.

20
00:02:09,270 --> 00:02:12,960
Więc mam ten miły opinie użytkowników jak unoszą się nad jednym z nich.

21
00:02:12,960 --> 00:02:21,640
Być może trzeba będzie go zmienić kolor lub pogrubienie zacznie po prostu co zielone i istnieje tak wiele przyjemnych efektów można zrobić dla swojego użytkownik korzystający z tych zdarzeń hover.

22
00:02:21,810 --> 00:02:26,870
Więc pokażę, że właśnie teraz, zanim rzeczywiście możemy napisać dowolny skrypt choć musimy sprawić, aby nasz plik.

23
00:02:26,940 --> 00:02:31,010
Więc mam zamiar zapisać nowy plik i nazwijmy go do zrobienia tych.

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

25
00:02:32,520 --> 00:02:51,520
I jak zawsze miałem mój alert podłączony Zapisz wrócić tutaj i dodaj w naszym skrypcie na dole i nasze źródło jest równa Deuce dot J.S. a my zapisać lub odświeżyć i dostajemy naszą czujność.

26
00:02:51,630 --> 00:02:53,190
To znaczy, że wszystko działa.

27
00:02:53,850 --> 00:03:00,100
Chodźmy w tym pierwszym przypadku, o którym wspomniałem, a pierwszą rzeczą, którą musisz zrobić, to wybrać coś, zanim będzie można manipulować.

28
00:03:00,120 --> 00:03:03,050
Więc mam zamiar zacząć po prostu robi to do pierwszego kłamstwa.

29
00:03:03,180 --> 00:03:19,560
Więc mam zamiar użyć var ​​pierwszym sojusznikiem dokument eCos i zrobię sojusznika wyboru zapytań i pamiętaj, to daje mi pierwsze kłamstwo, bo nie zrobił selektor zapytania wszystko, a potem mam zamiar dodać mój detektor zdarzeń do pierwszego sojusznika.

30
00:03:19,740 --> 00:03:30,060
Więc poszliśmy pierwszym sojusznikiem dodać detektor zdarzeń, a zdarzenie że jesteśmy wykrywa nie kliknąć to myszkę.

31
00:03:30,060 --> 00:03:32,350
A potem dajemy naszą funkcję zwrotną.

32
00:03:33,300 --> 00:03:38,650
I sposób, że po najechaniu myszką działa to się tak szybko, jak zaczniemy strzelać unoszące się nad czymś.

33
00:03:38,790 --> 00:03:47,880
Więc gdybym pracował z tego ostatniego sojusznika moją myszkę to ogień już teraz i teraz, a drugi i już teraz, a ten pierwszy.

34
00:03:47,880 --> 00:03:50,760
Więc to o tym, kiedy zacznie się unoszą.

35
00:03:50,910 --> 00:04:06,950
Więc najpierw chciałbym dodać detektor zdarzeń mouseover, a my po prostu zrobić dziennik zamiast myszy zwrotnej nad i jeśli odświeżyć otworzyć naszą konsolę Pamiętam, że zrobił to tylko do pierwszego sojusznika i tam idziemy otrzymujemy mouseover.

36
00:04:07,080 --> 00:04:11,610
Również ważne jest, aby zauważyć, że nie jest stale wypalania za każdym razem.

37
00:04:11,660 --> 00:04:16,050
Wiesz, że jesteśmy ponad to jest, gdy nasz unosić nad elementem właściwie zaczyna.

38
00:04:16,080 --> 00:04:21,770
Więc to jest przydatne, tak, że nie jesteśmy nieustannie wiesz nieustannie zalogowaniu lub cokolwiek kod jest to, że mamy w zwrotnego.

39
00:04:21,780 --> 00:04:24,530
Zdarza się tylko wtedy, gdy wskaźnik myszki nad początku.

40
00:04:24,900 --> 00:04:29,660
Więc zamiast po prostu przerwać pracę, która zalogowaniu Chodźmy na zmianie koloru sojusznika.

41
00:04:29,670 --> 00:04:30,640
Zróbmy to na zielono.

42
00:04:30,720 --> 00:04:32,880
Więc po najechaniu okazuje zielono.

43
00:04:32,880 --> 00:04:50,800
Więc musimy najpierw zrobić sojusznika styl dot że kolor zielony i równa oszczędzamy odświeżyć i teraz oglądać Zrobię go trochę większe i zrobić to trochę większy tutaj i odświeżyć jak zacznę myszy nad nim świeci na zielono.

44
00:04:51,240 --> 00:04:55,300
A potem, kiedy odejdę pozostaje zielone, które nie jest to, co chcemy.

45
00:04:55,410 --> 00:04:57,110
Chcemy po prostu, że jest to efekt hover.

46
00:04:57,150 --> 00:04:59,460
Więc kiedy unoszą się nad sojusznikiem okazuje zielono.

47
00:04:59,490 --> 00:05:07,380
Ale kiedy przestać wraca do bycia czarnym to zrobić naprawdę potrzebujemy innego zdarzenia, a zdarzenie będzie ognia, gdy nasz unoszą się skończyła.

48
00:05:07,410 --> 00:05:13,940
Kiedy więc opuścić ten element i to się nazywa Mysz się tak, mamy zamiar zrobić to samo pierwszego sojusznika.

49
00:05:14,090 --> 00:05:18,280
Ale w wydarzeniu Lessner myszy na zewnątrz.

50
00:05:19,680 --> 00:05:27,960
I wtedy nasza funkcja zwrotna, a my po prostu zrobić pierwszego stylu fly ataku kolor i ustawić ją z powrotem do czarnego.

51
00:05:28,080 --> 00:05:39,590
Tak po prostu, a jeśli mamy odświeżyć widać to idzie zielone i mysz się wraca do czerni i myszy nad zielonym i tak dalej.

52
00:05:40,020 --> 00:05:46,960
Więc teraz mamy ten mały efekt najechania, który pokazuje nam, co mamy, który unosi się nad zasadzie do zrobienia jest zaznaczona.

53
00:05:46,950 --> 00:05:50,130
Więc teraz przejdźmy to do pracy dla każdego kłamstwa.

54
00:05:50,160 --> 00:05:52,230
To tylko kilka drobnych zmian, które musimy zrobić.

55
00:05:52,260 --> 00:05:55,460
A pierwszy z nich to musimy wybrać wszystkie sojuszników.

56
00:05:55,510 --> 00:06:05,070
Zamiar zmienić bardzo zmienny o wiele kłamstw udokumentowanej zapytaniami nas wszystkie sojusznicy tak, że daje nam listę z trzech sojuszników.

57
00:06:05,400 --> 00:06:11,170
A potem, oczywiście, niestety nie możemy zrobić tego jest, że detektor zdarzeń, które nie działa.

58
00:06:11,160 --> 00:06:14,860
Musimy to zrobić dla pętli czterech naszych równa zeru.

59
00:06:15,090 --> 00:06:18,950
I mniej niż leży ten odnośnik.

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

61
00:06:20,870 --> 00:06:30,990
I mam nadzieję, że zaczynasz czuć się trochę bardziej komfortowe robi to dodawanie zdarzeń lub manipulowania coś zamiast pętli, gdzie możemy wybrać kilka z nich, a potem pętli i robimy coś indywidualnie.

62
00:06:31,180 --> 00:06:36,470
Tak jak mówiłem kilka filmów temu naprawdę wspólnego wzorca naprawdę ważne, że zaczynamy czuć się komfortowo z nim.

63
00:06:36,490 --> 00:06:40,550
Więc wewnątrz tutaj, a nie robi pierwszy indziej bym dodać detektor zdarzeń.

64
00:06:40,650 --> 00:06:45,760
Pracujemy z uchwytem sojusznicy oczy tak, że nasza indywidualna sprzymierzeńcem.

65
00:06:45,930 --> 00:06:51,950
A potem będę wystarczy skopiować ten kod i jest problem z tym kodem.

66
00:06:51,960 --> 00:06:55,090
Znaczy to będzie działać, ale to nie działa w ten sposób, że my chcemy.

67
00:06:55,360 --> 00:07:00,450
Co się stanie, to dodajemy detektor zdarzeń do siebie sojuszników sprzymierzeńcem.

68
00:07:00,960 --> 00:07:06,430
Ale kiedy myszy nad żadnym z nich jesteśmy tylko zmienia pierwszym sojusznikiem dot stylu w kolorze czarnym.

69
00:07:06,540 --> 00:07:09,800
A właściwie to nie zadziała, ponieważ pierwsze kłamstwo nie jest zdefiniowana więcej.

70
00:07:09,810 --> 00:07:10,860
Zmieniliśmy nazwę.

71
00:07:11,040 --> 00:07:12,740
Ale to nie to, co chcieliśmy i tak.

72
00:07:12,750 --> 00:07:17,220
Chcemy być sojusznikiem, który został unosił się nad że myszy nad zdarzenie wystąpiło.

73
00:07:17,440 --> 00:07:21,110
Tak więc możemy zmienić na słowa tego.

74
00:07:21,270 --> 00:07:28,020
Pamiętaj, że kluczowym słowem w tym zamiast detektor zdarzeń odnosi się do elementu lub elementu, który wywołał zdarzenie było dalej.

75
00:07:28,260 --> 00:07:33,210
Więc tym stylu, ale barwnego równą ekranie, a następnie musimy po prostu powielić ten kod ponownie.

76
00:07:33,850 --> 00:07:48,780
Ale zamiast myszki nad zrobimy myszy na zewnątrz i zamiast iść do Greena wrócimy do czerni i wtedy możemy pozbyć się tego i odświeżyć i tam idziemy.

77
00:07:48,880 --> 00:07:50,710
Mamy ładny mały efekt hover.

78
00:07:51,060 --> 00:07:56,210
Więc ostatnią rzeczą, będą mówić o jest dodanie kliknij słuchacza tak, aby ten trochę bardziej kompletne.

79
00:07:56,230 --> 00:08:07,150
Tak samo jak myślałem miał detektor zdarzeń kliknij dodaj lub funkcja zwrotna.

80
00:08:07,480 --> 00:08:10,610
A co mamy zamiar zrobić tutaj jest użycie klasy.

81
00:08:10,830 --> 00:08:12,910
Więc mam zamiar po prostu dodaj pierwszą klasę.

82
00:08:12,900 --> 00:08:20,290
To nie istnieje, ale mam zamiar powiedzieć to robi listę klasy i zrobi przełączać listę klasy startu że przełączać.

83
00:08:20,560 --> 00:08:22,680
A my po prostu zadzwonić klasa zrobić.

84
00:08:23,110 --> 00:08:29,930
Więc chodzi o to, mogę kliknąć na jednym z nich i powinno wyszarzone i mieć efekt przekreślenia.

85
00:08:30,030 --> 00:08:38,720
I choć nie mam klasy zdefiniowane zrobić to jeszcze dodane, więc mogę pokazać ci, że otworzyć konsolę i niech to skontrolować jednego z nich.

86
00:08:39,070 --> 00:08:48,470
A potem niech ją kliknąć i można zobaczyć lub kliknąć na pierwszej można zobaczyć przy okazji kolor zielony i czarny zmieniającym się tutaj jako zawisu.

87
00:08:48,490 --> 00:08:52,920
Ale jak klikam na tej pierwszej można zobaczyć dodaje klasy zrobione.

88
00:08:52,920 --> 00:08:55,740
I wtedy ponownie kliknij i odchodzi.

89
00:08:55,750 --> 00:08:58,070
Więc teraz po prostu trzeba zdefiniować klasę zrobić.

90
00:08:58,330 --> 00:08:59,290
Więc zróbmy to teraz.

91
00:08:59,380 --> 00:09:10,310
Pójdę się do wzniosłości i zrobić nowy plik i mam zamiar zapisać to jako do zrobienia jest, że C Ss i pierwszą rzeczą jaką możemy zrobić, to zdefiniować nasza klasa zrobić.

92
00:09:10,950 --> 00:09:24,450
I zamierzam dać mu przekreślenia skutków, które robimy z dekoracji tekstu i ustawić tę linię za pomocą, a także zmienić krycie tak krycie będzie 0,5 i oszczędzać.

93
00:09:24,820 --> 00:09:33,990
A potem oczywiście trzeba połączyć to należy zacząć ocenić, czy w wieku niego plik z nimi jak z powodu zmiennej na gutsiest nas i możemy zaoszczędzić.

94
00:09:34,000 --> 00:09:35,440
Teraz przetestować go.

95
00:09:35,660 --> 00:09:36,830
Odświeżyć stronę.

96
00:09:36,850 --> 00:09:37,470
I wskaźnik.

97
00:09:37,500 --> 00:09:41,520
Więc są dwa zdarzenia zmieniające kolor czarny i zielony.

98
00:09:41,520 --> 00:09:45,360
I teraz można kliknąć i otrzymujemy efekt przekreślenia.

99
00:09:45,540 --> 00:09:47,900
I ta linia pośrednictwem również.

100
00:09:48,120 --> 00:09:56,590
Istnieje kilka drobnych zmian chciałbym zrobić jednak, jeśli wrócimy do naszego pliku javascript pierwszy jest raczej niż zmiana koloru ręcznie tutaj.

101
00:09:56,640 --> 00:09:58,350
Zmiana to być zielony i czarny.

102
00:09:58,600 --> 00:10:00,800
Myślę, że jest jeszcze lepiej zrobić to z własnej klasy.

103
00:10:00,850 --> 00:10:12,060
Więc idę do nowej klasy i mam zamiar zadzwonić ten jeden wybrany, a potem idę do powiedzenia, gdy jest zaznaczony tekst lub kolor powinien być zielony tak po prostu.

104
00:10:12,310 --> 00:10:13,880
A potem pójdziemy z JavaScript.

105
00:10:13,990 --> 00:10:21,250
A kiedy wskaźnik myszki nad wszystkim chcemy zrobić, to powiedzieć, lista ta klasa dodać wybrane.

106
00:10:23,160 --> 00:10:38,170
I to wraca do tego rozdzielenia dotyczy pojęcia, gdzie nie chcemy manipulacyjne indywidualne style naszym javascript raczej możemy użyć javascript, aby włączyć częściach naszego Css i SAS rzeczywiście będzie odpowiedzialny za stylistykę.

107
00:10:38,460 --> 00:10:55,040
Tak, że dadzą mu wybraną klasę, gdy unoszą się nad i kiedy wyjeżdżamy lub gdy mamy bałagan zrobimy wybraniu tej klasy głupie listy usuń, a jeśli możemy zaoszczędzić odświeżyć widać wygląda całkiem dobrze.

108
00:10:55,530 --> 00:10:59,460
Klikamy dostajemy naszą przekreślenia.

109
00:11:00,080 --> 00:11:00,590
W porządku.

110
00:11:00,610 --> 00:11:02,260
Tam jest trochę do zrobienia.

111
00:11:02,740 --> 00:11:05,000
Więc to jest trochę ładniejszy sposób to zrobić.

112
00:11:05,050 --> 00:11:06,390
Funkcjonalnie wygląda tak samo.

113
00:11:06,420 --> 00:11:11,720
To jest po prostu lepszy praktyką jest stosowanie klas zamiast dodawania i szczypanie Style jedną naraz.

114
00:11:11,740 --> 00:11:16,270
Więc Podsumowując tutaj widzieliśmy dwa nowe mouseover i myszy wyjścia zdarzeń.