OK wrócimy.
Powrót na wstępie javascript Wspomniałem, że jednym z istotnych powodów do nauki JavaScript to, że możemy używać go, aby nasze strony interaktywne.
To w jaki sposób możemy uruchomić kod, gdy użytkownik kliknie przycisk lub wpisać coś w lub uderza klawisz strzałki lub cokolwiek robią.
Możemy mieć jakiś odpowiedni kod, który jest wykonywany w danym momencie nie tylko wykonywany na samym początku strony.
Tak więc, aby to zrobić musimy porozmawiać o wydarzeniach DOM.
Więc ten film będzie wstępem do wydarzeń DOM.
Koncepcyjnie proces ustalania ich i wówczas również składnię.
Tak jak już wspomniałem wydarzenia są wszędzie.
Pomyśl o tym, kiedy interakcję ze strony różnych rzeczy, które dzieją się możesz kliknąć na takie rzeczy jak przycisku można najechać kursorem na link i coś może pop-up.
Można przeciągać i upuszczać elementy na niektórych stronach.
Może chcesz mieć kod, który biegnie od użytkownik kliknie dwukrotnie a właściwie ta strona ma kilka przykładów.
Ten slajd dot com jest to strona internetowa, a ja uderzenia klawiszy strzałek w lewo iw prawo do zmiany slajdów.
Tak więc niektóre kodu polega na uruchomieniu kiedy uderzy lewy klawisz strzałki lub klawisz strzałki w prawo lub po kliknięciu tutaj.
To również wydarzenie i to robi coś jest uruchomiony jakiś kod, który się zmienia bieżący slajd.
Więc chodzi o to wydarzenia są wszędzie i są naprawdę ekscytujące.
To jeden z moich ulubionych tematów, które uczą, bo teraz możemy uczynić nasze strony internetowe interaktywne możemy wziąć rzeczy manipulacji, które byliśmy poznawania zmieniających kolory zmieniając tekst, a następnie możemy faktycznie, że gdy coś się dzieje, w szczególności.
Więc to naprawdę otwiera możliwości manipulowania akademiku.
To, w jaki sposób zamierzamy tworzyć gry, jak to zrobimy formą Walidatory Tic Tac Toe mamy zamiar zrobić naprawdę fajna gra wyboru koloru, a wszystko wynika z tych wydarzeń.
Więc sposób, że wydarzenia te działają jest to, że tak naprawdę dołączyć je do konkretnych elementów więc wybrać element podobny do pierwszego przycisku lub drugiego H-1 lub wejście tam gdzie typ jest równa do tekstu, a potem dołączyć detektor zdarzeń do wybrany element.
Więc jako przykład możemy słuchać za kliknięcie przycisku możemy słuchać na zdarzenie najechania w sprawie H1 możemy słuchać za kluczowy prasowej w przypadku wprowadzania tekstu i porozmawiamy więcej o różnicach między tymi wydarzeniami.
Jest tak wiele różnych rodzajów zdarzeń w JavaScript, ale co ważne jest to, że musimy mieć imprezę, która jest nasłuchiwała na danym elemencie.
Tak jak wcześniej, kiedy będę mówić o zaznaczyć, a następnie manipulować, że nadal obowiązuje.
Musimy wybrać coś, a następnie manipulacji, co dzieje się nam dodać detektor zdarzeń do tej rzeczy, które wybraliśmy.
Jest jeszcze jedna metoda, w szczególności, że będziemy używać cały czas, który jest nazywany detektor zdarzeń dodatek.
Więc co detektora zdarzeń jest to, co używamy raz zaznaczyć element podobny do pierwszego przycisku lub typu wejścia, ponieważ hasło i mamy coś wybrany wówczas nazywamy dodać detektor zdarzeń na nim i dajemy dwa argumenty.
Pierwszym z nich jest typ zdarzenia, które chcemy słuchać.
I drugi argument jest kod, który chcemy uruchomić, kiedy to zdarzenie.
Tak oto przykład.
Ja wybierając pierwszy przycisk na stronie, nie ma większego znaczenia, gdzie przycisk jest i jak wygląda ani nic po prostu dowolny przycisk.
A potem mam przycisku na nasłuchiwania zdarzeń kliknięcia dzwoni, a następnie drugi argument to funkcja, która przechodzi przez całą drogę tutaj.
A ten kod nie jest uruchamiany od razu.
Pamiętaj, to jest nazywany oddzwaniania.
Ten kod nie jest uruchamiany natychmiast.
Jest prowadzony tylko raz to zdarzenie pożary.
Więc po kliknięciu na przycisk javascript idzie wzywa go z powrotem.
Funkcja ta mówi, hej, to twoja chwila, aby błyszczeć i wrócić tutaj gotowe niech wykona ci.
A potem, że kod jest uruchamiany, a my się nie radził zalogować ktoś kliknij przycisk.
Tak więc funkcja ta będzie działać zawsze, gdy przycisk jest szybko przejechać z konkretnym przyciskiem, że wybrana kliknięciu.
Więc oto inny przykład.
Ten przypadek mam znak tu guzik i akapitu i wybrane oboje z selektorem Kery i zapisać je zarówno do zmiennych, a następnie wszystko, co możemy zrobić, to dodać kliknij słuchacza tak, przycisk nie dodać detektor zdarzenia kliknięcia a potem Drugim argumentem jest to, że funkcja zwrotna.
A co mamy zamiar zrobić, że gdy kliknięciu przycisku zmienia się treść akapitów tekstu, aby być kimś, kliknij przycisk i można zobaczyć po kliknięciu tego przycisku zmienia się od nikogo kliknięciu mnie i ktoś musi kliknąć przycisk.
Więc teraz mam zamiar zrobić szybki pokaz używając naszą stronę demo Dom zacznijmy od podejmowania tego H-1 jest tutaj.
Zmień kolor, gdy użytkownik kliknie na nim.
Tak więc, aby to zrobić musimy zacząć zawsze wybierając H-1.
Więc mamy kilka opcji tam.
Zamierzam po prostu użyć queery dokument selektora, że ​​selektor zapytanie H-1 upewnić, mamy go.
W porządku.
Potem wystarczy napisać H-1, które dodają detektor zdarzeń.
Pamiętaj, że to dwa argumenty.
Pierwszy z nich to wydarzenie, że jesteśmy nasłuchując.
A my spędzić trochę więcej czasu rozmawiając o różnych wydarzeniach z różnych opcji.
Na razie jesteśmy po prostu robi kliknięcie, a drugi to kod chcemy uruchomić, gdy użytkownik kliknie.
Więc funkcja i po prostu zacząć naprawdę proste i po prostu zrobić alert, gdy użytkownik kliknie.
Więc zrobimy alert każdy został kliknięty podobnie jak ten.
A teraz naciśnij Enter.
Nic się nie zmienia od razu.
Ale teraz, gdy klikam na jednej więc będę zamknąć to.
Gdybym kliknąć w dowolnym miejscu na stronie.
Abstrahując od H-1, nic się nie dzieje.
Jak tylko kliknąć H-1 choć mówi mi H-1 była prawidłowa.
Więc to jest bardzo ważne.
To odnosi się tylko do H-1, ale to nie znaczy, mogę iść tu i kliknij, bo pamiętam, czy mogę sprawdzić tego H-1 przechodzi przez całą drogę w poprzek ekranu.
Więc po prostu coś, aby pamiętać, że w porządku dla nas w tej sprawie, ale to pojawiają się od czasu do czasu, gdzie rzeczy zachowują się nieco inaczej niż może chcesz je i trzeba je wykorzystać CSSA może skrócić etap jeden lub zmienić słuchacz i tak.
Więc zamiast po prostu alarmując Spróbujmy zrobić coś innego.
A jeśli po prostu wciskamy strzałkę w górę wydarzenie Dodaj słuchacza przyciskiem myszy i zmienić kod tutaj i zrobić coś jak H-1, że styl tła równa i zróbmy Orange tło i nacisnąć enter.
Znowu nic się nie zmieni, ale od razu po kliknięciu zwrócić uwagę na to, co się dzieje, pierwszą rzeczą, która się dzieje, że wciąż mówi w pogotowiu, że H-1 został kliknięty.
A potem, kiedy zamknę że następnie zmienia się pomarańczowa.
Więc morał jest to, że możemy mieć więcej niż jednego słuchacza na danym elemencie.
Gdy klikniemy na tym H-1 pierwszy słuchacz, który dodaliśmy słuchał za kliknięcie i pobiegł alert, a następnie dodaliśmy kolejny słuchacz potem, że też słuchał za kliknięcie, ale zmienił kolor tła.
Więc kiedy klikam oboje uciekać.
I to zawsze będzie się działo teraz, gdy kliknę ponownie pojawia się alarm i jego zmieniła kolor na pomarańczowy oczywiście nie widzisz, bo było już pomarańczowe, ale musisz mi zaufać.
Utrzymuje zmieniając go na pomarańczowy kółko kółko.
OK, ja mam zamiar odświeżyć i pozbyć się tego wszystkiego.
Chcę też zrobić szybki pokaz dodając słuchacza do ul.
Więc zróbmy selektor zapytania zrzutu dokument UL i pamiętać, że mamy trzy sojuszników zamiast jednego ul.
Więc mam zamiar pokazać, co dzieje się, gdy możemy ustawić go na elemencie nadrzędnym takiego.
No a ja nie zamierzam użyć zmiennej tylko będzie to zrobić tutaj.
Adamant słuchaczem.
Kliknij.
Więc to jest pierwszy argument.
Drugim z nich jest funkcja, że ​​chcemy działać podobnie jak ten.
I mam zamiar zacząć.
Zróbmy konsolę, że dziennik były kliknięć dobrze i wiem co.
To jest strona bierna.
Kiepski pomysł.
Zróbmy.
Kliknąłeś UL o wiele lepiej.
OK.
Więc trzymajmy konsolę otwarte i niech kliknij na ul.
Ale w jaki sposób możemy kliknąć na oleju.
Ponieważ również ma trzy sojuszników w jej wnętrzu.
UL jest cała ta sprawa tutaj.
Tak więc każdy szybkie nie ma znaczenia, który sojusznikiem Jestem po prostu wszędzie w studni.
Widać tutaj, zwiększając liczbę.
Wszelkie szybki na dołek to będzie wykonywać ten dziennik konsoli kropka.
Warto więc odświeżyć jeszcze raz i tym razem powiedzmy, że chcę zmienić samego sojusznika.
Gdy klikam na indywidualne sojusznika chcę coś się wydarzy.
Istnieje kilka sposobów, aby to uczynić.
I mamy zamiar uruchomić tylko z jednym, który jest najprostszym dołączenie jednego słuchacza do każdego sojusznika jako heads-up.
Co będziemy robić w końcu jest dołączenie jednego słuchacza do UL, a następnie wewnątrz tego słuchacza.
Jedziemy do wykrycia, które leżą wewnątrz specjalnie UL został kliknięty na wszystkich z jednym Lessner.
Na razie jednak mamy zamiar dodania osobnego słuchacza do każdego leżą więc musimy zacząć od wyboru sojuszników, aby nasi sojusznicy równa dokument dot queery selektor wszystkie sojusznikiem pilnuje mamy je wszystkie.
No dobrze, co musimy zrobić dla pętli.
Tak na var i jest równa zeru.
Pamiętaj, że powiedziałem, że będziemy robić to cały czas.
Więc mniej niż sojuszników, że długość ja plus Plus tak po prostu.
A potem wewnątrz tutaj jesteśmy rzeczywiście będzie dodać detektor do poszczególnych sojusznika.
Tak, że wygląda następująco.
Elyse I tak, że daje nam konkretną sojusznikiem i detektor zdarzenia kliknięcia funkcji wystarczy tak i zrobił to trochę.
A następnie kod, który chcemy uruchomić.
Zmieńmy kolor sojusznika, który został kliknięty się i niech po prostu go zmienić się fioletowy.
Więc mamy kilka różnych opcji.
Co muszę zrobić, to znaleźć w sojusznika, który został kliknięty.
Więc może to zrobić sojusznikom I choć nie jest to naprawdę świetne rozwiązanie, ponieważ nie jest znacznie łatwiejszy sposób zrobić to, co jest użycie tego słowa kluczowego.
Więc wewnątrz słuchacza słowo kluczowe odnosi się do elementu, który został kliknął lub elementu, który został unosił się nad lub elementu, który klawisz nacisnąć wystąpiły u gdziekolwiek element, który przechodzi tuż przed na razie cokolwiek, co jest zaznaczone jest, co to odnosi się do.
Mogę więc napisać ten styl dot że kolor równa fioletowy.
I rzeczywiście jest to coś bardziej oczywiste.
Jest to mała czcionka.
Więc zróbmy różowy tak po prostu.
I wciśnij enter.
Nic nie dzieje się od razu, ale jeśli kliknę sojusznika widać, że zmienia się różowe.
A jeśli Ciągle klikając ciągle się zmienia na różowy po prostu nie można powiedzieć.
Więc ten wzór tu wybierając kilka rzeczy zapętlenie poprzez nich z osobna i dodanie detektora zdarzeń do każdego z nich jest naprawdę bardzo powszechne.
Jedziemy zobaczyć to cały czas w ciągu najbliższych kilku projektów, które podejmujemy.
Ostatnią rzeczą, będę tu wspomnieć, jest to, że nie zawsze trzeba używać anonimowego funkcji tak jak my tutaj, gdzie piszesz funkcji z nawiasami i nie dać mu nazwę.
Nie musisz tego robić.
Można zadeklarować nazwie funkcji oddzielnie tak jak ja tutaj.
Tekst zmiany funkcji, a następnie wszystko, co musimy zrobić, to powiedzieć, że przycisk dodać detektor zdarzeń lub kliknij a następnie dajemy go zmienić tekst.
Zauważ, że nie mamy nawiasy potem bo od razu uruchomić funkcję, która jest nie to, co chcemy.
Więc jesteśmy tylko przejazdem wartość tej funkcji jesteśmy przechodzącej treść w zasadzie do tego szybkiego słuchacza i mówiąc oto funkcję chcę Ci uruchomić, gdy użytkownik kliknie przycisk.
Ale nie uruchomić go jeszcze.
Więc te dwa będą działać dokładnie tak samo.
To tylko kwestia preferencji.
W większości przypadków istnieją pewne różnice, które mogą spotykamy później.
Chciałbym zdecydowanie wolą używać.
Czas tylko wtedy, gdy nie będę używać anonimowego funkcji jest gdybym musiał ponownie użyć tego kodu gdzieś indziej poza słuchacza zegara.
Więc gdybym chciał, aby go uruchomić się indywidualnie lub Chciałem go uruchomić zamiast innego szybkiego słuchacza, a nie powielanie tej funkcji dałbym mu nazwę, a następnie powielić tylko nazwę, gdzie używam go dwukrotnie.
OK, więc następnym aż będziesz miał okazję zrobić kilka szybkich ćwiczeń z wykorzystaniem szybkie Wisner, a niektóre z rzeczy, których nauczyłem się w ciągu ostatnich kilku filmów.