Dobrze welcome back.
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.
Mam zamiar zacząć od wprowadzenia odniesienia zdarzenia M.B.A..
Więc to jest strona internetowa jestem na tutaj.
A strona ta jest nawiązaniem do wszystkich różnych wydarzeń, które są rozpoznawane przez API DOM.
A jeśli przewinąć w dół może być zaskoczony, jak wiele istnieje.
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 ..
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.
Ale to dobrze wiedzieć, że ta strona nie istnieje, że istnieje tak wiele wydarzeń, które nigdy nie mogą nawet użyć.
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ą.
A ci są nazywane myszy nad i myszy na zewnątrz.
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.
Nie będziemy w stanie dodać nowe lub które mamy zamiar zrobić, to mieć UL z trzema lub czterema sojusznikami.
Rzeczy takie jak zmywania kota nakarmić kota i zrobimy podawania kota do psa i oszczędzać.
Więc mamy trzy do zrobienia i to wszystko, czego potrzebujemy teraz.
A to, co chcę robić.
Zamierzam otworzyć tego w przeglądarce.
Chcę móc kliknąć i które powinny szary out rzecz do zrobienia i może przekreślenie go umieścić linię przez nią.
Ale chcę, aby być w stanie unosić i chcę wiedzieć, który z nich mam najechaniu.
Więc mam ten miły opinie użytkowników jak unoszą się nad jednym z nich.
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.
Więc pokażę, że właśnie teraz, zanim rzeczywiście możemy napisać dowolny skrypt choć musimy sprawić, aby nasz plik.
Więc mam zamiar zapisać nowy plik i nazwijmy go do zrobienia tych.
Tak.
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ść.
To znaczy, że wszystko działa.
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ć.
Więc mam zamiar zacząć po prostu robi to do pierwszego kłamstwa.
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.
Więc poszliśmy pierwszym sojusznikiem dodać detektor zdarzeń, a zdarzenie że jesteśmy wykrywa nie kliknąć to myszkę.
A potem dajemy naszą funkcję zwrotną.
I sposób, że po najechaniu myszką działa to się tak szybko, jak zaczniemy strzelać unoszące się nad czymś.
Więc gdybym pracował z tego ostatniego sojusznika moją myszkę to ogień już teraz i teraz, a drugi i już teraz, a ten pierwszy.
Więc to o tym, kiedy zacznie się unoszą.
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.
Również ważne jest, aby zauważyć, że nie jest stale wypalania za każdym razem.
Wiesz, że jesteśmy ponad to jest, gdy nasz unosić nad elementem właściwie zaczyna.
Więc to jest przydatne, tak, że nie jesteśmy nieustannie wiesz nieustannie zalogowaniu lub cokolwiek kod jest to, że mamy w zwrotnego.
Zdarza się tylko wtedy, gdy wskaźnik myszki nad początku.
Więc zamiast po prostu przerwać pracę, która zalogowaniu Chodźmy na zmianie koloru sojusznika.
Zróbmy to na zielono.
Więc po najechaniu okazuje zielono.
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.
A potem, kiedy odejdę pozostaje zielone, które nie jest to, co chcemy.
Chcemy po prostu, że jest to efekt hover.
Więc kiedy unoszą się nad sojusznikiem okazuje zielono.
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.
Kiedy więc opuścić ten element i to się nazywa Mysz się tak, mamy zamiar zrobić to samo pierwszego sojusznika.
Ale w wydarzeniu Lessner myszy na zewnątrz.
I wtedy nasza funkcja zwrotna, a my po prostu zrobić pierwszego stylu fly ataku kolor i ustawić ją z powrotem do czarnego.
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.
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.
Więc teraz przejdźmy to do pracy dla każdego kłamstwa.
To tylko kilka drobnych zmian, które musimy zrobić.
A pierwszy z nich to musimy wybrać wszystkie sojuszników.
Zamiar zmienić bardzo zmienny o wiele kłamstw udokumentowanej zapytaniami nas wszystkie sojusznicy tak, że daje nam listę z trzech sojuszników.
A potem, oczywiście, niestety nie możemy zrobić tego jest, że detektor zdarzeń, które nie działa.
Musimy to zrobić dla pętli czterech naszych równa zeru.
I mniej niż leży ten odnośnik.
Plus Plus.
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.
Tak jak mówiłem kilka filmów temu naprawdę wspólnego wzorca naprawdę ważne, że zaczynamy czuć się komfortowo z nim.
Więc wewnątrz tutaj, a nie robi pierwszy indziej bym dodać detektor zdarzeń.
Pracujemy z uchwytem sojusznicy oczy tak, że nasza indywidualna sprzymierzeńcem.
A potem będę wystarczy skopiować ten kod i jest problem z tym kodem.
Znaczy to będzie działać, ale to nie działa w ten sposób, że my chcemy.
Co się stanie, to dodajemy detektor zdarzeń do siebie sojuszników sprzymierzeńcem.
Ale kiedy myszy nad żadnym z nich jesteśmy tylko zmienia pierwszym sojusznikiem dot stylu w kolorze czarnym.
A właściwie to nie zadziała, ponieważ pierwsze kłamstwo nie jest zdefiniowana więcej.
Zmieniliśmy nazwę.
Ale to nie to, co chcieliśmy i tak.
Chcemy być sojusznikiem, który został unosił się nad że myszy nad zdarzenie wystąpiło.
Tak więc możemy zmienić na słowa tego.
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.
Więc tym stylu, ale barwnego równą ekranie, a następnie musimy po prostu powielić ten kod ponownie.
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.
Mamy ładny mały efekt hover.
Więc ostatnią rzeczą, będą mówić o jest dodanie kliknij słuchacza tak, aby ten trochę bardziej kompletne.
Tak samo jak myślałem miał detektor zdarzeń kliknij dodaj lub funkcja zwrotna.
A co mamy zamiar zrobić tutaj jest użycie klasy.
Więc mam zamiar po prostu dodaj pierwszą klasę.
To nie istnieje, ale mam zamiar powiedzieć to robi listę klasy i zrobi przełączać listę klasy startu że przełączać.
A my po prostu zadzwonić klasa zrobić.
Więc chodzi o to, mogę kliknąć na jednym z nich i powinno wyszarzone i mieć efekt przekreślenia.
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.
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.
Ale jak klikam na tej pierwszej można zobaczyć dodaje klasy zrobione.
I wtedy ponownie kliknij i odchodzi.
Więc teraz po prostu trzeba zdefiniować klasę zrobić.
Więc zróbmy to teraz.
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ć.
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ć.
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ć.
Teraz przetestować go.
Odświeżyć stronę.
I wskaźnik.
Więc są dwa zdarzenia zmieniające kolor czarny i zielony.
I teraz można kliknąć i otrzymujemy efekt przekreślenia.
I ta linia pośrednictwem również.
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.
Zmiana to być zielony i czarny.
Myślę, że jest jeszcze lepiej zrobić to z własnej klasy.
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.
A potem pójdziemy z JavaScript.
A kiedy wskaźnik myszki nad wszystkim chcemy zrobić, to powiedzieć, lista ta klasa dodać wybrane.
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ę.
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.
Klikamy dostajemy naszą przekreślenia.
W porządku.
Tam jest trochę do zrobienia.
Więc to jest trochę ładniejszy sposób to zrobić.
Funkcjonalnie wygląda tak samo.
To jest po prostu lepszy praktyką jest stosowanie klas zamiast dodawania i szczypanie Style jedną naraz.
Więc Podsumowując tutaj widzieliśmy dwa nowe mouseover i myszy wyjścia zdarzeń.